如何使用 JavaScript 安全、精准地替换网页中的指定单词-html教程-PHP中文网

如何使用 JavaScript 安全、精准地替换网页中的指定单词

本文介绍一种安全可靠的 HTML 文本内容替换方案：通过 createTreeWalker 提取纯文本节点，结合 Intl.Segmenter 进行语义化分词，再按规则（如长度、首字母）动态替换单词，避免破坏标签结构、脚本或样式。

本文介绍一种安全可靠的 html 文本内容替换方案：通过 createtreewalker 提取纯文本节点，结合 intl.segmenter 进行语义化分词，再按规则（如长度、首字母）动态替换单词，避免破坏标签结构、脚本或样式。

在网页开发中，直接操作 innerHTML（如 document.body.innerHTML = ...）看似便捷，实则风险极高——它会完全销毁并重建 DOM 树，导致事件监听器丢失、表单状态清空、内联脚本重复执行、<script></script> 和内容被误解析为文本等严重问题。你遇到的“超链接被修改”“JS 脚本被插入页面”正是这种粗暴替换的典型副作用。

✅ 正确做法是：只遍历并修改纯文本节点（Text Nodes），跳过所有 HTML 标签、脚本、样式等内容。核心工具是 Document.createTreeWalker()，它能高效、可控地筛选出符合要求的文本节点：

function get_text_nodes(el) {
  const nodes = [];
  // 排除 script/style 等不应处理的元素
  const rejected_tags = new Set(["SCRIPT", "STYLE", "TEXTAREA", "INPUT", "SELECT"]);
  const walker = document.createTreeWalker(
    el,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: (node) => {
        // 若父节点是禁止标签，或文本为空，则拒绝
        if (rejected_tags.has(node.parentNode.tagName) || !node.textContent.trim()) {
          return NodeFilter.FILTER_REJECT;
        }
        return NodeFilter.FILTER_ACCEPT;
      }
    }
  );
  while (walker.nextNode()) {
    nodes.push(walker.currentNode);
  }
  return nodes;
}

接着，利用 Intl.Segmenter（现代浏览器支持）进行语言感知的单词切分，确保正确处理连字符、撇号、标点等边界情况：

const segmenter = new Intl.Segmenter("en", { granularity: "word" });

为提升性能与可读性，将替换映射构建为哈希表（而非数组索引查找），例如按首字母映射到对应替换词：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

const replacementList = "assignment behind controversial ... zombie".split(" ");
const replacements = Object.fromEntries(
  replacementList.map(word => [word[0].toLowerCase(), word])
);
// 支持大小写：'Apple' → 'assignment'，'Zoo' → 'zombie'

最后，逐个处理文本节点，分词→过滤→替换→更新：

for (const node of get_text_nodes(document.body)) {
  const originalText = node.textContent;
  const words = [...segmenter.segment(originalText)];

  const newText = words.map(({ segment }) => {
    // 规则：长度 ≥ 6 且首字母有对应替换词 → 替换；否则保留原词
    if (segment.length >= 6 && replacements[segment[0].toLowerCase()]) {
      return replacements[segment[0].toLowerCase()];
    }
    return segment;
  }).join("");

  // ✅ 安全替换：仅用新文本创建 Text 节点替换原节点，不触碰 DOM 结构
  node.replaceWith(newText);
}

⚠️ 注意事项：

永远避免 innerHTML = ... 修改整个 body 或容器——这是绝大多数 DOM 损坏的根源；
replaceWith() 是现代标准方法（兼容 Chrome 64+/Firefox 69+/Edge 79+），若需支持旧版 IE，请改用 parentNode.replaceChild(document.createTextNode(text), node)；
对、等用户输入控件，应额外排除（已加入 rejected_tags），防止干扰用户编辑；
Intl.Segmenter 在 Safari 中需 iOS 14.5+/macOS 11.3+，生产环境建议添加降级逻辑（如正则 /[\p{L}']+|[^ \t\n\r\f\v\p{L}']+/gu）；
如需保留原始格式（如换行、多空格），注意 textContent 会压缩空白，此时可考虑遍历 childNodes 并手动处理 Text 类型节点。