JavaScript中使用.querySelector查找包含特定文本的<div>标签

// 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';
}

// 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';
}

由于数据属性中的文字长度没有限制，可以使用数据属性！然后您可以使用常规css选择器来选择所需的元素，就像OP想要的那样。

for (const element of document.querySelectorAll("*")) {
  element.dataset.myInnerText = element.innerText;
}

document.querySelector("*[data-my-inner-text='Different text.']").style.color="blue";

<div>SomeText, text continues.</div>
<div>Different text.</div>

这里已经有很多优秀的解决方案了。然而，为了提供一个更加简洁的方案，并符合querySelector行为和语法的思想，我选择了一种通过扩展 Object 来实现的方案，并添加了几个原型函数。这些函数都使用正则表达式匹配文本，但是也可以提供一个字符串作为松散的搜索参数。

只需实现以下函数：

// find all elements with inner text matching a given regular expression
// args: 
//      selector: string query selector to use for identifying elements on which we 
//                should check innerText
//      regex: A regular expression for matching innerText; if a string is provided,
//             a case-insensitive search is performed for any element containing the string.
Object.prototype.queryInnerTextAll = function(selector, regex) {
    if (typeof(regex) === 'string') regex = new RegExp(regex, 'i'); 
    const elements = [...this.querySelectorAll(selector)];
    const rtn = elements.filter((e)=>{
        return e.innerText.match(regex);
    });
    
    return rtn.length === 0 ? null : rtn
}

// find the first element with inner text matching a given regular expression
// args: 
//      selector: string query selector to use for identifying elements on which we 
//                should check innerText
//      regex: A regular expression for matching innerText; if a string is provided,
//             a case-insensitive search is performed for any element containing the string.
Object.prototype.queryInnerText = function(selector, text){
    return this.queryInnerTextAll(selector, text)[0];
}

实现了这些函数后，您现在可以按照以下方式进行调用：

• document.queryInnerTextAll('div.link', 'go');
  这将查找所有包含链接类且innerText中包含单词go的divs（例如Go Left或GO down或go right或It's Good）
• document.queryInnerText('div.link', 'go');
  这与上面的示例完全相同，只是它仅返回第一个匹配的元素。
• document.queryInnerTextAll('a', /^Next$/);
  查找所有精确文本为Next（区分大小写）的链接。这将排除包含其他文本的Next单词的链接。
• document.queryInnerText('a', /next/i);
  查找第一个包含next单词的链接，不区分大小写（例如Next Page或Go to next）
• e = document.querySelector('#page');
e.queryInnerText('button', /Continue/);
  这在容器元素内搜索包含文本Continue（区分大小写）的按钮。（例如Continue或Continue to Next但不是continue）

function getElementsByText(document, str, tag = '*') {
return [...document.querySelectorAll(tag)]
    .filter(
        el => (el.text && el.text.includes(str))
            || (el.children.length === 0 && el.outerText && el.outerText.includes(str)))

}