jquery - 突出显示搜索项(仅选择叶节点)

Question

我想突出显示页面上的搜索词，但不要弄乱任何 HTML 标签。我在想这样的事情:

$('.searchResult *').each(function() {
    $(this.html($(this).html().replace(new RegExp('(term)', 'gi'), '<span class="highlight">$1</span>'));
)};

但是，$('.searchResult *').each匹配所有元素，而不仅仅是叶节点。换句话说，某些匹配的元素内部包含 HTML。所以我有几个问题:

1. 如何只匹配叶节点？
2. 是否有一些内置的 jQuery RegEx 函数可以简化事情？类似:$(this).wrap('term', $('<span />', { 'class': 'highlight' }))
3. 有没有办法进行简单的字符串替换而不是正则表达式？
4. 还有其他更好/更快的方法吗？

非常感谢!

Answer 1

[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);
  });
}