javascript - 获取 HTML 元素内的文本，将其存储在变量中并将类添加到 DOM 中的所有其他匹配项

Question

我正在努力实现这一目标:

我有这个代码:

<h1>Search results for "<span>photoshop</span>"</h1>

而且，我在同一个页面中有另一个这样的代码:

<p>Photoshop is the best photo editor in the world</p>

使用 jQuery 或纯 JavaScript，我想获取范围内动态变化的单词，将其存储在变量中，并使用“突出显示”类包装文档中的每个其他“photoshop”单词。我该怎么做？

Answer 1

您可以使用正则表达式和 jQuery 的 html() 函数来查找所有出现的单词并将其替换为包含在跨度中的单词。

<h1>Search results for "<span id="search">Photoshop</span>"</h1>

var theWord = $('#search').text(),
    patt=new RegExp('\\b(' + theWord + ')\\b', 'gi');

$('body').html($('body').html().replace(patt,'<span class="highlight">$1</span>'));

(如果您希望它是全局的且不区分大小写，请使用“gi”)

http://jsfiddle.net/EBWQX/2/

如果你不能给 span 一个 id，也许选择 $('h1 span') 就足够具体了(取决于你的代码)