突出显示搜索词(仅选择叶节点) [英] Highlight search terms (select only leaf nodes)
本文介绍了突出显示搜索词(仅选择叶节点)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想突出显示页面上的搜索词,但不要弄乱任何HTML标签.我在想类似的东西:
I would like to highlight search terms on a page, but not mess with any HTML tags. I was thinking of something like:
$('.searchResult *').each(function() {
$(this.html($(this).html().replace(new RegExp('(term)', 'gi'), '<span class="highlight">$1</span>'));
)};
但是,$('.searchResult *').each
匹配所有元素,而不仅仅是叶子节点.换句话说,某些匹配的元素内部具有HTML.所以我有几个问题:
However, $('.searchResult *').each
matches all elements, not just leaf nodes. In other words, some of the elements matched have HTML inside them. So I have a few questions:
- 如何只匹配叶子节点?
- 是否有一些内置的jQuery RegEx函数来简化操作?类似于:
$(this).wrap('term', $('<span />', { 'class': 'highlight' }))
- 有没有办法做一个简单的字符串替换而不是RegEx?
- 还有其他更好/更快的方法吗?
- How can I match only leaf nodes?
- Is there some built-in jQuery RegEx function to simplify things? Something like:
$(this).wrap('term', $('<span />', { 'class': 'highlight' }))
- Is there a way to do a simple string replace and not a RegEx?
- Any other better/faster way of doing this?
非常感谢!
推荐答案
[查看实际效果 ]
[See it in action]
// escape by Colin Snover
// Note: if you don't care for (), you can remove it..
RegExp.escape = function(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
function highlight(term, base) {
if (!term) return;
base = base || document.body;
var re = new RegExp("(" + RegExp.escape(term) + ")", "gi"); //... just use term
var replacement = "<span class='highlight'>" + term + "</span>";
$("*", base).contents().each( function(i, el) {
if (el.nodeType === 3) {
var data = el.data;
if (data = data.replace(re, replacement)) {
var wrapper = $("<span>").html(data);
$(el).before(wrapper.contents()).remove();
}
}
});
}
function dehighlight(term, base) {
var text = document.createTextNode(term);
$('span.highlight', base).each(function () {
this.parentNode.replaceChild(text.cloneNode(false), this);
});
}
这篇关于突出显示搜索词(仅选择叶节点)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文