仅选择直接包含文本的元素[重复]答案

【问题标题】：Select only elements who directly contain text [duplicate]仅选择直接包含文本的元素[重复]
【发布时间】：2013-08-06 18:53:49
【问题描述】：

所以我有这样的事情：

<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 selector，我可以搜索一个关键字，但它会返回父和子。

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

Stackoverflow 有用地建议 this link 作为之前的尝试，但它似乎非常笨拙，因为它要爬取所有 dom 节点并且需要大量不明确的代码。

【问题讨论】：

将此标记为您引用的问题的欺骗；虽然我很欣赏你对那里的答案不满意，但由于你给出的原因，它仍然是同一个问题，你没有给出其他问题中没有给出的任何具体要求。如果/一旦您能够这样做，适当的行动方案可能是对该问题给予赏金。不过，我仍然对此感到好奇并研究它。
“它看起来非常笨拙，因为它正在爬取所有 dom 节点”。无论如何，这就是你必须做的。您也可以使用$('*') 一次选择所有节点，然后对其进行迭代，但无论如何，您必须遍历所有节点。
可能你需要一个更高级的选择器，比如jQuery XPath plugin。如果您决定使用 xpath，也许this answer 也会对您有所帮助。

标签： jquery

【解决方案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')...

【讨论】：

当然比 bobince 的解决方案更具可读性和简洁性。 +1。不过，不确定性能将如何比较，这可能很重要。
刚刚用您展示的示例进行了测试jsfiddle.net/85qEh/3 看起来 Jquery 为您删除了结果集。
进行了快速性能测试，如果您扩展其他代码以查找 div、span 和仅 div 的标签，我的代码比提供的其他代码更快。 just div 方法是最快的。
您可以将style 添加到find(":not(iframe, script, style)")。我在那里也有一些成功。
不区分大小写的解决方案： 使用.toLowercase() 匹配文本不区分大小写。我这样扩充了代码：&& this.textContent.toLowerCase().indexOf(text.toLowerCase()) > -1

【解决方案2】：

上面提到的另一个问题中提供的解决方案显然是一个不被高度重视的解决方案，就是这样做：

$("div:contains('searching')").filter(function() {
    return (
    $(this).clone() //clone the element
    .children() //select all the children
    .remove() //remove all the children
    .end() //again go back to selected element
    .filter(":contains('searching')").length > 0)
}).css('border', 'solid 1px black');

我要补充一点，它比编写一个庞大的东西来爬取所有 DOM 节点更不笨重，而且在狭窄范围内确实应该影响更少的地方。

如果其他人有更好的想法，我肯定很感兴趣。

http://jsfiddle.net/TT7dR/42/

【讨论】：

它很笨拙且效率低下，但看起来它会起作用（并且 cmets 清楚地解释了它背后的逻辑）。暂定 +1，但肯定有更短更简洁的方法吗？
但是这里其他的 div 也有边框。
JSFiddle 失败。我不小心使用了上一个链接，该链接包含不良标记并且与问题没有直接关系。我更新了它，现在它提供了更好的洞察力。
可悲的是，这就是我处理这个问题的方式。不过，我的感觉和你一样，@RandallB，必须有更好的方法......
如果答案来自另一个问题，那么为什么要复制它？如果可以，只需提供评论并将问题标记为重复。我希望你至少支持另一个答案。

【解决方案3】：

在 JS 中试试这个

$('div >:contains("text Im searching for")')

【讨论】：

反对票不是我的，但请注意，这是链接问题中可用的“笨拙”解决方案的一部分。
更重要的是，它不起作用，正如 cmets 在另一个问题中所解释的那样。 -1
其他人发现的问题：jsfiddle.net/DM4vz/2如果在此上面添加父级，搜索会失败。