本机javascript相当于jQuery:contains()选择器

Question

我正在编写一个UserScript,它将从包含特定字符串的页面中删除元素.

如果我正确理解jQuery的contains()函数,它似乎是正确的工具.

不幸的是,由于我将运行UserScript的页面不使用jQuery,我不能使用:contains().你们中任何一个可爱的人都知道这样做的本土方式是什么？

http://codepen.io/coulbourne/pen/olerh

Answer 1

这应该在现代浏览器中做到:

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
...

Answer 2

如果你想像containsjQuery 一样实现方法 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

Answer 3

带有可选链操作符的超现代单线方法

[...document.querySelectorAll('*')].filter(element => element.childNodes?.[0]?.nodeValue?.match('?'));

更好的方法是在所有子节点中搜索

[...document.querySelectorAll("*")].filter(e => e.childNodes && [...e.childNodes].find(n => n.nodeValue?.match("?")))

Answer 4

原问题来自2013年

这是一个更旧的解决方案，也是最快的解决方案，因为主要工作负载是由浏览器引擎而不是JavaScript 引擎完成的

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')));

Answer 5

好吧，jQuery 配备了一个 DOM 遍历引擎，它的运行效果比我将要向您展示的引擎要好得多，但它可以解决问题。

var items = document.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
  if (items[i].innerHTML.indexOf("word") != -1) { 
    // Do your magic
  }
}

如果您愿意，可以将其包装在一个函数中，但我强烈建议使用 jQuery 的实现。