Javascript .querySelector通过innerTEXT查找<div>
Javascript .querySelector通过innerTEXT查找<div>
提问于 2016-05-08 09:41:48
怎样才能找到带有特定文本的DIV？例如：
<div>
SomeText, text continues.
</div>试着用这样的东西：
var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);但这当然行不通。我该怎么做呢？
回答 14
Stack Overflow用户
回答已采纳
发布于 2016-05-08 10:10:03
OP的问题是关于普通的JavaScript而不是jQuery。虽然有很多答案，我喜欢@Pawan 回答，但请查看这个选项。
您可以在中使用JavaScript XPATH。有关MDN文章这里的更多信息。
document.evaluate()方法计算XPATH查询/表达式。因此，您可以在那里传递XPATH表达式，遍历到HTML文档并找到所需的元素。
在XPATH中，您可以像下面这样通过文本节点选择一个元素，它将获得具有以下文本节点的div。
//div[text()="Hello World"]若要获取包含某些文本的元素，请使用以下命令：
//div[contains(., 'Hello')]XPATH中的contains()方法将节点作为第一个参数，而要搜索的文本作为第二个参数。
请检查这个plunk 这里，这是XPATH在JavaScript中的一个示例用法。
下面是一个代码片段：
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元素并根据我的喜好修改它。
Stack Overflow用户
发布于 2017-08-24 19:57:40
您可以使用这个非常简单的解决方案：
Array.from(document.querySelectorAll('div'))
.find(el => el.textContent === 'SomeText, text continues.');Array.from将将NodeList转换为一个数组(有多个方法来实现这一点，比如扩展操作符或切片)- 现在作为数组的结果允许使用
Array.find方法，然后可以放入任何谓词。您还可以使用正则表达式或任何您喜欢的方式检查textContent。
请注意，Array.from和Array.find是ES2015特性。Te与较旧的浏览器(如IE10 )兼容，而不使用转换程序：
Array.prototype.slice.call(document.querySelectorAll('div'))
.filter(function (el) {
return el.textContent === 'SomeText, text continues.'
})[0];Stack Overflow用户
发布于 2016-05-08 09:52:29
因为您已经在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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37098405
复制相关文章
相似问题
腾讯云开发者
