突出顯示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

你可以寫你自己的方法，包裝文字，但我敢肯定，這將是一個更快的解決方案。