请求使用DOM替换HTML代码中的模板变量内容

嘿，我来给你分享个用DOM操作替换这些{$变量名}格式模板变量的靠谱方案，分步骤来，清晰好上手：

核心思路 #

• 遍历DOM树里的所有节点，跳过script、style这类不需要处理的标签
• 对纯文本节点，匹配{$变量名}格式的内容，替换成对应数据
• 对于像{$member}这种本身是HTML片段的变量，直接操作元素的innerHTML来保留DOM结构

完整代码实现 #

首先准备好你的数据（键要和模板里的变量名一一对应），然后用下面的函数完成替换：

// 准备模板数据，键对应模板中的变量名
const templateData = {
  my_name: "张三",
  member: "<li>会员A</li><li>会员B</li>",
  good_list: "最新商品：XX旗舰手机",
  regdate: "2024-05-20"
};

// 定义模板变量替换函数
function replaceTemplateVariables() {
  // 递归遍历DOM节点的辅助函数
  function traverse(node) {
    // 处理纯文本节点，跳过script和style标签内的文本
    if (node.nodeType === Node.TEXT_NODE 
        && node.parentElement.tagName !== 'SCRIPT' 
        && node.parentElement.tagName !== 'STYLE') {
      // 匹配{$变量名}的正则，全局替换
      const variableRegex = /{\$(\w+)}/g;
      let updatedText = node.textContent;
      // 替换匹配到的变量，没有对应数据则保留原字符串
      updatedText = updatedText.replace(variableRegex, (match, varName) => {
        return templateData[varName] !== undefined ? templateData[varName] : match;
      });
      node.textContent = updatedText;
    } 
    // 处理元素节点，针对需要插入HTML片段的情况
    else if (node.nodeType === Node.ELEMENT_NODE) {
      const variableRegex = /{\$(\w+)}/g;
      // 检查当前元素的innerHTML是否包含模板变量
      if (node.innerHTML.match(variableRegex)) {
        node.innerHTML = node.innerHTML.replace(variableRegex, (match, varName) => {
          return templateData[varName] !== undefined ? templateData[varName] : match;
        });
      }
      // 递归遍历子节点
      for (const child of node.childNodes) {
        traverse(child);
      }
    }
  }

  // 从body开始遍历整个DOM树执行替换
  traverse(document.body);
}

// 页面DOM加载完成后执行替换操作
window.addEventListener('DOMContentLoaded', replaceTemplateVariables);

关键细节说明 #

• 数据匹配：templateData的键必须和模板里的变量名完全一致（比如{$my_name}对应templateData.my_name），这样才能准确替换
• 节点过滤：特意跳过了script和style标签，避免误改脚本或样式代码
• HTML片段处理：像{$member}这种是HTML结构的变量，通过修改元素的innerHTML来渲染成真实的DOM元素，而不是纯文本
• 容错处理：如果模板里的变量在templateData中找不到对应值，会保留原字符串（比如{$undefined_var}不会被替换）

灵活调整 #

如果你只需要替换某个特定容器内的变量，比如只处理.aaa类的div，只需要把traverse(document.body)改成traverse(document.querySelector('.aaa'))即可。

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