blocks|key|836377|text|因为您已经在javascript中要求它，所以您可以有这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|836378|function+contains(selector,+text)+{
++var+elements+=+document.querySelectorAll(selector);
++return+Array.prototype.filter.call(elements,+function(element){
++++return+RegExp(text).test(element.textContent);
++});
}|code-block|syntax|javascript|836379|然后就这样叫它|836380|contains('div',+'sometext');+//+find+"div"+that+contain+"sometext"
contains('div',+/%5Esometext/);+//+find+"div"+that+start+with+"sometext"
contains('div',+/sometext$/i);+//+find+"div"+that+end+with+"sometext",+case-insensitive|836381|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Since you have asked it in javascript so you can have something like this

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

And then call it like this

<pre><code>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
</code></pre>

blocks|key|861534|text|您最好看看是否有要查询的div的父元素。如果是的话，获取父元素并执行一个element.querySelectorAll("div")。获得nodeList后，在innerText属性上应用过滤器。假设我们正在查询的div的父元素具有id+of+container。您通常可以直接从id访问容器，但让我们以正确的方式进行访问。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|861535|var+conty+=+document.getElementById("container"),
+++++divs+=+conty.querySelectorAll("div"),
++++myDiv+=+[...divs].filter(e+=>+e.innerText+==+"SomeText");|code-block|syntax|javascript|861536|就是这样。|861537|entityMap^0|10|V|1Y|8|29|9|39|2|3F|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

You best see if you have a parent element of the div you are querying. If so get the parent element and perform an <code>element.querySelectorAll("div")</code>. Once you get the <code>nodeList</code> apply a filter on it over the <code>innerText</code> property. Assume that a parent element of the div that we are querying has an <code>id</code> of <code>container</code>. You can normally access container directly from the id but let's do it the proper way.

<pre><code>var conty = document.getElementById("container"),
 divs = conty.querySelectorAll("div"),
 myDiv = [...divs].filter(e =&gt; e.innerText == "SomeText");
</code></pre>

So that's it.

blocks|key|1615822|text|OP的问题是关于普通的JavaScript而不是jQuery。虽然有很多答案，我喜欢@Pawan+回答，但请查看这个选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1615823|您可以在中使用JavaScript+XPATH。有关MDN文章这里的更多信息。|style|BOLD|1615824|document.evaluate()方法计算XPATH查询/表达式。因此，您可以在那里传递XPATH表达式，遍历到HTML文档并找到所需的元素。|CODE|1615825|在XPATH中，您可以像下面这样通过文本节点选择一个元素，它将获得具有以下文本节点的div。|1615826|//div[text()="Hello+World"]|code-block|syntax|javascript|1615827|若要获取包含某些文本的元素，请使用以下命令：|1615828|//div[contains(.,+'Hello')]|1615829|XPATH中的contains()方法将节点作为第一个参数，而要搜索的文本作为第二个参数。|1615830|请检查这个plunk+这里，这是XPATH在JavaScript中的一个示例用法。|1615831|下面是一个代码片段：|1615832|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+%2B=+"<br+/>Modified+contents";++|1615833|正如您所看到的，我可以抓取HTML元素并根据我的喜好修改它。|1615834|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/37098508|1|https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript|2|http://plnkr.co/edit/RrpVEW?p=preview^0|1D|2|0|0|4|J|V|2|1|0|0|J|0|16|3|0|0|0|0|7|A|0|B|2|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|D|3|E|5|6|7|1L|8|@$A|1M|B|1N|F|G]]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|H|3|I|5|6|7|1R|8|@$A|1S|B|1T|F|J]]|9|@]|C|$]]|$1|K|3|L|5|6|7|1U|8|@$A|1V|B|1W|F|J]]|9|@]|C|$]]|$1|M|3|N|5|O|7|1X|8|@]|9|@]|C|$P|Q]]|$1|R|3|S|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|T|3|U|5|O|7|1Z|8|@]|9|@]|C|$P|Q]]|$1|V|3|W|5|6|7|20|8|@$A|21|B|22|F|J]]|9|@]|C|$]]|$1|X|3|Y|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]]|C|$]]|$1|Z|3|10|5|6|7|27|8|@]|9|@]|C|$]]|$1|11|3|12|5|O|7|28|8|@]|9|@]|C|$P|Q]]|$1|13|3|14|5|6|7|29|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2A|8|@]|9|@]|C|$]]]|16|$17|$5|18|19|1A|C|$1B|1C]]|1D|$5|18|19|1A|C|$1B|1E]]|1F|$5|18|19|1A|C|$1B|1G]]]]

