jQuery中判断字符串是否包含指定字符串的实用方法
在Web开发中，判断某个字符串是否包含特定子字符串是一项常见需求，广泛应用于表单验证、内容过滤、关键词检测、数据筛选等场景，虽然jQuery的核心功能是DOM操作，并未直接提供字符串包含的专属方法，但我们可以结合JavaScript原生字符串方法或jQuery的工具函数，轻松实现这一功能，本文将介绍几种实用的判断方式,并附上具体代码示例和最佳实践。
使用JavaScript原生方法（推荐）
JavaScript本身提供了多个判断字符串包含的方法，这些方法可以直接在jQuery环境中使用，无需额外依赖,以下是两种最常用的方式：
includes() 方法（ES6+，推荐）
includes()是ES6新增的字符串方法，用于判断一个字符串是否包含另一个字符串，返回布尔值（true或false），语法简单直观,适合现代开发场景。
语法：
字符串.includes(要查找的子字符串, 起始位置索引)
要查找的子字符串：必需，目标包含的字符串起始位置索引：可选，开始查找的位置，默认为0
示例：
// 假设这是jQuery环境中的字符串变量
let mainStr = "Hello, this is a jQuery tutorial!";
let subStr1 = "jQuery";
let subStr2 = "javascript";
// 判断是否包含子字符串
console.log(mainStr.includes(subStr1)); // 输出: true
console.log(mainStr.includes(subStr2)); // 输出: false
// 指定起始位置（从第10个字符开始查找）
console.log(mainStr.includes("jQuery", 10)); // 输出: true
console.log(mainStr.includes("jQuery", 20)); // 输出: false
在jQuery中的实际应用：
$(document).ready(function() {
// 示例1：实时邮箱格式验证
$("#emailInput").on("input", function() {
let value = $(this).val();
if (value.includes("@") && value.includes(".")) {
$("#emailTip").text("邮箱格式正确").css("color", "green");
} else {
$("#emailTip").text("请输入有效的邮箱地址").css("color", "red");
}
});
// 示例2：高亮包含特定关键词的段落
$("p").each(function() {
let text = $(this).text();
if (text.includes("教程")) {
$(this).css("background-color", "yellow");
}
});
// 示例3：动态过滤列表项
$("#searchInput").on("keyup", function() {
let searchTerm = $(this).val().toLowerCase();
$(".list-item").each(function() {
let itemText = $(this).text().toLowerCase();
if (itemText.includes(searchTerm)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
indexOf() 方法（兼容性更好）
indexOf()是ES3就存在的方法，通过返回子字符串首次出现的索引来判断是否包含，如果子字符串不存在，则返回-1。
语法：
字符串.indexOf(要查找的子字符串, 起始位置索引)
- 返回值：若找到子字符串，返回首次出现的索引（从0开始）；否则返回
-1
示例：
let mainStr = "Hello, this is a jQuery tutorial!";
let subStr1 = "jQuery";
let subStr2 = "javascript";
// 通过判断索引是否大于-1来判断是否包含
console.log(mainStr.indexOf(subStr1) > -1); // 输出: true
console.log(mainStr.indexOf(subStr2) > -1); // 输出: false
// 指定起始位置
console.log(mainStr.indexOf("jQuery", 10) > -1); // 输出: true
在jQuery中的应用：
$(document).ready(function() {
// 示例：标记包含"重要"的列表项
$("li").each(function() {
let text = $(this).text();
if (text.indexOf("重要") !== -1) {
$(this).prepend("【重要】").css("font-weight", "bold");
}
});
// 示例：检查URL是否包含特定参数
let currentUrl = window.location.href;
if (currentUrl.indexOf("?debug=true") !== -1) {
$("body").addClass("debug-mode");
}
});
使用jQuery工具方法（可选）
虽然jQuery没有直接提供字符串包含的方法，但可以通过jQuery.inArray()方法间接实现（需先将字符串转为字符数组），不过这种方式不如原生方法直观,仅作了解。
语法：
jQuery.inArray(值, 数组)
- 返回值：若值在数组中，返回索引；否则返回
-1
示例（将字符串拆分为字符数组判断）：
let mainStr = "Hello jQuery";
let subStr = "jQuery";
// 将字符串转为字符数组，判断子字符串的每个字符是否连续存在
function containsString(main, sub) {
let mainArr = main.split("");
let subArr = sub.split("");
for (let i = 0; i <= mainArr.length - subArr.length; i++) {
let match = true;
for (let j = 0; j < subArr.length; j++) {
if (mainArr[i + j] !== subArr[j]) {
match = false;
break;
}
}
if (match) return true;
}
return false;
}
console.log(containsString(mainStr, subStr)); // 输出: true
注意：这种方法代码复杂，性能也不如原生方法，实际开发中不推荐使用,仅作为扩展思路。
其他实用方法
使用正则表达式
对于更复杂的字符串匹配需求,可以使用正则表达式：
// 使用正则表达式判断是否包含子字符串
function containsRegex(str, subStr) {
return new RegExp(subStr).test(str);
}
// 示例
let mainStr = "Hello, this is a jQuery tutorial!";
console.log(containsRegex(mainStr, "jQuery")); // 输出: true
console.log(containsRegex(mainStr, "javascript")); // 输出: false
// 在jQuery中的应用
$("p").each(function() {
let text = $(this).text();
if (/教程|教程指南/.test(text)) {
$(this).addClass("highlight");
}
});
使用search()方法
search()方法与
