仅选择直接包含文本的元素

Question

所以我有这样的事情:

<div class="main">
  <div class="useless">
    text I don't want.    
  </div>
  <div class="useless">
    text I don't want.    
  </div>
  <div class="narrow">
    text I'm searching for
  </div>
  <div class="useless">
    text I don't want.    
  </div>
  <div class="useless">
    text I don't want.    
  </div>
</div>

使用jQuery的可爱:contains选择器,我可以搜索关键字,但它将返回父级和子级.

我希望它只返回直接包含我正在搜索的单词的元素.

Stackoverflow有用地建议将此链接作为先前的尝试,但它似乎非常笨重,因为它爬行所有dom节点并且需要大量不清楚的代码.

Answer 1

此脚本将查找包含特定文本的所有节点.它还允许您对文本(正则表达式等)进行任何字符串测试.

function getNodesThatContain(text) {
    var textNodes = $(document).find(":not(iframe, script, style)")
      .contents().filter( 
          function() {
           return this.nodeType == 3 
             && this.textContent.indexOf(text) > -1;
    });
    return textNodes.parent();
};

console.log(getNodesThatContain("test"));

这是测试的小提琴:http://jsfiddle.net/85qEh/4/

PS - 为了提高速度,请使用不同的顶级选择器.例如,如果您只需要#container内部,那么您会var textNodes = $('#container')...