Javascript 在 HTML 中搜索关键字，用 em 标签包围它们

Question

我正在寻找一种方法来搜索 HTML 并用 <em> 包围关键字标签。我想搜索定期出现在一系列页面上的单词列表。

例如。 : 搜索 [foo, bar]

之前的html:

....
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur FOO adipiscing elit</li>
<li>Ut at convallis nisl BAR</li>
....

之后的 html:

....
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur <em>FOO</em> adipiscing elit</li>
<li>Ut at convallis nisl <em>BAR</em></li>
....

我正在搜索的文本在加载后将是静态的，如果有帮助，它将始终位于列表标记中，并且可以在 javascript 中定义关键字，所以我认为答案不应该太长很难找到。我在这里找到了几个类似的主题，但没有一个与我正在尝试的完全相同，而且通常太复杂而无法用我有限的技能来改变。

目标是将脚本添加到一系列页面以避免手动编码所有强调标记，然后使用 CSS 设置标记样式。

任何帮助或类似查询的链接都将不胜感激!

Answer 1

请参阅下面的请求实现:

// Keys
var keys = ["foo", "bar"];

// Create regular expression for a global and dynamic search and replace
var pattern = [];
for (var i=0; i<keys.length; i++) {
    // Create RegExp. This section is needed to deal with special chars
    pattern.push(keys[i].replace(/([[^$.|?*+(){}])/g, "\\$1"));
}
pattern = "\\b(" + pattern.join("|") + ")\\b";
pattern = new RegExp(pattern, "g"); //Replace g by gi for case-insensitivity

var li = document.getElementsByTagName("li");
for (var i=0, l=li.length; i<l; i++) {
    li[i].innerHTML = li[i].innerHTML.replace(pattern, "<em>$1</em>");
}

使用了正则表达式，因此键之间不会相互干扰。如果使用没有 RegExp 的正常搜索和替换，则以下键将相互干扰:"cowsayMoo" "cowsay" .如果没有 RegExp，结果将是:<em><em>cowsay</em>Moo</em> .然而，由于我们使用了 RegExp，这个问题就解决了。

链接:

• MDN: Regular Expressions