如何用基础JavaScript修改HTML字符串中指定ID的内容？

完全可以用基础JavaScript实现，不用字符串查找替换，而是通过DOM解析+结构化操作的方式，精准定位id为Title的元素并修改，避免字符串匹配的不稳定问题。

具体步骤和代码示例：

• 用DOMParser把HTML字符串解析成可操作的DOM文档
• 通过getElementById定位目标元素
• 修改元素内容（文本/HTML结构都可以）
• 把修改后的DOM再转回HTML字符串

var HTMLTest = `blablabla <h1 id="Title">Porsche 911 GT3 RS</h1> blablabla`;

// 解析HTML字符串为DOM文档
const parser = new DOMParser();
const doc = parser.parseFromString(HTMLTest, 'text/html');

// 定位id为Title的元素
const titleEl = doc.getElementById('Title');

if (titleEl) {
  // 示例1：替换纯文本内容
  titleEl.textContent = 'Ferrari SF90 XX';
  
  // 示例2：替换为带样式的HTML内容（如果需要）
  // titleEl.innerHTML = '<span style="color:#ff2d55">Ferrari SF90 XX</span>';
}

// 转回HTML字符串，若想避免自动补全的html/head标签，可取body的innerHTML
const updatedHTML = doc.body.innerHTML;
console.log(updatedHTML);

这种方法的优势：

• 不管字符串其他内容怎么变化，只要目标元素的id="Title"不变，就能精准定位，不会出现匹配错误
• 支持修改元素的任何属性或内容，比字符串替换灵活得多
• 完全基于原生JavaScript API，无额外依赖

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