Question

如何找到包含特定文字的DIV？例如：

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

尝试使用这样的东西：

var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);

但是当然它不会起作用。我该怎么办？

Answer 1

OP的问题是关于普通 JavaScript 而不是 jQuery 。虽然有很多答案，我喜欢@Pawan Nogariya的答案，但请检查这个替代方案。

您可以在JavaScript中使用 XPATH 。有关MDN文章here的更多信息。

document.evaluate()方法评估XPATH查询/表达式。因此，您可以在那里传递XPATH表达式，遍历HTML文档并找到所需的元素。

在XPATH中，您可以通过文本节点选择一个元素，如下所示，获取具有以下文本节点的div。

//div[text()="Hello World"]

要获取包含某些文本的元素，请使用以下命令：

//div[contains(., 'Hello')]

XPATH中的contains()方法将节点作为第一个参数，将要搜索的文本作为第二个参数。

检查此plunk here，这是JavaScript中XPATH的示例用法

以下是代码段：

var headings = document.evaluate("//h1[contains(., 'Hello')]", document, null, XPathResult.ANY_TYPE, null );
var thisHeading = headings.iterateNext();

console.log(thisHeading); // Prints the html element in console
console.log(thisHeading.textContent); // prints the text content in console

thisHeading.innerHTML += "<br />Modified contents";

如您所见，我可以抓取HTML元素并根据需要进行修改。

Answer 2

因为你已经在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

Answer 3

您可以使用这个非常简单的解决方案：

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

Array.from会将NodeList转换为数组（有多种方法可以像扩展运算符或切片一样执行此操作）
结果现在是一个数组允许使用Array.find方法，然后你可以输入任何谓词。您还可以使用正则表达式或任何您喜欢的内容检查textContent。

请注意，Array.from和Array.find是ES2015的功能。与没有转换器的IE10等旧版浏览器兼容：

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

Answer 4

此解决方案执行以下操作：

使用ES6扩展运算符将所有div的NodeList转换为数组。
如果div 包含查询字符串，则提供输出，而不仅仅是等于查询字符串（适用于某些查询字符串）其他答案）。例如它不仅应该为'SomeText'提供输出，还应该为'SomeText提供输出，文本继续'。
输出整个div内容，而不仅仅是查询字符串。例如对于'SomeText，文本继续'它应该输出整个字符串，而不仅仅是'SomeText'。
允许多个div包含字符串，而不只是一个div。

[...document.querySelectorAll('div')]      // get all the divs in an array
  .map(div => div.innerHTML)               // get their contents
  .filter(txt => txt.includes('SomeText')) // keep only those containing the query
  .forEach(txt => console.log(txt));       // output the entire contents of those

<div>SomeText, text continues.</div>
<div>Not in this div.</div>
<div>Here is more SomeText.</div>

Answer 5

你最好看看你是否有你正在查询的div的父元素。如果是这样，请获取父元素并执行element.querySelectorAll("div")。获得nodeList后，在innerText属性上应用过滤器。假设我们要查询的div的父元素具有id container。您可以直接从ID访问容器，但让我们以正确的方式进行操作。

var conty = document.getElementById("container"),
     divs = conty.querySelectorAll("div"),
    myDiv = [...divs].filter(e => e.innerText == "SomeText");

这就是它。

Answer 6

如果您不想使用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的父级。

Answer 7

由于数据属性中文本的长度没有限制，请使用数据属性！然后，您可以使用常规的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>

理想情况下，您要在文档加载时执行数据属性设置部分，并稍微缩小querySelectorAll选择器以提高性能。

Answer 8

在 2021 年遇到这个问题时，我发现使用 XPATH 太复杂了（需要学习其他东西），而本应相当简单。

想出了这个：

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

用法：

querySelectorIncludesText('button', 'Send')

请注意，我决定使用 includes 而不是严格比较，因为这正是我真正需要的，请随时适应。

如果你想支持所有浏览器，你可能需要这些 polyfill：

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

Answer 9

Google将此视为最佳结果。对于那些需要查找具有特定文本的节点的人。通过更新，现在可以在现代浏览器中迭代节点列表，而无需将其转换为数组。

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

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

当普通选择器不能只选择一个节点时，这对我来说在节点列表中查找/替换文本是有用的，所以我必须逐个过滤每个节点以检查针。

Answer 10

使用XPath和document.evaluate（），并确保使用text（）而不是。对于contains（）参数，否则你将匹配整个HTML或最外面的div元素。

var headings = document.evaluate("//h1[contains(text(), 'Hello')]", document, null, XPathResult.ANY_TYPE, null );

或忽略前导和尾随空格

var headings = document.evaluate("//h1[contains(normalize-space(text()), 'Hello')]", document, null, XPathResult.ANY_TYPE, null );

或匹配所有标签类型（div，h1，p等）

var headings = document.evaluate("//*[contains(text(), 'Hello')]", document, null, XPathResult.ANY_TYPE, null );

然后迭代

let thisHeading;
while(thisHeading = headings.iterateNext()){
    // thisHeading contains matched node
}

Answer 11

这里是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';
}

Answer 12

我有类似的问题。

函数返回所有包含arg文本的元素。

这对我有用：

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

}

Answer 13

这里已经有很多很棒的解决方案。但是，为了提供一种更简化的解决方案，以及一个与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中找到所有包含 link 类且带有 go 字样的 div （例如， Go 下移或右移或这是开始 od ）
document.queryInnerText('div.link', 'go');
除了只返回第一个匹配元素之外，这与上面的示例完全一样。
document.queryInnerTextAll('a', /^Next$/);
查找所有带有确切文本 Next （区分大小写）的链接。这将排除包含 Next 和其他文字的链接。
document.queryInnerText('a', /next/i);
不管大小写如何，找到第一个包含下一个一词的链接（例如下一页或转到下一个）
e = document.querySelector('#page');
e.queryInnerText('button', /Continue/);
这样会在容器元素内搜索包含文本 Continue （区分大小写）的按钮。（例如，继续或继续至下一个，而不是继续）

Answer 14

我正在寻找一种使用正则表达式做类似事情的方法，并决定构建我自己的东西，如果其他人正在寻找类似的解决方案，我想分享。

function getElementsByTextContent(tag, regex) {
  const results = Array.from(document.querySelectorAll(tag))
        .reduce((acc, el) => {
          if (el.textContent && el.textContent.match(regex) !== null) {
            acc.push(el);
          }
          return acc;
        }, []);
  return results;
}

Javascript .querySelector通过innerTEXT找到<div>

14 个答案: