...`）全部提取出来，用 `[[TAG_0]]` 这种不会干扰文本的占位符替换掉。这样剩下的就全是纯文本了，可以放心进行关键词替换。完事后再把占位符还原回去。
**需要注意一点**：第二种方法依赖正则的准确性。如果你碰上个奇葩的HTML，比如 `
`，属性值里自己就带了尖括号，那你的正则很可能就疯掉。所以，在生产环境里，老老实实用第一种DOM遍历法是最稳妥的选择。
### `mark` 标签不是万能的，得看场景
`` 这个标签在语义上代表“高亮、标记”，浏览器默认会给它加上黄色背景。但它本身不能解决所有问题：
* **嵌套问题**：如果原文里已经有个 `` 标签了，你再用字符串替换往里塞一个新的 ``，那就会造成标签嵌套混乱，出现 `...` 这样的错误结构。
* **样式干扰**：父级的 `font-size`、`line-height`，或者一个诡异的 `white-space` 属性，都可能让高亮的块出现错位或换行异常，看着就很难受。
* **兼容性**：移动端Safari对 `` 默认样式的支持比较弱，最好在CSS里明确声明一下 `mark { background: #ff0; color: #000; }`。如果要兼容万恶的IE，那就得用 `polyfill` 或者直接降级成 `` 来模拟。
### 关键词本身要预处理
用户输入的关键词，可不是拿来就能用的。它得先过一遍预处理：
* **转义正则特殊字符**：用户搜“a.b”，你直接拿它当正则用，就会被解释成“a任意字符b”，结果会匹配到很多不该匹配的东西。必须用 `RegExp.escape()` 或手写个函数转义一下。
* **处理文本差异**：用 `textContent` 或 `innerText` 提取原始文本时，空格、换行、全角/半角字符（比如中文空格“ ”）都可能造成匹配失败。比如用户搜“测试”，页面里却是“测 试”，那就找不到了。
* **大小写敏感性**：你可以用 `i` 标志让匹配不区分大小写，但必须清楚，DOM文本节点里存的是原始大小写，不要想当然地认为它们一定和用户输入一致。
**最后，也是最容易踩的一个坑**：高亮操作本身就是对DOM的修改。如果你后续要对同一个区域再次调用高亮函数，之前创建的 `` 标签会被当作普通的文本内容再次被包裹。结果就是，一个词被高亮了好几层，既难看又浪费性能。所以，在执行新的高亮前，必须先清除掉旧的 ``，或者记录下已经处理过的范围，避免重复渲染。
`，属性值里自己就带了尖括号，那你的正则很可能就疯掉。所以，在生产环境里，老老实实用第一种DOM遍历法是最稳妥的选择。
### `mark` 标签不是万能的，得看场景
`` 这个标签在语义上代表“高亮、标记”，浏览器默认会给它加上黄色背景。但它本身不能解决所有问题：
* **嵌套问题**：如果原文里已经有个 `` 标签了，你再用字符串替换往里塞一个新的 ``，那就会造成标签嵌套混乱，出现 `...` 这样的错误结构。
* **样式干扰**：父级的 `font-size`、`line-height`，或者一个诡异的 `white-space` 属性，都可能让高亮的块出现错位或换行异常，看着就很难受。
* **兼容性**：移动端Safari对 `` 默认样式的支持比较弱，最好在CSS里明确声明一下 `mark { background: #ff0; color: #000; }`。如果要兼容万恶的IE，那就得用 `polyfill` 或者直接降级成 `` 来模拟。
### 关键词本身要预处理
用户输入的关键词，可不是拿来就能用的。它得先过一遍预处理：
* **转义正则特殊字符**：用户搜“a.b”，你直接拿它当正则用，就会被解释成“a任意字符b”，结果会匹配到很多不该匹配的东西。必须用 `RegExp.escape()` 或手写个函数转义一下。
* **处理文本差异**：用 `textContent` 或 `innerText` 提取原始文本时，空格、换行、全角/半角字符（比如中文空格“ ”）都可能造成匹配失败。比如用户搜“测试”，页面里却是“测 试”，那就找不到了。
* **大小写敏感性**：你可以用 `i` 标志让匹配不区分大小写，但必须清楚，DOM文本节点里存的是原始大小写，不要想当然地认为它们一定和用户输入一致。
**最后，也是最容易踩的一个坑**：高亮操作本身就是对DOM的修改。如果你后续要对同一个区域再次调用高亮函数，之前创建的 `` 标签会被当作普通的文本内容再次被包裹。结果就是，一个词被高亮了好几层，既难看又浪费性能。所以，在执行新的高亮前，必须先清除掉旧的 ``，或者记录下已经处理过的范围，避免重复渲染。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
