我试图突出显示正文中的所有匹配词,而不是任何 html 标记中的词。例如,给定的关键字是“para”。这是段落:
<p class="para"> Example of paragraph. Lorem ipsum dolor sit amet. </p>
导致:
<p class="para">
Example of <strong>para</strong>graph. Lorem ipsum dolor sit amet.
</p>
我知道这可以通过 JavaScript 的 replace()
实现,但我对正则表达式知之甚少。
最佳答案
演示:http://jsfiddle.net/crgTU/7/
highlightWord(document.body,'para');
function highlightWord(root,word){
textNodesUnder(root).forEach(highlightWords);
function textNodesUnder(root){
var n,a=[],w=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false);
while(n=w.nextNode()) a.push(n);
return a;
}
function highlightWords(n){
for (var i; (i=n.nodeValue.indexOf(word,i)) > -1; n=after){
var after = n.splitText(i+word.length);
var highlighted = n.splitText(i);
var span = document.createElement('span');
span.className = 'highlighted';
span.appendChild(highlighted);
after.parentNode.insertBefore(span,after);
}
}
}
你也可以考虑调用类似...
function removeHighlights(root){
[].forEach.call(root.querySelectorAll('span.highlighted'),function(el){
el.parentNode.replaceChild(el.firstChild,el);
});
}
…在您寻找新的亮点之前(从 DOM 中删除旧的亮点)。
关于javascript - 突出显示 HTML 文本中的单词(但不是标记),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10729983/