如何使用JavaScript根据ID更新字符串中的HTML内容？

要解决这个问题，直接用正则表达式替换容易踩坑（比如ID可能出现在注释、其他属性里），最稳妥的方式是把HTML字符串转换成可操作的DOM对象，通过DOM API精准找到目标元素更新内容，再转回字符串。下面分浏览器和Node.js环境给出具体实现：

浏览器环境实现 #

var htmlString = '<body> <div class="shrek"> <div class="trck">Object containing <div id ="head">  <strong>Object containing</strong> </div> </div> </div> <div id ="body"> String Variable String Variable String Variable</div> <div id ="foot">Similar Questions</div> </body>'
var obj = { 'head': '<strong>I</strong> am new head' }

// 1. 先解码转义的HTML实体，得到真实的HTML结构
const decodedHtml = htmlString.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// 2. 创建临时容器来解析HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = decodedHtml;

// 3. 遍历修改对象，按ID匹配并更新内容
Object.entries(obj).forEach(([targetId, newContent]) => {
  const element = tempContainer.querySelector(`#${targetId}`);
  if (element) {
    // 解码新内容里的HTML实体，避免显示成纯文本
    element.innerHTML = newContent.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  }
});

// 4. 把修改后的DOM转回转义格式的HTML字符串（和原格式保持一致）
const updatedHtmlString = tempContainer.innerHTML
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;');

console.log(updatedHtmlString);

Node.js环境实现（需用到jsdom库） #

如果是在后端环境，没有浏览器DOM，可以用jsdom模拟浏览器环境：

1. 先安装依赖：

npm install jsdom

2. 实现代码：

const { JSDOM } = require('jsdom');

var htmlString = '<body> <div class="shrek"> <div class="trck">Object containing <div id ="head">  <strong>Object containing</strong> </div> </div> </div> <div id ="body"> String Variable String Variable String Variable</div> <div id ="foot">Similar Questions</div> </body>'
var obj = { 'head': '<strong>I</strong> am new head' }

// 解码HTML实体
const decodedHtml = htmlString.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// 创建JSDOM实例模拟DOM环境
const dom = new JSDOM(decodedHtml);
const tempContainer = dom.window.document.querySelector('html');

// 遍历更新目标元素
Object.entries(obj).forEach(([targetId, newContent]) => {
  const element = tempContainer.querySelector(`#${targetId}`);
  if (element) {
    element.innerHTML = newContent.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  }
});

// 转回转义格式的HTML字符串
const updatedHtmlString = tempContainer.innerHTML
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;');

console.log(updatedHtmlString);

关键注意事项 #

• ID唯一性：确保HTML里的ID是唯一的，querySelector只会匹配第一个ID元素（符合HTML规范，ID本就应该唯一）
• 实体解码：不管原HTML还是新内容里的</>都要先解码，否则DOM会把它们当成纯文本显示
• 格式一致性：如果不需要保持原字符串的转义格式，可以跳过最后一步的</>替换，直接使用tempContainer.innerHTML

内容的提问来源于stack exchange，提问作者Kunal Vashist