OP's question is about plain JavaScript and not jQuery.
Although there are plenty of answers and I like @Pawan Nogariya <a href="https://stackoverflow.com/a/37098508">answer</a>, please check this alternative out.

You can use XPATH in JavaScript. More info on the MDN article <a href="https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript" rel="noreferrer">here</a>.

The <code>document.evaluate()</code> method evaluates an XPATH query/expression. So you can pass XPATH expressions there, traverse into the HTML document and locate the desired element.

In XPATH you can select an element, by the text node like the following, whch gets the <code>div</code> that has the following text node.

<pre><code>//div[text()="Hello World"]
</code></pre>

To get an element that contains some text use the following:

<pre><code>//div[contains(., 'Hello')]
</code></pre>

The <code>contains()</code> method in XPATH takes a node as first parameter and the text to search for as second parameter.

Check this plunk <a href="http://plnkr.co/edit/RrpVEW?p=preview" rel="noreferrer">here</a>, this is an example use of XPATH in JavaScript

Here is a code snippet:

<pre><code>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 += "&lt;br /&gt;Modified contents"; 
</code></pre>

As you can see, I can grab the HTML element and modify it as I like.

blocks|key|1615862|text|如果您不想使用jquery或诸如此类的东西，那么您可以尝试如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1615863|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%2B%2B){+
++++//do+something+with+nodes[i]
}+|code-block|syntax|javascript|1615864|一旦数组中有包含文本的节点，就可以对它们执行一些操作。比如提醒每个人或者打印到控制台。一个警告是，这可能不一定抓取div本身，这将获取文本节点的父节点，其中包含您正在寻找的文本。|1615865|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you don't want to use jquery or something like that then you can try this:

<pre><code>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 &amp;&amp; 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 &lt; nodes.length; i++){ 
 //do something with nodes[i]
} 
</code></pre>

Once you have the nodes in an array that contain the text you can do something with them. Like alert each one or print to console. One caveat is that this may not necessarily grab divs per se, this will grab the parent of the textnode that has the text you are looking for.

blocks|key|1615942|text|您可以使用这个非常简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1615943|Array.from(document.querySelectorAll('div'))
++.find(el+=>+el.textContent+===+'SomeText,+text+continues.');|code-block|syntax|javascript|1615944|Array.from将将NodeList转换为一个数组(有多个方法来实现这一点，比如扩展操作符或切片)|ordered-list-item|offset|length|style|CODE|1615945|现在作为数组的结果允许使用Array.find方法，然后可以放入任何谓词。您还可以使用正则表达式或任何您喜欢的方式检查textContent。|1615946|请注意，Array.from和Array.find是ES2015特性。Te与较旧的浏览器(如IE10+)兼容，而不使用转换程序：|1615947|Array.prototype.slice.call(document.querySelectorAll('div'))
++.filter(function+(el)+{
++++return+el.textContent+===+'SomeText,+text+continues.'
++})[0];|1615948|entityMap^0|0|0|0|A|0|D|A|0|4|A|F|A|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|I|7|X|8|@$J|Y|K|Z|L|M]]|9|@]|A|$]]|$1|N|3|O|5|I|7|10|8|@$J|11|K|12|L|M]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|13|8|@$J|14|K|15|L|M]|$J|16|K|17|L|M]]|9|@]|A|$]]|$1|R|3|S|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|T|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|U|$]]

You could use this pretty simple solution:

<pre><code>Array.from(document.querySelectorAll('div'))
 .find(el =&gt; el.textContent === 'SomeText, text continues.');
</code></pre>

<ol>
<li>The <code>Array.from</code> will convert the NodeList to an array (there are multiple methods to do this like the spread operator or slice)</li>
<li>The result now being an array allows for using the <code>Array.find</code> method, you can then put in any predicate. You could also check the textContent with a regex or whatever you like.</li>
</ol>

Note that <code>Array.from</code> and <code>Array.find</code> are ES2015 features. Te be compatible with older browsers like IE10 without a transpiler:

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

blocks|key|861709|text|对于那些需要找到带有特定文本的节点的人来说，Google有这样的结果。通过更新，节点列表现在可以在现代浏览器中迭代，而不必将其转换为数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|861710|解决方案可以像这样使用forEach。|861711|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
++++}
});|code-block|syntax|javascript|861712|当一个普通的选择器不能只选择一个节点时，我就可以在节点列表中查找/替换文本，所以我必须逐个过滤每个节点，以检查是否有指针。|861713|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Google has this as a top result for For those who need to find a node with certain text.
By way of update, a nodelist is now iterable in modern browsers without having to convert it to an array.

The solution can use forEach like so.

<pre><code>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
 }
});
</code></pre>

