How to get only <p> tag text including <span> tag

Question

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

I want to get only text 'aaa'

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

How do I get to text only 'aaa'?

Answer 1

Use childNodes and textContent and using trim() to get the text of p only.

Run snippet below.

 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

This function will exclude the content for any child HTML elements from the selected element. It will also account for text values before and after child elements.

 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

Will return the text you are asking for as is. Then you can trim() if need to remove extra spaces you may not need.

But I would also check to see if the value is simple text such as 'aaa' or a tag in case you might have other elements that satisfies the selector but whose first child could be an html element(tag) instead of simple text.

Answer 4

you can use: let text = document.querySelector('.aaa').childNodes[0].textContent.trim()