Javascript .querySelector find <div> by innerTEXT

javascript innertext selectors-api

2022-08-30 01:28:50

如何找到包含某些文本的 DIV？例如：

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

尝试使用类似这样的东西：

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

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

答案 1

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

你可以在 JavaScript 中使用 XPATH。有关MDN文章的更多信息，请单击此处。

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

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

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

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

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

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

在这里检查这个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元素并根据需要对其进行修改。

答案 2

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

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

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

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

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