jquery模糊匹配

jQuery模糊匹配方法

在jQuery中实现模糊匹配通常涉及选择器、字符串操作或正则表达式。以下是几种常见方法：

使用属性选择器

通过[attribute*=value]选择器匹配包含指定字符串的元素：

$("input[name*='search']").css("border", "2px solid red");

这会选择所有name属性包含"search"的input元素。

结合:contains()选择器

匹配包含特定文本的元素：

$("div:contains('hello')").addClass("highlight");

注意:contains()区分大小写，且会匹配子孙元素的文本。

使用.filter()方法

通过回调函数实现更复杂的模糊匹配：

$("li").filter(function() {
  return $(this).text().toLowerCase().indexOf("key") >= 0;
}).css("color", "blue");

正则表达式匹配

结合JavaScript的RegExp实现高级模糊匹配：

const regex = /pattern/i;
$("div").filter(function() {
  return regex.test($(this).text());
});

自动完成插件

对于输入框的模糊匹配，可使用jQuery UI的Autocomplete：

$("#tags").autocomplete({
  source: ["选项1", "选项2", "选项3"]
});

注意事项

• 属性选择器性能优于:contains()
• 复杂匹配建议使用.filter()方法
• 大量DOM操作时考虑性能优化
• 中文匹配需注意编码问题