突出显示Web元素中的特定文本

Question

我需要将颜色应用于html元素，但仅限于内容的特定部分。

目前我标记每个与被叫matchedOn类，并使用以下的Jquery执行neccessary着色：

$('.matchedOn:contains("' + matchedItem + '")').css({ "color": "#008000", "background-color": "#FFFF00" }); 

matchedItem是从Ajax饲料的变量。好的，所以这项工作的完整条目，所以如果<dd>中显示的文本是<dd>Hello there this is a test string</dd>，并且在上面的示例中匹配项是'this is'，我如何才能将颜色属性仅分配给'this is'？

Answer 1

所有样式处理都需要用标签包装，因此请围绕此文本包装<span class='highlight'>，并在样式表中添加highlight声明。

使用jQuery查找元素后，您需要替换元素内的.html()中的文本，以便将该范围包围在文本中。

var match = $('.matchedOn:contains("' + matchedItem + '")') 
$(match).html($(match).html().replace(matchedItem,"<span class='highlight'>"+matchedItem+"</span>")); 

Answer 2

有一个jQuery插件，这个位于：JavaScript text higlighting jQuery plugin

你可以写你自己的方法，包装文字，但我敢肯定，这将是一个更快的解决方案。