使用Javascript在HTML页面中查找关键字的快速算法

Question

我有一个JS专业词典，可以在页面上找到某些关键词，并为它们添加解释性工具提示。现在我正在使用RegEx来查找关键字，但我怀疑它会很快变慢，当我的字典变大时。我将字典条目存储在一个数组中，所以我认为这也可以改进。我的网站语言是越南语，我的关键字都是英文。

任何提高性能的想法都将受到高度赞赏。感谢。

Answer 1

您可以处理字典服务器端（根据关键字检查输出），然后为每个匹配的项添加处理程序（类或其他html元素以标识要使用的定义..）。然后使用javascript将每个元素绑定到您的字典。通过这种方式，您的服务器正在进行繁重的工作。

1）服务器加载您的字典文件并与您要输出的文本进行比较

2）如果找到匹配，则添加

<span class="definition">yourword</span>

3）通用的javascript事件处理程序（这是用jQuery编写的，当然你也可以随意使用它）

$('.definition').mouseOver(function(){
    var keyword = $(this).html();
    //load your definition using the keyword...
})

Answer 2

请参阅我对相关问题的回答：javascript: find strings in dom and emphasize it

另请参阅该问题的已接受答案，这是一个jQuery插件，可以满足您的需求。

使用regexp执行此操作的问题不是速度，因为有些人声称DOM解析方法实际上可能更慢。问题是避免疯狂的角落，如：你不想替换恰好包含关键字的javascript字符串，你不想替换恰好包含关键字等的css类名或id。

根据我的经验，DOM方式足够快。事实上，我的网站上有一个包含100多个关键字的列表，它可以在不到半秒的时间内安装工具提示（当然比我的眼睛看得快）。