1

Is there a way to find HTML Elements that contain specific text in vanilla JavaScript? (Like $( ':contains(text)' ) in jQuery)

*Excluding parent elements. You should only find the element that immediately wraps the text.

potato
  • 97
  • 5
  • Have a look https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes – Kaneki21 Aug 24 '22 at 05:23
  • This may help! Answered here. https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext – DOZBORNE Aug 24 '22 at 05:23

1 Answers1

4

To avoid also getting all the ancestors of the actual elements containing what you are searching for, you'll have to go with an approach like this:

const searchString = 'foo';

function findByText(needle, haystack = document) {

  return [...haystack.querySelectorAll('*')].reduce(
    (acc, val) => {
      for (const {
          nodeType,
          textContent,
          parentElement
        } of val.childNodes) {
        if (nodeType === 3 && textContent.includes(needle) && !(parentElement.tagName === 'SCRIPT')) acc.push(parentElement);
      }
      return acc;
    }, []
  );
}

console.log(findByText(searchString));
<div>
  <span>
    <em> foobar ftw</em>
  </span>
</div>
connexo
  • 53,704
  • 14
  • 91
  • 128