How to find the last element with certain text in nested html

Question

I'm trying to find an element in a page that does not have id's or classes. The only way is by certain specific text that it's contained in the div. I Found this function but it selects all the parent nodes, not only the inner child. (for obvious reasons because all the nested divs contains that text). How can I modify the function to select ONLY the div who directly have the searched text and excluding the search in children nodes?

Thanks for the help!

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

console.log(contains('div', 'CORRECT-TEXT'));

<div>othertext
  <div>othertext
    <div>othertext
      <div>othertext
         <div>othertext CORRECT-TEXT othertext</div>
      </div>othertext
    </div>othertext
  </div>othertext
</div>othertext

You'll have to iterate [or use XPath](https://stackoverflow.com/questions/37098405/javascript-queryselector-find-div-by-innertext). — Andy, Apr 25 '23 at 22:30

score 2 · Accepted Answer · answered Apr 25 '23 at 23:59

A simpler and more functional approach, see if it helps in solving your problem

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return Array.prototype.some.call(element.childNodes, function(node) {
      return node.nodeType === 3 && RegExp(text).test(node.textContent);
    });
  });
}
console.log(contains('div', 'CORRECT-TEXT'));

<div>othertext
  <div>othertext
    <div>othertext
      <div>othertext
         <div>othertext CORRECT-TEXT othertext</div>
      </div>othertext
    </div>othertext
  </div>othertext
</div>othertext

Kostas Minaidis · Answer 2 · 2023-04-25T22:48:12.610

You'll have to traverse the Text Nodes this way:

const walkTextNodes = (node, filter) => {
    const result = [];
    const execute = node => {
        let child = node.firstChild;
        while (child) {
            switch (child.nodeType) {
                case Node.TEXT_NODE:
                  if (child.textContent.indexOf(filter) > -1 ){
                    result.push(child.parentNode);
                  }
                  break;
                case Node.ELEMENT_NODE:
                    execute(child);
                    break;
            }
            child = child.nextSibling;
        }
    }
    if (node) {
        execute(node);
    }
    return result;
}

const elementsFound = walkTextNodes(rootElement, "CORRECT-TEXT");
console.log( elementsFound[0] );

Once you find a text node containing the text you're looking for, check the parentElement and push it into the result array.

The code needs some testing and depending on your use case, it might require some tweaks, e.g. to return the first element or all the elements found with the keyword, etc. but I thinks it's a good start.

Update: here's a refactoring of the original contains function that produces the same result:

function contains( selector, text ){
  const elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    if (RegExp(text).test(element.firstChild.textContent)) {
      return element;      
    }
  });
}
console.log(contains('div', 'CORRECT-TEXT')[0]);

Working Demo:

const walkTextNodes = (node, filter) => {
    const result = [];
    const execute = node => {
        let child = node.firstChild;
        while (child) {
            switch (child.nodeType) {
                case Node.TEXT_NODE:
                  if (child.textContent.indexOf(filter) > -1 ){
                    result.push(child.parentNode);
                  }
                  break;
                case Node.ELEMENT_NODE:
                    execute(child);
                    break;
            }
            child = child.nextSibling;
        }
    }
    if (node) {
        execute(node);
    }
    return result;
}

const elementsFound = walkTextNodes(rootElement, "CORRECT-TEXT");
console.log( elementsFound[0] );

// Take 2
function contains( selector, text ){
  const elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    if (RegExp(text).test(element.firstChild.textContent)) {
      return element;      
    }
  });
}
console.log(contains('div', 'CORRECT-TEXT')[0]);

<div id="rootElement">othertext
  <div>othertext
    <div>othertext
      <div>othertext
         <div>othertext CORRECT-TEXT othertext</div>
      </div>othertext
    </div>othertext
  </div>othertext
</div>othertext

How to find the last element with certain text in nested html

2 Answers2