如何在body加载完成前获取其innerHTML以提前替换指定文本

原思路不可行的原因 #

浏览器对HTML采用自上而下的流式解析规则，当你写在body中间的script标签执行时，script标签之后的HTML内容还没有被解析成DOM节点，此时调用document.body.innerHTML只能获取到当前已经解析完成的部分，不可能拿到还未解析的完整body内容。

针对「提前替换指定文本避免用户看到原内容」的需求，有两种成熟实现方案： #

• 方案1：用MutationObserver监听DOM解析过程，实时替换匹配文本 #

  这个方案不需要等整个body加载完成，节点一被解析到就立即做替换，完全不会出现原文本闪现的问题，代码可以直接放在head标签里提前执行：

  // 这段代码建议放在<head>内执行
  const replaceText = (node, targetText, replaceText) => {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replaceAll(targetText, replaceText);
      return;
    }
    // 跳过script、style等不需要替换的标签
    if (['SCRIPT', 'STYLE', 'IFRAME', 'NOSCRIPT'].includes(node.tagName)) return;
    // 遍历子节点做替换
    node.childNodes.forEach(child => replaceText(child, targetText, replaceText));
  };
  
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        // 把你要替换的目标文本和替换后的内容填到下面的参数里
        replaceText(node, '要匹配的文本', '替换后的文本');
      });
    });
  });
  
  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  });
  
  // 等整个文档解析完成后断开监听，避免额外性能消耗
  document.addEventListener('DOMContentLoaded', () => {
    observer.disconnect();
  });
  

• 方案2：通过innerHTML重写直接拦截整页内容 #

  如果你的场景是静态HTML页面，没有复杂的前置脚本依赖，可以在head最开头插入脚本，直接对整页HTML做替换：

  // 这段代码必须放在<head>的最顶部，所有其他内容之前执行
  document.documentElement.innerHTML = document.documentElement.innerHTML.replaceAll('要匹配的文本', '替换后的文本');
  

  注意：这个方案如果用在存在动态DOM依赖的页面，可能会导致原有脚本执行异常，优先选择方案1。

内容的提问来源于stack exchange，提问作者איתן רבינוביץ