使用 JavaScript 检查 Span 是否包含特定文本
要检查 span 元素是否包含特定文本：
-
使用元素的
textContent属性获取元素及其后代的文本内容。 -
使用
includes()方法检查特定文本是否包含在范围内。 -
如果是，则
includes()方法返回 true，否则返回 false。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<span id="box">
<p>One, two, three</p>
<p>Four, five, six</p>
</span>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const box = document.getElementById('box');
if (box.textContent.includes('five')) {
console.log('✅ five is contained in span');
} else {
console.log('⛔️ five is NOT contained in span');
}
我们使用 textContent 属性获取 span 元素及其后代的文本内容。
我们使用 String.includes 方法来检查 span 是否包含特定文本。
includes()方法执行区分大小写的搜索并检查提供的字符串是否包含在调用它的字符串中。
console.log('one'.includes('ne')); // 👉️ true
console.log('one'.includes('two')); // 👉️ false
如果要执行不区分大小写的检查文本是否包含在 span 元素中，则必须将元素的文本内容和要检查的字符串转换为小写。
const box = document.getElementById('box');
const word = 'FOUR';
if (box.textContent.toLowerCase().includes(word.toLowerCase())) {
console.log('✅ four is contained in span');
} else {
console.log('⛔️ four is NOT contained in span');
}
通过将我们要比较的两个字符串都转换为小写，我们能够执行不区分大小写的比较。
如果 span 元素的文本内容包含特定文本，我们的 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 代码。
HTML 斜体 span
发布时间：2023/03/28 浏览次数：135 分类：HTML
-
在本文中，我们将学习如何在 HTML 中将文本设置为斜体，并查看将文本设置为斜体的正确方法。 我们将使用以下标签 、 或 ，它们用于使文本变为斜体。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
