如何获得只有<p>标签文本，包括<span>标签</span></p>

Question

<p class="aaa"> aaa <span class="bbb"> bbb </span> </p>

我只想得到文本'aaa'

但是document.querySelector('p.aaa').innerText --> 'aaabbb'

我如何才能只发短信'aaa'？

Answer 1

使用childNodes和textContent并使用trim()仅获取p的文本。

运行下面的代码段。

 let text = document.querySelector('.aaa').childNodes[0].textContent.trim() console.log(text) ///aaa

 <p class="aaa"> aaa <span class="bbb"> bbb </span> </p>

Answer 2

此 function 将从所选元素中排除任何子 HTML 元素的内容。 它还将考虑子元素之前和之后的文本值。

 function getText(selector) { return Array.from(document.querySelector(selector).childNodes).reduce((text, node) => text + (node.wholeText || ''), ''); } console.log(getText('p.aaa'));

 <p class="aaa"> aaa <span class="bbb"> bbb </span> ccc </p>

Answer 3

document.querySelector('p.aaa').firstChild

将按原样返回您要求的文本。 然后，如果需要删除您可能不需要的额外空格，您可以trim() 。

但我也会检查该值是否是简单文本，例如“aaa”或标签，以防您可能有其他元素满足选择器但其第一个子元素可能是 html 元素（标签）而不是简单文本。

Answer 4

你可以使用： let text = document.querySelector('.aaa').childNodes[0].textContent.trim()