使用javascript突出顯示文本

Question

我正在嘗試使用使用javascript的文本突出顯示選項。我知道如何找到字符串的開始位置，如何使它突出顯示。 我的代碼看起來像

<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>

和我用過的JavaScript

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

這將提醒字符串的開始位置。

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類中的相同字符串替換“ entity”字符串的第一次出現。

我了解你的問題對嗎？

-----------------------更新-------------------------

如果要突出顯示所有出現的事件，請使用正則表達式進行修改：

更新的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

只需將您的yourDesireString替換為<span class='highlight'>yourDesireString</span> 。

span.highlight {
     background-color: yellow;
}