突出显示不同html标记内的文本

Question

我想强调 elvis presley 。

<div id="test">
    <p>elvis</p>
    <p id="tag1">my name is elvis</p>
    <p id="tag2">presley</p>
</div>

Answer 1

使用js你可以试试这个：

<强> JS

var elvis = document.getElementsByTagName('p')[0];
var presley = document.getElementById("tag2")
elvis.style.color = "blue";
presley.style.color = "blue";

fiddle

Answer 2

jQuery方法

假设您始终需要tag1和tag2的最后一句话。

<强> Fiddle

---

<强> JS

这会找到tag1和tag2中的最后一个字，然后在span类

中添加.highlight

$("#tag1,#tag2").html(function(index, old) {
    return old.replace(/(\b\w+)$/, '<span class="highlight">$1</span>');
});

<强> CSS

.highlight {
    background:yellow;
}

---

使用这个JS作为灵感，可以很容易地操作文本。

Answer 3

您可以在此处查看演示http://jsfiddle.net/5L4kW/1/

$("document").ready(function(){
highlightText('elvis');
highlightText('presley');
})    
function highlightText(val)
{
var src_str = $('div').html();
var term = val;
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*    <\/mark>)/,"$1</mark>$2<mark>$4");
$('div').html(src_str);
}