我正在编写一个 UserScript,它将从包含某个字符串的页面中删除元素。
如果我正确理解 jQuery 的 contains() 函数,它似乎是完成这项工作的正确工具。
不幸的是,由于我将在其上运行 UserScript 的页面不使用 jQuery,因此我无法使用 :contains()。你们中的任何一个可爱的人都知道这样做的本地方式是什么吗?
我正在编写一个 UserScript,它将从包含某个字符串的页面中删除元素。
如果我正确理解 jQuery 的 contains() 函数,它似乎是完成这项工作的正确工具。
不幸的是,由于我将在其上运行 UserScript 的页面不使用 jQuery,因此我无法使用 :contains()。你们中的任何一个可爱的人都知道这样做的本地方式是什么吗?
这应该在现代浏览器中执行:
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return [].filter.call(elements, function(element){
return RegExp(text).test(element.textContent);
});
}
然后像这样使用它:
contains('p', 'world'); // find "p" that contain "world"
contains('p', /^world/); // find "p" that start with "world"
contains('p', /world$/i); // find "p" that end with "world", case-insensitive
...
带有可选链操作符的超现代单线方法
[...document.querySelectorAll('*')].filter(element => element.childNodes?.[0]?.nodeValue?.match('❤'));
更好的方法是在所有子节点中搜索
[...document.querySelectorAll("*")].filter(e => e.childNodes && [...e.childNodes].find(n => n.nodeValue?.match("❤")))
如果你想像contains
jQuery 一样实现方法 exaclty,这就是你需要的
function contains(elem, text) {
return (elem.textContent || elem.innerText || getText(elem)).indexOf(text) > -1;
}
function getText(elem) {
var node,
ret = "",
i = 0,
nodeType = elem.nodeType;
if ( !nodeType ) {
// If no nodeType, this is expected to be an array
for ( ; (node = elem[i]); i++ ) {
// Do not traverse comment nodes
ret += getText( node );
}
} else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
// Use textContent for elements
// innerText usage removed for consistency of new lines (see #11153)
if ( typeof elem.textContent === "string" ) {
return elem.textContent;
} else {
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
}
} else if ( nodeType === 3 || nodeType === 4 ) {
return elem.nodeValue;
}
// Do not include comment or processing instruction nodes
return ret;
};
来源:Sizzle.js
最初的问题是从2013 年开始的
该TreeWalker API已经行之有年,IE9是最后一个来实现它的浏览器...在2011
所有那些“现代”和“超现代”都querySelectorAll("*")
需要处理所有节点并在每个节点上进行字符串比较。
该TreeWalker API使您只有 #text
节点,然后你做你想要与他们的东西。
您也可以使用NodeIterator API,但 TreeWalker更快
function textNodesContaining(txt, root = document.body) {
let nodes = [],
node,
tree = document.createTreeWalker(
root,
4, // NodeFilter.SHOW_TEXT
{
node: node => RegExp(txt).test(node.data)
});
while (node = tree.nextNode()) { // only return accepted nodes
nodes.push(node);
}
return nodes;
}
textNodesContaining(/Overflow/);
textNodesContaining("Overflow").map(x=>console.log(x.parentNode.nodeName,x));
// get "Overflow" IN A parent
textNodesContaining("Overflow")
.filter(x=>x.parentNode.nodeName == 'A')
.map(x=>console.log(x));
// get "Overflow" IN A ancestor
textNodesContaining("Overflow")
.filter(x=>x.parentNode.closest('A'))
.map(x=>console.log(x.parentNode.closest('A')));
这是现代方法
function get_nodes_containing_text(selector, text) {
const elements = [...document.querySelectorAll(selector)];
return elements.filter(
(element) =>
element.childNodes[0]
&& element.childNodes[0].nodeValue
&& RegExp(text, "u").test(element.childNodes[0].nodeValue.trim())
);
}