如何找到带有特定文本的 DIV？例如：
<div>
SomeText, text continues.
</div>
尝试使用这样的东西：
var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);
但当然它不会工作。我该怎么做？
Javascript .querySelector 通过innerTEXT查找<div>
IT技术
javascript
innertext
selectors-api
2021-02-06 17:54:27
6个回答
OP 的问题是关于纯JavaScript而不是jQuery。尽管有很多答案并且我喜欢@Pawan Nogariya 的答案，但请查看此替代方案。
您可以在 JavaScript 中使用XPATH。有关 MDN 文章的更多信息，请访问此处。
该document.evaluate()方法评估 XPATH 查询/表达式。因此，您可以在那里传递 XPATH 表达式，遍历 HTML 文档并定位所需的元素。
在 XPATH 中，您可以通过如下所示的文本节点选择一个元素，获得div具有以下文本节点的元素。
//div[text()="Hello World"]
要获取包含一些文本的元素，请使用以下命令：
//div[contains(., 'Hello')]
contains()XPATH 中的方法将节点作为第一个参数，将要搜索的文本作为第二个参数。
在此处检查此 plunk ，这是在 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 元素并根据需要对其进行修改。
您可以使用这个非常简单的解决方案：
Array.from(document.querySelectorAll('div'))
.find(el => el.textContent === 'SomeText, text continues.');
在
Array.from将节点列表转换为数组（有多种方法来做到这一点，如传播经营者或切片）结果现在是一个数组，允许使用该
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];
既然你已经在 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
此解决方案执行以下操作：
使用 ES6 扩展运算符将所有
divs的 NodeList 转换为数组。如果
div包含查询字符串，而不仅仅是它完全等于查询字符串（其他一些答案会发生这种情况），则提供输出。例如，它不仅应该为“SomeText”提供输出，还应该为“SomeText，文本继续”提供输出。输出全部
div内容，而不仅仅是查询字符串。例如，对于“SomeText，文本继续”，它应该输出整个字符串，而不仅仅是“SomeText”。允许多个
divs 包含字符串，而不仅仅是单个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>您最好查看是否有要查询的 div 的父元素。如果是这样，获取父元素并执行element.querySelectorAll("div"). 一旦你nodeList在innerText属性上应用一个过滤器。假设我们正在查询的 div 的父元素具有idof container。您通常可以直接从 id 访问容器，但让我们以正确的方式进行。
var conty = document.getElementById("container"),
divs = conty.querySelectorAll("div"),
myDiv = [...divs].filter(e => e.innerText == "SomeText");
就是这样了。