在jQuery中判断字符串是否包含另一字符串，通常结合JavaScript原生方法实现，常用includes()方法，如"hello world".includes("world")返回true，直观判断包含关系；或用indexOf()，返回-1表示不包含，如"hello".indexOf("ell") !== -1，若处理jQuery元素内容，需先通过.text()或.html()获取文本，再调用上述方法，如$("div").text().includes("关键词")，includes()兼容性较好（IE11+），indexOf()更通用，两者均能高效实现字符串包含判断。
jQuery与原生JS：高效判断字符串包含关系的实用指南
在前端开发实践中,字符串处理是绕不开的核心任务，而判断一个字符串是否包含特定子字符串更是高频操作，虽然jQuery的核心优势在于DOM操作、事件处理和AJAX交互，但结合其便捷性与JavaScript原生方法，我们依然能高效实现字符串包含关系的判断，本文将深入剖析几种主流方法，涵盖原生JS方案及jQuery场景化应用，并辅以实用示例。
为何需要判断字符串包含关系？
无论是处理用户输入、动态DOM文本，还是解析URL参数，字符串包含判断都是实现业务逻辑的关键环节：
- 内容过滤：检测用户输入是否包含敏感词汇或非法字符；
- 动态样式：根据元素文本内容匹配关键词，添加高亮或特殊样式；
- 路由控制：判断URL是否携带特定参数（如`?debug=true`），执行不同逻辑；
- 数据校验：验证表单字段是否包含必填格式（如邮箱需含`@`）。
这些场景均需依赖精确的字符串包含判断来实现交互控制。
核心方案：JavaScript原生字符串方法详解
jQuery虽强大,但字符串处理主要依赖JavaScript原生`String`对象，以下是四种主流判断方法及其特性：
`includes()` 方法（现代首选）
ES6引入的语义化方法,直接返回布尔值，代码简洁直观。
语法：
str.includes(searchString[, position])
searchString：目标子字符串position（可选）：起始搜索索引（默认0）
示例：
const message = "jQuery简化了DOM操作";
console.log(message.includes("jQuery")); // true
console.log(message.includes("JS")); // false
console.log(message.includes("操作", 10)); // false（从索引10开始）
优势：语义清晰，可读性高，符合现代JS开发规范。
兼容性：需注意IE11不支持，可通过Babel转译或引入Polyfill（如`core-js`）解决。
`indexOf()` 方法（兼容性王者）
传统方法,通过返回值判断：若子字符串存在则返回首次出现的索引（≥0），否则返回`-1`。
语法：
str.indexOf(searchString[, position])
示例：
const url = "https://example.com?user=admin";
console.log(url.indexOf("user") !== -1); // true
console.log(url.indexOf("guest") !== -1); // false
优势：全浏览器兼容，无需额外依赖。
应用场景：需兼容旧版浏览器（如IE）或需获取匹配位置时。
`search()` 方法（正则表达式支持）
支持正则表达式匹配,返回匹配位置的索引（未匹配返回`-1`），适合复杂匹配需求。
语法：
str.search(regExp)
示例：
const text = "jQuery与JavaScript协同工作";
// 普通字符串匹配
console.log(text.search("JavaScript") !== -1); // true
// 忽略大小写匹配
console.log(text.search(/jquery/i) !== -1); // true
// 正则表达式匹配
console.log(text.search(/\bJS\b/) !== -1); // false（未匹配单词边界）
特点：正则灵活性高，适合模糊匹配（如忽略大小写、匹配模式等）。
`match()` 方法（获取匹配详情）
返回匹配结果的数组（未匹配返回`null`），适合需获取匹配内容或后续处理的场景。
语法：
str.match(regExp)
示例：
const log = "Error: 404 Not Found";
// 检查是否包含数字错误码
const errorMatch = log.match(/Error:\s*(\d+)/);
if (errorMatch) {
console.log(`检测到错误码: ${errorMatch[1]}`); // 输出: 404
}
特点：可提取匹配子串、索引等元数据，功能强大但略重。
jQuery场景化应用：从DOM到交互
虽不直接处理字符串,但jQuery能高效获取DOM内容，结合原生方法实现业务逻辑：
场景1：关键词高亮与样式控制
为包含特定关键词的段落添加样式：
<p>普通段落内容</p> <p><strong>重要提示</strong>：请及时更新</p> <p>另一段普通文本</p>
$("p").each(function() {
const text = $(this).text();
if (text.includes("重要")) {
$(this).css({
"background-color": "#fff3cd",
"border-left": "4px solid #ffc107",
"padding": "8px"
});
}
});
场景2：表单实时校验
检测用户名输入是否包含非法字符：
<input type="text" id="username" placeholder="请输入用户名"> <span id="tip" style="color:red;font-size:12px;"></span>
$("#username").on("input", function() {
const value = $(this).val();
const forbiddenChars = ["@", "#", "$", "%"];
const hasForbidden = forbiddenChars.some(char => value.includes(char
