使用 JavaScript 检查 Div 是否包含特定文本
检查 div 元素是否包含特定文本:
-
使用元素的
textContent
属性获取元素及其后代的文本内容。 -
使用
includes()
方法检查特定文本是否包含在 div 中。 -
如果是,则
includes()
方法返回 true,否则返回 false。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box">
<p>Hello world</p>
<p>One, two, three</p>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const box = document.getElementById('box');
if (box.textContent.includes('world')) {
console.log('✅ world is contained in div');
} else {
console.log('⛔️ world is NOT contained in div');
}
我们使用 textContent
属性获取 div 元素及其后代的文本内容。
我们使用
String.includes
方法来检查 div 是否包含特定文本。
includes()
方法执行区分大小写的搜索并检查提供的字符串是否包含在调用它的字符串中。
console.log('hello'.includes('lo')); // 👉️ true
console.log('hello'.includes('test')); // 👉️ false
如果要执行不区分大小写的检查文本是否包含在 div
元素中,则必须将元素的文本内容和要检查的字符串转换为小写。
const box = document.getElementById('box');
const word = 'WORLD';
if (box.textContent.toLowerCase().includes(word.toLowerCase())) {
console.log('✅ world is contained in div');
} else {
console.log('⛔️ world is NOT contained in div');
}
通过将我们要比较的两个字符串都转换为小写,我们能够执行不区分大小写的比较。
如果 div
元素的文本内容包含特定文本,我们的 if
块将运行,否则运行 else
块。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间:2023/04/28 浏览次数:146 分类:CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间:2023/03/29 浏览次数:69 分类:PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间:2023/03/24 浏览次数:93 分类:JavaScript
-
在本文中,我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间:2023/03/24 浏览次数:141 分类:JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法