该解决方案实现如下功能:

Uses the ES6 spread operator to convert the NodeList of all divs to an array. Provides output if the div contains the query string, not just if it exactly equals the query string (which happens for some of the other answers). e.g. It should provide output not just for 'SomeText' but also for 'SomeText, text continues'. Outputs the entire div contents, not just the query string. e.g. For 'SomeText, text continues' it should output that whole string, not just 'SomeText'. Allows for multiple divs to contain the string, not just a single div.

[…document.querySelectorAll('div')] //获取数组中所有div .map(div => div. innerhtml) //获取它们的内容 .filter(txt => txt.includes('SomeText')) //只保留包含查询的内容 .forEach(txt => console.log(txt));//输出这些的全部内容 <div> . SomeText, text continue .</div> . SomeText, text continue <div>不在这个div中 这里是更多的SomeText.</div> .

你可以使用这个非常简单的解决方案:

Array.from(document.querySelectorAll('div'))
  .find(el => el.textContent === 'SomeText, text continues.');

from将把NodeList转换为一个数组(有多种方法可以做到这一点，如展开操作符或切片) 结果现在是一个数组，允许使用数组。Find方法，然后可以放入任何谓词。你也可以用正则表达式或任何你喜欢的东西检查textContent。

注意Array.from和Array.from。find是ES2015的特性。在没有转译器的情况下，与IE10等旧浏览器兼容:

Array.prototype.slice.call(document.querySelectorAll('div'))
  .filter(function (el) {
    return el.textContent === 'SomeText, text continues.'
  })[0];

由于数据属性中的文本长度没有限制，所以请使用数据属性!然后你可以使用常规的css选择器来选择你的元素(s)像OP想要的。

for (document.querySelectorAll("*")的常量元素){ element.dataset.myInnerText = element.innerText; ｝ 文档。querySelector(“* [data-my-inner-text = '不同的文本。']”).style.color =“蓝色”; <div> . SomeText, text continue .</div> . SomeText, text continue 不同文本< div >。< / div >

理想情况下，您可以在文档加载时完成数据属性设置部分，并缩小querySelectorAll选择器的范围以提高性能。

如果你不想使用jquery或类似的东西，那么你可以试试这个:

function findByText(rootElement, text){
    var filter = {
        acceptNode: function(node){
            // look for nodes that are text_nodes and include the following string.
            if(node.nodeType === document.TEXT_NODE && node.nodeValue.includes(text)){
                 return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_REJECT;
        }
    }
    var nodes = [];
    var walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_TEXT, filter, false);
    while(walker.nextNode()){
       //give me the element containing the node
       nodes.push(walker.currentNode.parentNode);
    }
    return nodes;
}

//call it like
var nodes = findByText(document.body,'SomeText');
//then do what you will with nodes[];
for(var i = 0; i < nodes.length; i++){ 
    //do something with nodes[i]
} 

在数组中拥有包含文本的节点后，就可以对它们进行操作。比如提醒每个人或打印到控制台。需要注意的是，这可能并不一定会抓取div本身，这将抓取拥有您正在寻找的文本的textnode的父节点。

该解决方案实现如下功能:

Uses the ES6 spread operator to convert the NodeList of all divs to an array. Provides output if the div contains the query string, not just if it exactly equals the query string (which happens for some of the other answers). e.g. It should provide output not just for 'SomeText' but also for 'SomeText, text continues'. Outputs the entire div contents, not just the query string. e.g. For 'SomeText, text continues' it should output that whole string, not just 'SomeText'. Allows for multiple divs to contain the string, not just a single div.

[…document.querySelectorAll('div')] //获取数组中所有div .map(div => div. innerhtml) //获取它们的内容 .filter(txt => txt.includes('SomeText')) //只保留包含查询的内容 .forEach(txt => console.log(txt));//输出这些的全部内容 <div> . SomeText, text continue .</div> . SomeText, text continue <div>不在这个div中 这里是更多的SomeText.</div> .

谷歌有这作为顶部结果为那些谁需要找到一个节点与特定的文本。 通过更新，节点列表现在在现代浏览器中是可迭代的，而不必将其转换为数组。

解决方案可以像这样使用forEach。

var elList = document.querySelectorAll(".some .selector");
elList.forEach(function(el) {
    if (el.innerHTML.indexOf("needle") !== -1) {
        // Do what you like with el
        // The needle is case sensitive
    }
});

当一个普通的选择器不能选择一个节点时，我可以在节点列表中查找/替换文本，所以我必须一个接一个地过滤每个节点以检查它是否有针。