jquery字符串中包含另一个字符串

admin 2026年02月03日 20:11 102 0

在jQuery中判断字符串是否包含子字符串，可通过JavaScript原生方法实现，jQuery本身未提供直接方法，但String.prototype.includes()是最简洁的方式，如"hello world".includes("world")返回true；或使用indexOf()，若返回-1则表示不包含，实际应用中，常结合jQuery操作文本内容，如获取元素文本后判断是否含关键词，示例：$("p").text().includes("jQuery")，两种方法均高效，includes()语义更清晰，适合布尔判断；indexOf()可获取位置，适用于更复杂的文本处理场景。

jQuery 中判断字符串是否包含另一个字符串的实用方法

在 Web 开发实践中，字符串包含判断是一项常见需求，广泛应用于表单验证、数据筛选、文本高亮、内容搜索等多种场景，虽然 jQuery 主要专注于 DOM 操作，但通过结合 JavaScript 原生字符串方法或 jQuery 提供的选择器/工具方法，我们可以高效实现字符串包含判断功能，本文将详细介绍几种实用方法，包括它们的语法特点、适用场景及注意事项，帮助开发者根据实际需求选择最合适的解决方案。

使用 JavaScript 原生方法：`includes()` 或 `indexOf()`

jQuery 本身并未提供专门针对字符串包含判断的独立方法，但我们可以直接调用 JavaScript 原生的字符串方法，这是最常用且高效的方式。

`includes()` 方法（推荐）

includes() 是 ES6 引入的字符串方法，专门用于判断一个字符串是否包含另一个字符串，返回布尔值 true 或 false。

语法：

str.includes(searchString, position)

参数说明：

searchString：要搜索的子字符串（必填参数）
position：可选参数，指定从字符串的哪个位置开始搜索（默认为 0）

示例：

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
// 指定搜索起始位置
console.log(mainStr.includes("jQuery", 10)); // 输出: true（从第10个字符开始搜索）

在 jQuery 项目中的实际应用：

// 表单验证示例
let userInput = "I love jQuery and JavaScript";
let keyword = "jQuery";
if (userInput.includes(keyword)) {
    console.log("包含关键词：" + keyword);
    // 可以在这里执行高亮显示或其他操作
} else {
    console.log("不包含关键词：" + keyword);
}

`indexOf()` 方法（兼容性更好）

indexOf() 是 ES3 引入的经典方法，返回子字符串在主字符串中的首次出现索引，如果不存在则返回 -1，通过判断索引是否为 -1，可以实现包含判断功能。

语法：

str.indexOf(searchString, position)

参数说明：

参数与 includes() 一致
返回值为索引（数字类型）

示例：

let mainStr = "jQuery is popular and easy to learn";
let subStr1 = "popular";
let subStr2 = "hard";
// 判断是否包含子字符串
if (mainStr.indexOf(subStr1) !== -1) {
    console.log("包含子字符串：" + subStr1); // 输出: 包含子字符串：popular
}
if (mainStr.indexOf(subStr2) === -1) {
    console.log("不包含子字符串：" + subStr2); // 输出: 不包含子字符串：hard
}

特点分析：

兼容性极好：支持 IE6+ 及所有现代浏览器
功能丰富：除了判断是否包含，还能获取子字符串的位置，适合需要索引的场景
性能稳定：在各种浏览器中表现一致

使用 jQuery 选择器：`contains()`

如果目标是判断 DOM 元素的文本内容是否包含特定字符串，可以使用 jQuery 的 contains() 选择器，该方法会选择包含指定文本的所有元素，返回 jQuery 对象。

语法：

$("selector:contains(text)")

参数说明：

selector：目标元素的选择器（如 p、div 等）
text：要匹配的文本（区分大小写）

示例：

假设我们有以下 HTML 结构：

<div>
    <p>jQuery is a fast JavaScript library.</p>
    <p>Learn jQuery with examples.</p>
    <span>This is a span tag.</span>
</div>

使用 contains() 选择包含 "jQuery" 的元素并修改样式：

// 选择所有包含 "jQuery" 的 <p> 元素，添加红色背景
$("p:contains('jQuery')").css("background-color", "red");
// 选择包含 "span" 文本的元素，添加下划线
$("div:contains('span')").css("text-decoration", "underline");

注意事项：

匹配范围：contains() 匹配的是元素的所有后代文本内容（包括子元素的文本），而不仅仅是元素自身的直接文本
大小写敏感：contains('jQuery') 和 contains('jquery') 会匹配不同的结果
使用限制：它用于 DOM 元素筛选，不能直接用于普通字符串变量

不区分大小写的包含判断

在实际应用中,经常需要忽略大小写进行字符串包含判断，我们可以将主字符串和子字符串都转换为统一的大小写（如小写），再使用 includes() 或 indexOf() 方法。

示例：

let mainStr = "jQuery is GREAT for DOM manipulation";
let subStr = "jquery";
// 转换为小写后判断
if (mainStr.toLowerCase().includes(subStr.toLowerCase())) {
    console.log("包含子字符串（不区分大小写）：" + subStr); 
    // 输出: 包含子字符串（不区分大小写）：jquery
}

结合 `contains()` 实现不区分大小写：

由于 contains() 本身不支持不区分大小写，我们可以通过 filter() 方法自定义判断逻辑：

// 选择包含 "jQuery"（不区分大小写）的 <p> 元素
$("p").filter(function() {
    return $(this).text().toLowerCase().includes("jquery".toLowerCase());
}).css("color", "blue");

性能对比与选择建议

方法	适用场景	性能	兼容性	是否区分大小写
`includes()`	普通字符串变量判断	高（ES6 优化）	IE 不支持（需转译）	区分
`indexOf()`	普通字符串变量判断，需索引	高	所有浏览器	区分
`contains()`	DOM 元素文本内容筛选	中（需遍历 DOM）	所有 jQuery 版本	区分

选择建议：

判断普通字符串变量：
- 优先使用 includes()（代码简洁，可读性强）
- 需要兼容旧浏览器时使用 indexOf()
筛选 DOM 元素文本：
- 使用 contains() 选择器快速筛选包含目标文本的元素
- 若需不区分大小写,结合 toLowerCase() 自定义过滤逻辑
忽略大小写场景：
- 统一转换为小写后再判断,适用于所有方法
- 考虑使用正则表达式实现更灵活的大小写不敏感匹配

实际应用场景示例

搜索功能实现

// 假设有一个搜索框和结果列表
$("#searchInput").on("input", function() {
    let searchTerm = $(this).val().toLowerCase();
    $(".search-result").each(function() {
        let text = $(this).text().toLowerCase();
        if (text.includes(searchTerm)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});