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() 函数来查找所有出现的单词并将其替换为包含在 span 中的单词。

<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') 就足够具体了（取决于你的代码）

Answer 2

您可以尝试使用jQuery Highlight Plugin。

那里的例子：

HTML：

<input onkeyup="setNewSearch(this);" />  
<h1>Search results for "<span id="search"></span>"</h1>  
<!-- text -->  

Javascript：

function setNewSearch(input){
    var value = $(input).val();
    $("#search").html(value);
    $("body").unhighlight();
    $("body").highlight(value);
}