This worked for me to do a find/replace text inside a nodelist when a normal selector could not choose just one node so I had to filter each node one by one to check it for the needle.

blocks|key|861745|text|使用XPath和document.evaluate()，确保使用text()而不是。对于HTML+()参数，否则将匹配整个HTML或最外层的div元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|861746|var+headings+=+document.evaluate("//h1[contains(text(),+'Hello')]",+document,+null,+XPathResult.ANY_TYPE,+null+);|code-block|syntax|javascript|861747|或者忽略前导和尾随空格|861748|var+headings+=+document.evaluate("//h1[contains(normalize-space(text()),+'Hello')]",+document,+null,+XPathResult.ANY_TYPE,+null+);|861749|或匹配所有标记类型(div、h1、p+.等)|861750|var+headings+=+document.evaluate("//*[contains(text(),+'Hello')]",+document,+null,+XPathResult.ANY_TYPE,+null+);|861751|然后迭代|861752|let+thisHeading;
while(thisHeading+=+headings.iterateNext()){
++++//+thisHeading+contains+matched+node
}|861753|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Use XPath and document.evaluate(), and make sure to use text() and not . for the contains() argument, or else you will have the entire HTML, or outermost div element matched.

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

or ignore leading and trailing whitespace

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

or match all tag types (div, h1, p, etc.)

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

Then iterate

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

blocks|key|1616035|text|此解决方案执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616036|使用ES6扩展运算符将所有div的NodeList转换为数组。|unordered-list-item|offset|length|style|CODE|1616037|如果div包含查询字符串，则提供输出，而不仅仅是如果它完全等于查询字符串(其他一些答案会发生这种情况)。例如，它不仅应该为'SomeText‘提供输出，还应该为'SomeText，文本继续’提供输出。|1616038|输出整个div内容，而不仅仅是查询字符串。例如，对于'SomeText，text继续‘，它应该输出整个字符串，而不仅仅是'SomeText’。|1616039|允许多个div包含字符串，而不仅仅是一个div。|1616040|​|1616041|[...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|code-block|syntax|javascript|1616042|<div>SomeText,+text+continues.</div>
<div>Not+in+this+div.</div>
<div>Here+is+more+SomeText.</div>|1616043|1616044|entityMap^0|0|D|3|0|2|3|0|4|3|0|4|3|K|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@$E|12|F|13|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|14|8|@$E|15|F|16|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|17|8|@$E|18|F|19|G|H]]|9|@]|A|$]]|$1|M|3|N|5|D|7|1A|8|@$E|1B|F|1C|G|H]|$E|1D|F|1E|G|H]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1G|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|S|7|1H|8|@]|9|@]|A|$T|U]]|$1|X|3|P|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$]]

This solution does the following:

<ul>
<li>Uses the ES6 spread operator to convert the NodeList of all <code>div</code>s to an array.</li>
<li>Provides output if the <code>div</code> 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'.</li>
<li>Outputs the entire <code>div</code> contents, not just the query string. e.g. For 'SomeText, text continues' it should output that whole string, not just 'SomeText'.</li>
<li>Allows for multiple <code>div</code>s to contain the string, not just a single <code>div</code>.</li>
</ul>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>[...document.querySelectorAll('div')] // get all the divs in an array
 .map(div =&gt; div.innerHTML) // get their contents
 .filter(txt =&gt; txt.includes('SomeText')) // keep only those containing the query
 .forEach(txt =&gt; console.log(txt)); // output the entire contents of those</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;SomeText, text continues.&lt;/div&gt;
&lt;div&gt;Not in this div.&lt;/div&gt;
&lt;div&gt;Here is more SomeText.&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|861840|text|这里是XPath方法，但使用最少的XPath术语。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|861841|基于元素属性值的常规选择(用于比较)：|861842|//+for+matching+<element+class="foo+bar+baz">...</element>+by+'bar'
var+things+=+document.querySelectorAll('[class*="bar"]');
for+(var+i+=+0;+i+<+things.length;+i%2B%2B)+{
++++things[i].style.outline+=+'1px+solid+red';
}|code-block|syntax|javascript|861843|基于元素中文本的XPath选择。|861844|//+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%2B%2B)+{
++++things.snapshotItem(i).style.outline+=+'1px+solid+red';
}|861845|以下是不区分大小写的问题，因为文本更加不稳定：|861846|//+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%2B%2B)+{
++++things.snapshotItem(i).style.outline+=+'1px+solid+red';
}|861847|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here's the XPath approach but with a minimum of XPath jargon.

Regular selection based on element attribute values (for comparison):

