使用 vanilla js 查找包含特定文本的元素

Question

有沒有辦法在原版 JavaScript 中找到包含特定文本的 HTML 元素？ （就像 jQuery $( ':contains(text)' ) ）

*不包括父元素。 您應該只找到立即包裹文本的元素。

Answer 1

您可以使用filter ：

[...document.querySelectorAll('*')].filter(el => el.textContent.includes(text))

正如正確指出的那樣，這也將為您提供您正在尋找的元素的所有祖先。

所以這里有一個不同的方法：

 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>