在 JavaScript 中检查页面上是否存在特定文本

使用 JavaScript 检查页面上是否存在文本

Check if specific Text exists on the Page using JavaScript

要检查页面上是否存在特定文本，请使用该document.body属性访问 body 元素并检查 body 的文本内容是否包含该文本。

这是示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box" style="background-color: salmon; width: 150px; height: 150px">
      bobby hadz tutorial
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const text = 'bobby hadz tutorial';

if (document.body.textContent.includes(text)) {
  console.log('✅ text exists on page');
} else {
  console.log('⛔️ text does not exist on page');
}

我们使用
document.body
属性来访问 body 元素。

textContent属性返回节点及其后代的文本内容。

在元素上访问时body，该textContent 属性返回页面上所有节点的文本内容。

我们使用
String.includes方法来检查页面上的文本内容是否包含指定的字符串。

以不区分大小写的方式检查页面上是否存在Text

请注意，该includes方法执行区分大小写的搜索以确定子字符串是否包含在调用该方法的字符串中。

如果在比较文本内容和具体字符串时需要
忽略大小写
，则将两者都转换为小写。

索引.js


const text = 'BOBBY HADZ TUTORIAL';

if (document.body.textContent.toLowerCase().includes(text.toLowerCase())) {
  console.log('✅ text exists on page');
} else {
  console.log('⛔️ text does not exist on page');
}

通过将两个值都转换为小写，我们能够执行不区分大小写的比较。

请注意，如果通过检查特定元素是否包含文本来缩小范围，速度会更快。

例如，此代码片段检查div元素是否包含特定文本。

索引.js


const text = 'BOBBY HADZ TUTORIAL';

const box = document.getElementById('box');

if (box.textContent.toLowerCase().includes(text.toLowerCase())) {
  console.log('text exists on page');
} else {
  console.log('text does not exist on page');
}

由于该textContent属性返回元素及其所有后代的文本内容，因此您可以选择特定元素并检查它是否包含文本。

访问textContentbody 元素上的属性意味着我们将页面上每个节点的文本内容附加到一个字符串，这在包含大量嵌套元素的页面上可能会很慢。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：