如何獲得只有<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()