<pre class="lang-js prettyprint-override"><code>// for matching &lt;element class="foo bar baz"&gt;...&lt;/element&gt; by 'bar'
var things = document.querySelectorAll('[class*="bar"]');
for (var i = 0; i &lt; things.length; i++) {
 things[i].style.outline = '1px solid red';
}
</code></pre>

XPath selection based on text within element.

<pre class="lang-js prettyprint-override"><code>// for matching &lt;element&gt;foo bar baz&lt;/element&gt; by 'bar'
var things = document.evaluate('//*[contains(text(),"bar")]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
for (var i = 0; i &lt; things.snapshotLength; i++) {
 things.snapshotItem(i).style.outline = '1px solid red';
}
</code></pre>

And here's with case-insensitivity since text is more volatile:

<pre class="lang-js prettyprint-override"><code>// for matching &lt;element&gt;foo bar baz&lt;/element&gt; 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 &lt; things.snapshotLength; i++) {
 things.snapshotItem(i).style.outline = '1px solid red';
}
</code></pre>

blocks|key|861858|text|我也有类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|861859|函数，该函数返回所有元素，其中包括arg中的文本。|861860|这对我来说很管用：|861861|function+getElementsByText(document,+str,+tag+=+'*')+{
return+[...document.querySelectorAll(tag)]
++++.filter(
++++++++el+=>+(el.text+&&+el.text.includes(str))
++++++++++++%7C%7C+(el.children.length+===+0+&&+el.outerText+&&+el.outerText.includes(str)))|code-block|syntax|javascript|861862|}|861863|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had similar problem. 

Function that return all element which include text from arg. 

This works for me:

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

}

blocks|key|1616122|text|由于数据属性中的文本长度没有限制，所以请使用数据属性！然后，您可以使用常规的css选择器来按照OP的要求选择元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616123|​|1616124|for+(const+element+of+document.querySelectorAll("*"))+{
++element.dataset.myInnerText+=+element.innerText;
}

document.querySelector("*[data-my-inner-text='Different+text.']").style.color="blue";|code-block|syntax|javascript|1616125|<div>SomeText,+text+continues.</div>
<div>Different+text.</div>|1616126|1616127|理想情况下，您可以在文档加载时设置数据属性，并缩小querySelectorAll选择器的范围，以提高性能。|1616128|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Since there are no limits to the length of text in a data attribute, use data attributes! And then you can use regular css selectors to select your element(s) like the OP wants.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (const element of document.querySelectorAll("*")) {
 element.dataset.myInnerText = element.innerText;
}

document.querySelector("*[data-my-inner-text='Different text.']").style.color="blue";</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;SomeText, text continues.&lt;/div&gt;
&lt;div&gt;Different text.&lt;/div&gt;</code></pre>
</div>
</div>


Ideally you do the data attribute setting part on document load and narrow down the querySelectorAll selector a bit for performance.

blocks|key|836618|text|这里已经有很多很好的解决方案了。但是，为了提供更精简的解决方案，以及更符合querySelector行为和语法思想的解决方案，我选择了一种通过一对原型函数扩展对象的解决方案。这两个函数都使用正则表达式来匹配文本，但是可以提供一个字符串作为一个松散的搜索参数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|836619|只需实现以下功能：|836620|//+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];
}|code-block|syntax|javascript|836621|在实现了这些函数之后，您现在可以按以下方式进行调用：|836622|document.queryInnerTextAll('div.link',+'go');
这将发现所有div包含链接类和innerText中的单词go+(例如。，左转，或，往下，，，右转，或，这是|unordered-list-item|CODE|836623|document.queryInnerText('div.link',+'go');
这将与上面的示例完全相同，除非它只返回第一个匹配元素。|836624|document.queryInnerTextAll('a',+/%5ENext$/);
查找与准确的文本Next+(区分大小写)的所有链接。这将排除包含单词Next和其他文本的链接。|836625|document.queryInnerText('a',+/next/i);
查找包含单词next的第一个链接，不管情况如何(例如。下一页或转到next)|836626|e+=+document.querySelector('#page');
e.queryInnerText('button',+/Continue/);
这将在容器元素中执行包含文本连续(区分大小写)的按钮的搜索。(例如，继续或继续下一个，但不继续)|836627|entityMap^0|27|2|0|0|0|0|0|19|1G|3|1L|2|22|2|29|4|2E|4|2J|4|2O|3|0|0|16|0|0|16|1F|4|25|4|0|0|12|19|4|1U|3|1Y|6|0|0|10|11|13|2J|2|33|2|36|5|3E|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|18|8|@$9|19|A|1A|B|R]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|S|3|T|5|Q|7|1P|8|@$9|1Q|A|1R|B|R]]|D|@]|E|$]]|$1|U|3|V|5|Q|7|1S|8|@$9|1T|A|1U|B|R]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|W|3|X|5|Q|7|1Z|8|@$9|20|A|21|B|R]|$9|22|A|23|B|C]|$9|24|A|25|B|C]|$9|26|A|27|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|Q|7|28|8|@$9|29|A|2A|B|R]|$9|2B|A|2C|B|R]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]]|11|$]]

