JavaScript: Get textContent from element (with nested children) ignoring specific child

Question

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!

Related: https://stackoverflow.com/questions/9340449/is-there-a-way-to-get-innertext-of-only-the-top-element-and-ignore-the-child-el, https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags — T.J. Crowder, Sep 03 '22 at 11:57

score 1 · Accepted Answer · answered Sep 03 '22 at 12:06

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>

JavaScript: Get textContent from element (with nested children) ignoring specific child

1 Answers1