由于数据属性中的文本长度没有限制，所以请使用数据属性!然后你可以使用常规的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选择器的范围以提高性能。

在2021年遇到这个问题时，我发现使用XPATH太复杂了(需要学习其他东西)，不适合做一些应该相当简单的事情。

我想到了这个:

function querySelectorIncludesText (selector, text){
  return Array.from(document.querySelectorAll(selector))
    .find(el => el.textContent.includes(text));
}

用法:

querySelectorIncludesText('button', 'Send')

请注意，我决定使用包含，而不是严格的比较，因为这是我真正需要的，请随意调整。

如果你想支持所有浏览器，你可能需要这些腻子:

  /**
   * String.prototype.includes() polyfill
   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill
   * @see https://vanillajstoolkit.com/polyfills/stringincludes/
   */
  if (!String.prototype.includes) {
    String.prototype.includes = function (search, start) {
      'use strict';

      if (search instanceof RegExp) {
        throw TypeError('first argument must not be a RegExp');
      }
      if (start === undefined) {
        start = 0;
      }
      return this.indexOf(search, start) !== -1;
    };
  }

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

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

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

下面是XPath方法，但是使用了最少的XPath术语。

基于元素属性值的常规选择(用于比较):

// for matching <element class="foo bar baz">...</element> by 'bar'
var things = document.querySelectorAll('[class*="bar"]');
for (var i = 0; i < things.length; i++) {
    things[i].style.outline = '1px solid red';
}

基于元素内文本的XPath选择。

// for matching <element>foo bar baz</element> by 'bar'
var things = document.evaluate('//*[contains(text(),"bar")]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
for (var i = 0; i < things.snapshotLength; i++) {
    things.snapshotItem(i).style.outline = '1px solid red';
}

这里是不区分大小写的，因为文本更不稳定:

// for matching <element>foo bar baz</element> by 'bar' case-insensitively
var things = document.evaluate('//*[contains(translate(text(),"ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz"),"bar")]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
for (var i = 0; i < things.snapshotLength; i++) {
    things.snapshotItem(i).style.outline = '1px solid red';
}

因为你已经在javascript中要求它，所以你可以有这样的东西

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

然后像这样叫它

contains('div', 'sometext'); // find "div" that contain "sometext"
contains('div', /^sometext/); // find "div" that start with "sometext"
contains('div', /sometext$/i); // find "div" that end with "sometext", case-insensitive