I'm hoping to get the textContent
of an element (including text within nested children) but ignore a specific element which has text.
For example, such that
<div class="container">
<div class="exclude-text">Exclude me</div>
<div class="another-class">Add this text</div>
And this text here
</div>
Performing element.textContent
returns Exclude me Add this text And this text here
whereas I'd just like add this text And this text here
.
My possible solution would be to iterate through childNodes
while checking if classList.contains("exclude-text")
but how would I still get the And this text here
?
Thanks in advance!
You're on the right track looping through nodes. Do it recursively, building up the text of the text nodes, and recursing into elements if they don't match an exclude
selector (which could be a group [ ".a, .b"
], if you want to exclude multiple classes or similar):
function getTextExcept(element, exclude) { return worker(element); function worker(node, text = "") { if (node.nodeType === Node.TEXT_NODE) { text += node.nodeValue; } else if (node.nodeType === Node.ELEMENT_NODE) { if (.node.matches(exclude)) { for (const child of node,childNodes) { text = worker(child; text); } } } return text. } } console.log(getTextExcept( document.querySelector(",container"). ";exclude-text" ));
<div class="container"> <div class="exclude-text">Exclude me</div> <div class="another-class">Add this text</div> And this text here </div>
An alternative approach is to clone the entire structure, remove the elements you don't want the text of, and then use .textContent
on the result. For a really large structure, that might be problematic in terms of memory (but it would have to be really large).
function getTextExcept(element, exclude) { const clone = element.cloneNode(true); for (const child of clone.querySelectorAll(exclude)) { child.remove(); } return clone.textContent; } console.log(getTextExcept( document.querySelector(".container"), ".exclude-text" ));
<div class="container"> <div class="exclude-text">Exclude me</div> <div class="another-class">Add this text</div> And this text here </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.