当前位置：首页 > jquery

jquery模糊匹配

2026-02-03 22:41:55jquery

jQuery模糊匹配的实现方法

jQuery本身不直接提供模糊匹配功能，但可以通过结合原生JavaScript方法或正则表达式实现。以下是几种常见实现方式：

属性选择器部分匹配

使用属性选择器进行部分内容匹配：

$("[attribute*='value']") // 属性包含value
$("[attribute^='value']") // 属性以value开头
$("[attribute$='value']") // 属性以value结尾

过滤函数实现模糊匹配

通过filter()方法结合正则表达式：

$("selector").filter(function() {
  return $(this).text().match(/模糊关键词/i);
});

自定义选择器扩展

扩展jQuery选择器实现模糊匹配：

$.expr[':'].containsRegex = function(a, i, m) {
  var text = $(a).text();
  var regex = new RegExp(m[3], 'i');
  return regex.test(text);
};

// 使用方式
$("p:containsRegex('jquery')")

结合第三方库

使用专门实现模糊匹配的库如Fuse.js：

var options = {
  keys: ['name', 'content']
};
var fuse = new Fuse(data, options);
var result = fuse.search('关键词');

实际应用示例

实现输入框实时模糊搜索：

jquery模糊匹配

$('#search-input').on('input', function() {
  var searchText = $(this).val().toLowerCase();
  $('.item').each(function() {
    var itemText = $(this).text().toLowerCase();
    $(this).toggle(itemText.includes(searchText));
  });
});

以上方法可根据具体需求选择使用，属性选择器适合简单场景，正则表达式和自定义选择器提供更灵活的匹配方式，第三方库则适合复杂模糊匹配需求。