Javascript JQuery查找嵌套元素上不带选择器的文本节点仅适用于.contents（）和filter（）

请帮助我理解为什么会发生这种情况

（更新）TL；博士： 当使用带not的查找（嵌套元素）选择器时，嵌套元素的文本将被包含，但当使用带not的查找（嵌套元素）+内容+过滤器（文本节点）时，嵌套元素的文本将被排除

我想从页面中获取文本，但要排除某些元素。 为了简单起见，我只排除了

元素（和子元素），但是当我使用

text（）

时，我还得到了排除元素中的文本。 当我使用

contents（）

过滤结果以仅包括文本节点时，只有当not选择器不从排除的元素返回文本时，才会“工作”。请参阅下面的图片和使用的代码：

为什么没有使用

contents（）

，它就不能工作

谢谢

为方便起见：

我测试的URL是

提供排除元素文本的代码：

$('body').find(':not(p, p *)').text()

提供所需文本的代码（排除元素的文本不存在）：

这是URL中的HTML部分。正如您所看到的，这里有一个

元素，如前所述，我想从这个HTML中获取文本，但要排除一些元素（选择p是为了简单，在生产中会有更多的规则）

HTML 5
语义与可及性：标题结构
您对规范了解得越多，就越会意识到有更多的正确答案
实现正确的语义HTML标记的方法比错误的方法要好。从网络可访问性的角度思考可以提供方向

尝试使用

.clone（）

，

.remove（）

，

.text（）

var filtered=$（.col-lg-12”）.clone（）；
filtered.find（“p”）.remove（）；
console.log（filtered.text（））

HTML 5
语义与可及性：标题结构
您越了解规范，就越会意识到有更多正确的方法来实现正确的语义HTML标记，而不是错误的。从网络可访问性的角度思考可以提供方向

请添加您的HTML代码。可以包括实际的

HTML

文本，

js

在问题中尝试过吗？无法清楚地“看到”图像的文本，这里是“好的，已经添加到上面的问题中了。”？哪里问题中没有出现

html

？什么是需求？@mrgoos如果您在控制台中检查返回

$（'body'）。查找（':not（p，p*））。contents（）

您将看到

：not（）

并没有排除p元素，因为它是DIV元素的后代。这就是您在filter（）方法中所做的，该方法排除了P元素的文本。也就是说，您可以使用：

$（'body'）.clone（）.find（'p'）.remove（）.end（）.text（）.trim（）

@mrgoos我没有太多时间进一步检查发生了什么，但现在我明白您的意思了。这确实让人困惑……谢谢，但正如我在帖子的评论中所写的，我知道其他方法可能会产生相同的需求，这不是问题所在。我想知道为什么通过使用contents（）+过滤器和text（）-not选择器工作，但通过使用find only和then text（）=>它不工作。@mrgoos仍然没有跟上。可以创建两个版本的JSFIDLE来演示吗？要点是，当使用带not的查找（嵌套元素）选择器时，嵌套元素的文本将被包含，但当使用带not的查找（嵌套元素）+内容+过滤器（文本节点）时，嵌套元素的文本将被排除。你明白了吗？

$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()

<div class="col-lg-12">
                    <header id="header" role="banner" class="jumbotron">
                        <h1>
                            <img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
                            <i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
                            <span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
                        </h1>
                        <p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right 
                        ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
                    </header>
                </div>