jQuery匹配文本高亮,只能单一标签内文本高亮。想跨多个标签应该如何解决呢?
<html>
<head>
<meta charset="utf-8">
<title>搜索文本</title>
<script src="jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="highlight.js" type="text/javascript"></script>
</head>
<body>
<style>
.highlight {background-color: #ffff00;color:#ff0000;}
</style>
<b>待匹配文本:</b><div id="font">主人下马客在船,举酒欲饮无管弦</div>
<br>
<b>正文部分:</b>
<br>
<div id="contentid">
<div>
<p><span>浔阳江头夜<strong>送客</strong>,</span><span></span><span>枫叶荻花秋瑟瑟</span></p>
</div>
<div>
<p><span>主人下马客在船,</span><span>举酒欲饮无<strong>管弦</strong></span></p>
</div>
<div>
<p><span>醉不成欢惨<strong>将别</strong>,</span><span>别时茫茫江浸月</span></p>
</div>
<div>
<p><span>忽闻水上琵琶声,</span><span>主人忘归<strong>客不发</strong></span></p>
</div>
<div>
<p><span>寻声暗问弹者谁,</span><span>琵琶声停<strong>欲语迟</strong></span></p>
</div>
<div>
<p><span>移船相近邀相见,</span><span>添酒回灯重开宴</span></p>
</div>
<div>
<p><span>千呼万唤<strong>始出来</strong>,</span><span>犹抱琵琶半遮面</span></p>
</div>
<div>
<p><span>转轴拨弦三两声,</span><span>未成曲调先有情</span></p>
</div>
<div>
<p><span>弦弦掩抑<strong>声声思</strong>,</span><span>似诉平生不得志</span></p>
</div>
<div>
<p><span>低眉信手<strong>续续弹</strong>,</span><span>说尽心中无限事</span></p>
</div>
</div>
<br>
<button id="bbt">测试匹配高亮</button>
<script>
$('#bbt').click(function(){
var hight = $('#font').text();
if(hight != undefined && hight.length > 0){
var maincontent = $('#contentid');
maincontent.removeHighlight();
maincontent.highlight(hight);
console.log(hight);
} else {
console.log("匹配文本为空");
}
});
</script>
</body>
</html>