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

在jQuery中判断一个字符串是否包含另一个子字符串，需结合JavaScript原生方法实现，常用方式有两种：一是使用includes()方法，如str.includes('sub')返回布尔值；二是用indexOf()，若返回-1则不包含，实际应用中，常通过jQuery获取目标字符串（如$('#elem').text()），再调用上述方法判断，if ($('#elem').text().includes('keyword')) { /* 处理逻辑 */ }，注意，jQuery本身不提供字符串包含方法，需依赖原生JS处理核心判断逻辑，jQuery主要用于获取操作上下文中的字符串内容。

jQuery中判断字符串包含的实用方法与技巧

在Web开发中,字符串操作是常见需求，判断一个字符串是否包含另一个字符串尤为高频，虽然jQuery作为轻量级JavaScript库，核心功能聚焦于DOM操作，但在实际开发中，我们经常需要结合jQuery处理页面中的文本内容，进而涉及字符串包含判断，本文将详细介绍在jQuery及原生JavaScript中实现字符串包含判断的多种方法，并分析其适用场景与注意事项。

原生JavaScript方法：字符串包含判断的基础

虽然jQuery本身未提供专门的字符串包含方法,但我们可以直接使用JavaScript原生方法实现，这些方法在jQuery环境中同样适用，且效率高、兼容性好，以下是两种最常用的原生方法：

includes()方法：简洁直观的包含判断

includes()是ES6新增的字符串方法，用于判断一个字符串是否包含另一个字符串，返回布尔值（true或false），其语法为：

str.includes(searchString, position)

• searchString：要搜索的子字符串；
• position（可选）：搜索的起始位置，默认为0。

示例：

const mainStr = "Hello, jQuery is great!";
const subStr1 = "jQuery";
const subStr2 = "javascript";
console.log(mainStr.includes(subStr1)); // true
console.log(mainStr.includes(subStr2)); // false

优点：

• 语法简洁,可读性高
• 直接返回布尔值,无需额外判断
• 代码意图明确,易于维护

注意：

• includes()是区分大小写的，例如"Hello".includes("hello")返回false
• 在需要兼容IE等旧浏览器时需谨慎,这些浏览器不支持ES6特性

indexOf()方法：传统兼容性方案

indexOf()方法返回指定子字符串在字符串中首次出现的索引，若未找到则返回-1，通过判断返回值是否为-1，即可确定是否包含子字符串，语法为：

str.indexOf(searchString, position)

参数与includes()相同。

示例：

const mainStr = "jQuery makes DOM easy";
const subStr1 = "DOM";
const subStr2 = "css";
console.log(mainStr.indexOf(subStr1) !== -1); // true
console.log(mainStr.indexOf(subStr2) !== -1); // false

优点：

• 兼容性极好（支持IE6+等所有浏览器）
• 适合需要兼容旧项目的场景
• 除了判断包含外,还能获取子字符串的位置信息

注意：

• 同样区分大小写
• 返回的是索引而非布尔值,需额外判断
• 在性能敏感场景下,indexOf()通常比includes()更快

jQuery结合原生方法：处理DOM中的字符串内容

jQuery的核心优势在于DOM操作,在实际开发中，我们常需要获取元素的文本内容（如text()、html()返回的字符串），然后判断是否包含特定子字符串，只需将jQuery获取的字符串与原生方法结合即可。

获取元素文本并判断包含

假设页面中有以下HTML结构：

<p id="intro">jQuery is a fast, small, and feature-rich JavaScript library.</p>
<button id="checkBtn">检查是否包含"JavaScript"</button>

通过jQuery获取<p>，并用includes()判断：

$("#checkBtn").click(function() {
    const text = $("#intro").text(); // 获取文本内容
    const keyword = "JavaScript";
    if (text.includes(keyword)) {
        alert("文本包含目标关键词！");
    } else {
        alert("文本不包含目标关键词。");
    }
});

应用场景：

• 表单验证（如检查输入框是否包含特定字符）筛选（如高亮显示包含关键词的段落）加载（根据内容决定是否显示特定元素）

忽略大小写的包含判断

若需忽略大小写,可将主字符串和子字符串统一转换为小写（或大写）后再判断：

const text = "jQuery is powerful";
const keyword = "jquery";
const isContains = text.toLowerCase().includes(keyword.toLowerCase());
console.log(isContains); // true

在jQuery中应用：

const text = $("#intro").text();
const keyword = "JQUERY";
const isContains = text.toLowerCase().includes(keyword.toLowerCase());

优化建议：

• 对于频繁使用的判断,可以封装成工具函数：

  function containsIgnoreCase(text, keyword) {
    return text.toLowerCase().includes(keyword.toLowerCase());
  }

结合选择器筛选包含特定字符串的元素

若需从多个元素中筛选出文本包含特定字符串的元素,可使用jQuery的contains()选择器。注意：contains()是jQuery特有的选择器，区分大小写，且会匹配子字符串（如"abc"会匹配"xabcx"）。

示例：

<div class="item">苹果</div>
<div class="item">香蕉</div>
<div class="item">苹果派</div>
<button id="filterBtn">筛选包含"苹果"的元素</button>

$("#filterBtn").click(function() {
    const $filteredElements = $(".item:contains('苹果')");
    $filteredElements.css("color", "red"); // 将包含"苹果"的元素文字变红
});

输出：前两个<div>（"苹果""苹果派"）会被选中并变色。

注意：

• contains()的参数是字符串，需用单引号或双引号包裹
• 若需忽略大小写,可结合filter()方法与原生includes()实现：

  const keyword = "apple";
  const $filteredElements = $(".item").filter(function() {
    return $(this).text().toLowerCase().includes(keyword.toLowerCase());
  });

使用正则表达式进行高级匹配

对于更复杂的字符串匹配需求,可以使用正则表达式结合jQuery：

// 匹配包含数字的元素
$(".item").filter(function() {
    return /\d/.test($(this).text());
}).addClass("highlight");
// 匹配包含特定模式的电子邮件
$(".email").filter(function() {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($(this).text());
}).addClass("valid");

方法对比与选择建议

选择建议

1. 现代项目开发：

标签： #判断 #包含