javascript - JQuery 在嵌套元素上查找不带选择器的文本节点仅适用于 .contents() 和 filter()

Question

请帮助我理解为什么会这样。

(更新)长话短说:当使用带有 not(NESTED_ELEMENT) 选择器的查找时，嵌套元素的文本将被包括在内，但当使用带有 not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE) 的查找时，嵌套元素的文本将被排除。

我想从页面中获取文本但要排除一些元素。为简单起见，我排除了 <p>只有元素(和后代)但是当我使用 text() ，我也在排除元素中获取文本。当我使用 contents() 过滤结果时仅包含文本节点，只有这样 not 选择器才能通过不从排除的元素返回文本来“工作”。请参阅下图以及使用的代码:

为什么不使用 contents() 就不能工作？

谢谢。

为了您的方便:

我测试的 URL 是 this one .

给我排除元素文本的代码:

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

给我所需文本的代码(排除元素的文本不存在):

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

这是 URL 中的 HTML 部分。如您所见，有一个 <p>那里的元素和如前所述，我想从此 HTML 中获取文本，但要排除一些元素(为简单起见选择 p，生产中会有更多规则)。

<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>

Answer 1

尝试使用 .clone() , .remove() , .text()

var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();

console.log(filtered.text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<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>