JavaScript网页关键字高亮实现

"该文档提供了一段用于在网页中实现关键字高亮的JavaScript代码，主要目的是使用户能够快速识别和突出显示网页中的特定关键字。代码适用于多种浏览器环境，支持多种关键字和自定义颜色。" 在网页开发中，关键字高亮是一项常见的需求，尤其在搜索结果展示、代码高亮或者文本阅读器等场景中。这段JavaScript代码正是为了实现这样的功能。它通过遍历和处理网页文本，找到并替换关键字，使其以特定颜色显示，从而提高用户的阅读体验。 代码首先定义了一个数组`keys`，其中包含了多个关键字及其对应的URL模式和高亮颜色。例如，数组中的第一个元素`[脚本, https://.jb51.net, #ff0000]`表示所有包含"脚本"关键字且URL中包含"jb51.net"的部分将以红色(#ff0000)高亮。 接着，代码根据浏览器支持的API选择创建`Range`对象的方法。`document.createRange()`用于现代浏览器，而`document.body.createTextRange()`则是针对IE等较旧的浏览器。`Range`对象允许我们操作文档中的文本范围，如查找和替换内容。 然后，通过循环遍历`keys`数组，对每个关键字执行以下操作： 1. 使用`findText`方法（如果浏览器支持）查找关键字。`range.collapse(true)`将光标设置在文档开头，`range.moveToBookmark(bookmark)`恢复之前保存的书签位置。 2. 当找到关键字时，使用`fontcolor(key[2])`将关键字颜色设置为数组中指定的颜色，然后用`pasteHTML`替换原始文本。 3. 如果浏览器不支持`findText`，则使用`window.find`方法查找关键字。找到关键字后，创建一个新的`SPAN`元素，设置其颜色为关键字颜色，然后使用`surroundContents`将关键字包裹在新元素中。 此外，文档还提到了其他与关键字高亮相关的JavaScript实现，例如使用`replace`方法结合正则表达式，以及在AngularJS框架中的实现方法，展示了在不同场景下关键字高亮的实现策略。 这段JavaScript代码提供了一种通用且兼容性良好的方法来实现网页关键字高亮，开发者可以根据自己的需求调整关键字数组和颜色，以满足不同应用场景的需求。