javascript - jQuery 函数 .text() 的错误工作

Question

我试图通过使用 $('.container').text() 从 HTML 中获取所有文本而不带任何标签。我得到的不是清晰的文本，而是包含重复部分的文本。

这是我的 HTML 代码:

<div class="v highlighted" id="4">
    <span class="vn" id="4">4</span>
    <span class="p">Text-0</span><br>
    <span class="p">
        <span class="wj">
            Text-1
            <span class="w">Text-2</span>
            Text-3
        </span>
    </span><br>
</div>

<script>
    console.log($(".highlighted :not(.vn)").text());
</script>

在控制台中我看到了这个结果:

Text-0Text-1Text-2Text-3Text-1Text-2Text-3Text-2

有人知道为什么会这样吗？

Answer 1

看什么.highlighted :not(.vn)匹配。

它匹配:

• <span class="p">Text-0</span>
• <br>
• <span class="p"><span class="wj">Text-1<span class="w">Text-2</span>Text-3</span></span>
• <span class="wj">Text-1<span class="w">Text-2</span>Text-3</span>
• <span class="w">Text-2</span>
• <br>

由于您有一些文本包含在一个跨度中，该跨度又包含在另一个跨度中，并且两个这些跨度都与选择器匹配，因此您得到了外部跨度的内容和内部跨度的(相同)内容。

您可能想在选择器中使用子组合器 ( > ) 而不是后代组合器 ( )。

.highlighted > :not(.vn)