CODEWITHSUNDEEP
javascript
potato
potato

Reputation: 97

Find element containing specific text with vanilla js

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.

Upvotes: 1

Views: 1318

Answers (1)

connexo
connexo

Reputation: 56803

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>

Upvotes: 4

Related Questions