使用javascript的文本突出顯示

Question

我想使用JavaScript的文本突出顯示選項。我知道如何找到字符串的開始位置，bt如何使其突出顯示。我的代碼看起來像

<div id="entity">health insurance</div> 
<div id="article">This kind of insurance is meant to supplement health insurance for cancer-care costs. But generally you're better off putting your money toward comprehensive health policies. </div> 

而且我已經用它

$(document).ready(function() 
{ 
var test=document.getElementById('article').innerHTML; 
var variable=document.getElementById('entity').innerHTML; 
alert(test.search(new RegExp(variable, "i"))); 
}); 

這將提醒字符串的開頭現在的位置的JavaScript。

Answer 1

HTML：

<div id="entity">health insurance</div> 
<div id="article">This kind of insurance is meant to supplement health insurance for cancer-care costs. But generally you're better off putting your money toward comprehensive health policies. </div>​ 

CSS：

.highlight { 
    background-color: yellow 
} 

的Javascript：

$(document).ready(function() {​ 
    var $test = $('#article'); 
    var entityText = $('#entity').html(); 
    var highlight = '<span class="highlight">' + entityText + '</span>'; 
    $test.html($test.html().replace(entityText, highlight)); 
} 

演示：http://jsfiddle.net/ehzPQ/2/

所以，我只是用在span類中包裝的相同字符串替換第一次出現的「實體」字符串。

我理解你的問題了嗎？

----------------------- UPDATE --------------------- ----

如果你想突出顯示所有出現修改使用正則表達式：

更新的Javascript：

$(document).ready(function() { 
    var $test = $('#article'); 
    var entityText = $('#entity').html(); 
    var entityRegularExpression = new RegExp("\\b" + entityText + "\\b", "gi"); 
    var highlight = '<span class="highlight">' + entityText + '</span>'; 
    $test.html($test.html().replace(entityRegularExpression, highlight)) 
} 

和更新的演示：http://jsfiddle.net/ehzPQ/3/

Answer 2

只需用<span class='highlight'>yourDesireString</span>之類的東西代替yourDesireString即可。

span.highlight { 
    background-color: yellow; 
}