jquery 判断字符串包含另一个字符串

admin 2026年02月03日 09:04 102 0

在jQuery中判断字符串是否包含另一个字符串，可通过JavaScript原生方法实现，因jQuery未内置此类功能，常用方法包括：1. includes()：返回布尔值，如"hello world".includes("world")为true，简洁直观；2. indexOf()：返回匹配索引，不包含则返回-1，如"hello".indexOf("ell")为1；3. search()：支持正则表达式，如"123abc".search(/\d+/)可匹配数字，需注意大小写敏感，不区分时可用toLowerCase()转换，如str1.toLowerCase().includes(str2.toLowerCase())，实际应用中，常结合jQuery操作DOM，如判断元素文本内容：$("p").text().includes("关键词")。

jQuery 判断字符串包含：实用技巧与代码示例

在 Web 开发中，判断字符串是否包含特定子字符串是一项基础而重要的操作，广泛应用于表单验证、文本搜索、关键词高亮、数据筛选等场景，虽然 jQuery 本身是一个专注于 DOM 操作的 JavaScript 库，并未直接提供字符串包含的专用方法，但我们可以巧妙结合 JavaScript 原生字符串方法或自定义逻辑来实现这一功能，本文将详细介绍几种实用的判断技巧，并提供清晰的代码示例和适用场景分析。

核心思路：利用 JavaScript 原生字符串方法

jQuery 的核心优势在于 DOM 操作和事件处理，而字符串处理属于 JavaScript 的原生能力，判断字符串包含的关键在于直接使用 JavaScript 提供的字符串方法，无需额外依赖 jQuery 的 API，以下是三种最常用且实用的实现方法：

使用 `String.prototype.includes()`（推荐，ES6+ 语法）

includes() 是 ES6 新增的字符串方法，专门用于判断一个字符串是否包含另一个字符串，返回 true 或 false，代码简洁直观，是现代 Web 开发的首选方法。

语法：

str.includes(searchString, position)

searchString：要搜索的子字符串（必填）
position：开始搜索的位置索引（可选，默认为 0）

示例：

const mainStr = "Hello, this is a jQuery tutorial!";
const subStr1 = "jQuery";
const subStr2 = "javascript";
// 基础包含判断
console.log(mainStr.includes(subStr1)); // true
console.log(mainStr.includes(subStr2)); // false
// 指定搜索位置（从索引 10 开始搜索）
console.log(mainStr.includes("jQuery", 10)); // true

注意事项：

includes() 区分大小写（如 "jQuery" 和 "jquery" 结果不同）
兼容性：IE 浏览器不支持（IE11 及以下），若需兼容旧浏览器，可使用方法二或方法三
性能：对于简单字符串匹配，includes() 的性能优于正则表达式

使用 `String.prototype.indexOf()`（兼容性最佳）

indexOf() 方法返回子字符串首次出现的索引，若未找到则返回 -1，通过判断返回值是否为 -1，即可确定是否包含子字符串，这是最传统且兼容性最好的方法。

语法：

str.indexOf(searchValue, fromIndex)

searchValue：要搜索的子字符串（必填）
fromIndex：开始搜索的位置索引（可选，默认为 0）

示例：

const mainStr = "Hello, this is a jQuery tutorial!";
const subStr1 = "jQuery";
const subStr2 = "javascript";
// 基础包含判断
console.log(mainStr.indexOf(subStr1) !== -1); // true
console.log(mainStr.indexOf(subStr2) !== -1); // false
// 不区分大小写（先统一转小写）
console.log(mainStr.toLowerCase().indexOf("jquery") !== -1); // true

优点：

兼容所有浏览器（包括 IE6 及以上）
可通过 toLowerCase() 或 toUpperCase() 实现不区分大小写的判断
返回索引值,可用于进一步处理（如获取子字符串位置）

实际应用场景：

// 表单验证：检查用户名是否包含非法字符
function validateUsername(username) {
    const forbiddenChars = ['<', '>', '&', '"', "'"];
    return !forbiddenChars.some(char => username.indexOf(char) !== -1);
}
// 文本搜索：高亮显示匹配的关键词
function highlightKeywords(text, keywords) {
    keywords.forEach(keyword => {
        const index = text.indexOf(keyword);
        if (index !== -1) {
            // 实现高亮逻辑
        }
    });
}

使用正则表达式 `RegExp.test()`（灵活匹配）

正则表达式适合复杂的匹配需求,如全局匹配、大小写不敏感、模糊匹配等。test() 方法用于检测字符串是否匹配正则表达式，返回 true 或 false。

语法：

RegExp.test(str)

示例：

const mainStr = "Hello, this is a jQuery tutorial!";
const subStr1 = "jQuery";
const subStr2 = "javascript";
// 基础包含判断
console.log(/jQuery/.test(mainStr)); // true
// 不区分大小写（i 标志）
console.log(/jquery/i.test(mainStr)); // true
// 全局匹配（查找所有匹配项）
console.log(/jQuery/g.test(mainStr)); // true
// 匹配多个关键词（或逻辑）
console.log(/jQuery|javascript/.test(mainStr)); // true
// 复杂匹配：包含数字和字母的组合
console.log(/[a-zA-Z0-9]+/.test(mainStr)); // true

高级应用：

// 检查是否包含邮箱格式
function hasEmail(text) {
    return /\S+@\S+\.\S+/.test(text);
}
// 检查是否包含URL
function hasURL(text) {
    return /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(text);
}

优点：

灵活性极高,可处理复杂匹配规则
支持大小写不敏感（i 标志）、全局匹配（g 标志）等
可用于模式匹配和格式验证

性能对比与选择建议

方法	兼容性	性能	灵活性	推荐场景
`includes()`	ES6+	高	低	现代浏览器，简单匹配
`indexOf()`	所有浏览器	中	中	需要兼容旧浏览器，需要索引值
`RegExp.test()`	所有浏览器	低	高	复杂匹配，格式验证

完整应用示例：动态搜索过滤

// HTML 结构
/*
<input type="text" id="searchInput" placeholder="搜索关键词...">
<ul id="searchResults">
    <li>jQuery 教程</li>
    <li>JavaScript 入门</li>
    <li>CSS 布局技巧</li>
    <li>React 开发指南</li>
</ul>
*/
// jQuery + JavaScript 实现
$(document).ready(function() {
    const $searchInput = $('#searchInput');
    const $searchResults = $('#searchResults');
    const originalItems = $searchResults.find('li').clone();
    $searchInput.on('input', function() {
        const searchTerm = $(this).val().toLowerCase();
        if (searchTerm === '') {
            $searchResults.html(originalItems);
            return;
        }
        const filteredItems = originalItems.filter(function() {
            const itemText = $(this).text().toLowerCase();
            // 使用 includes() 方法进行判断
            return itemText.includes(searchTerm);
        });
        $searchResults.html(filteredItems);
    });
});