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.
You can use filter:
[...document.querySelectorAll('*')].filter(el => el.textContent.includes(text))
As rightfully pointed out, that will also get you all the ancestors of the elements you're looking for.
So here's a different approach:
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>