如何使用JavaScript读取并更新作为变量存储的完整HTML字符串

实现方案 #

你无法直接对HTML字符串调用DOM API（如getElementById），可以通过DOMParser在内存中完成DOM解析、修改、重新序列化的全流程，不会操作页面实际DOM，代码如下：

const parser = new DOMParser();
// 将HTML字符串解析为内存中的DOM文档对象
const htmlDoc = parser.parseFromString(myDynamicJSON.invoiceEmail, 'text/html');

// 遍历变量映射完成内容替换
myDynamicJSON.Variables.forEach(item => {
  const targetEl = htmlDoc.getElementById(item.Source);
  // 增加判空避免ID不存在时报错
  if (targetEl) {
    targetEl.innerHTML = item.Destination;
  }
});

// 将修改后的DOM重新序列化为字符串，赋值回原字段
myDynamicJSON.invoiceEmail = htmlDoc.documentElement.outerHTML;

补充说明 #

• 原有循环写法存在语法错误：for (var i in myDynamicJSON.Variables.length)是错误的遍历方式，且myDynamicJSON.Variables.[i]多了多余的小数点，建议直接使用数组的forEach方法遍历更稳妥
• 如果是Node.js环境没有内置DOM API，可以引入jsdom库实现完全相同的逻辑，不需要修改核心代码
• 该方案比正则替换HTML更安全，不会因为HTML结构格式变化出现匹配错误的问题

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