There are lots of great solutions here already. However, to provide a more streamlined solution and one more in keeping with the idea of a querySelector behavior and syntax, I opted for a solution that extends Object with a couple prototype functions. Both of these functions use regular expressions for matching text, however, a string can be provided as a loose search parameter.
Simply implement the following functions:
<pre><code>// 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)=&gt;{
 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];
}
</code></pre>
With these functions implemented, you can now make calls as follows:
<ul>
<li><code>document.queryInnerTextAll('div.link', 'go');</code> 
This would find all divs containing the link class with the word go in the innerText (eg. Go Left or GO down or go right or It's Good)</li>
<li><code>document.queryInnerText('div.link', 'go');</code> 
This would work exactly as the example above except it would return only the first matching element.</li>
<li><code>document.queryInnerTextAll('a', /^Next$/);</code> 
Find all links with the exact text Next (case-sensitive). This will exclude links that contain the word Next along with other text.</li>
<li><code>document.queryInnerText('a', /next/i);</code> 
Find the first link that contains the word next, regardless of case (eg. Next Page or Go to next)</li>
<li><code>e = document.querySelector('#page');</code> 
<code>e.queryInnerText('button', /Continue/);</code> 
This performs a search within a container element for a button containing the text, Continue (case-sensitive). (eg. Continue or Continue to Next but not continue)</li>
</ul>

blocks|key|861912|text|在2021年，我发现使用XPATH对于一些应该相当简单的事情来说太复杂了(需要学习一些其他的东西)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|861913|想出了这个：|861914|function+querySelectorIncludesText+(selector,+text){
++return+Array.from(document.querySelectorAll(selector))
++++.find(el+=>+el.textContent.includes(text));
}|code-block|syntax|javascript|861915|用法：|861916|querySelectorIncludesText('button',+'Send')|861917|请注意，我决定使用includes而不是严格的比较，因为这正是我真正需要的，可以随意调整。|offset|length|style|CODE|861918|如果要支持所有浏览器，则可能需要这些填充：|861919|++/**
+++*+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;
++++};
++}|861920|entityMap^0|0|0|0|0|0|9|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@$O|14|P|15|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Coming across this in 2021, I found using XPATH too complicated (need to learn something else) for something that should be rather simple.
Came up with this:
<pre><code>function querySelectorIncludesText (selector, text){
 return Array.from(document.querySelectorAll(selector))
 .find(el =&gt; el.textContent.includes(text));
}
</code></pre>
Usage:
<pre><code>querySelectorIncludesText('button', 'Send')
</code></pre>
Note that I decided to use <code>includes</code> and not a strict comparison, because that's what I really needed, feel free to adapt.
You might need those polyfills if you want to support all browsers:
<pre><code> /**
 * 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;
 };
 }
</code></pre>

blocks|key|835681|text|我正在寻找一种使用Regex做类似事情的方法，并决定构建一些我自己想要的东西，如果其他人正在寻找类似的解决方案，我想要分享。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|835682|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;
}|code-block|syntax|javascript|835683|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I was looking for a way to do something similar using a Regex, and decided to build something of my own that I wanted to share if others are looking for a similar solution.
<pre><code>function getElementsByTextContent(tag, regex) {
 const results = Array.from(document.querySelectorAll(tag))
 .reduce((acc, el) =&gt; {
 if (el.textContent &amp;&amp; el.textContent.match(regex) !== null) {
 acc.push(el);
 }
 return acc;
 }, []);
 return results;
}
</code></pre>

How can I find DIV with certain text? For example:

<pre><code>&lt;div&gt;
SomeText, text continues.
&lt;/div&gt;
</code></pre>

Trying to use something like this:

<pre><code>var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);
</code></pre>

But ofcourse it will not work. How can I do it?

Javascript .querySelector find <div> by innerTEXT

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

怎样才能找到带有特定文本的DIV？例如：<div>SomeText, text continues.</div>试着用这样的东西：var text = document.querySelector('div[SomeText*]').innerTEXT;alert(text);但这当然行不通。我该怎么做呢？

问Javascript .querySelector通过innerTEXT查找<div>
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript .querySelector通过innerTEXT查找<div>EN