javascript - 突出显示 HTML 文件中给定单词列表的最佳算法

Question

我有一些 HTML 文件，我无法控制这些文件。因此我无法更改它们的结构或标记。

对于这些 HTML 文件中的每一个，都会根据另一种算法找到一个单词列表。这些词应该在 HTML 文本中突出显示。例如，如果 HTML 标记是:

<p>
Monkeys are going to die soon, if we don't stop killing them. 
So, we have to try hard to persuade hunters not to hunt monkeys. 
Monkeys are very intelligent, and they should survive. 
In fact, they deserve to survive.
</p>

单词列表是:

are, we, monkey

结果应该是这样的:

<p>
    <span class='highlight'>Monkeys</span> 
    <span class='highlight'>are</span> 
going to die soon, if 
    <span class='highlight'>we</span> 
don't stop killing them. 
So, 
    <span class='highlight'>we</span> 
have to try hard to persuade hunters 
not to hunt 
    <span class='highlight'>monkeys</span>
. They 
    <span class='highlight'>are</span> 
very intelligent, and they should survive. 
In fact, they deserve to survive.
</p>

突出显示算法应该:

1. 不区分大小写
2. 用 JavaScript 编写(这发生在浏览器中)(欢迎使用 jQuery)
3. 要快(适用于将近 800 页的给定书籍的正文)
4. 不显示浏览器著名的“停止脚本”对话框
5. 适用于脏 HTML 文件(比如支持无效的 HTML 标记，例如未闭合的

   元素)(其中一些文件是 MS Word 的 HTML 导出，我想你明白我的意思了!!! )

6. 应保留原始 HTML 标记(不删除标记，除了将预期的单词包装在元素内外，不更改标记，不更改嵌套。除了突出显示的单词外，编辑前后 HTML 应该看起来相同)

到目前为止我做了什么:

1. 我在数组中获取 JavaScript 中的单词列表，如 ["are", "we", "monkey"]
2. 我尝试在浏览器中选择文本节点(现在有问题)
3. 我遍历每个文本节点，对于每个文本节点，我遍历列表中的每个单词并尝试找到它并将其包装在一个元素中

请注意，您可以在线观看here (用户名:demo@phis.ir，密码:demo)。也可以在页面源代码的末尾看到当前脚本。

Answer 1

将您的单词与 | 连接成一个字符串，然后将字符串解释为正则表达式，然后用高亮标记包围的完整匹配替换出现的地方。