当前位置:首页 > JavaScript

js实现模糊搜索

2026-04-04 05:26:39JavaScript

实现模糊搜索的方法

使用正则表达式进行模糊匹配

通过正则表达式可以实现简单的模糊搜索功能。例如,忽略大小写或部分匹配:

const items = ['Apple', 'Banana', 'Orange', 'Grape'];
const searchTerm = 'ap';

const results = items.filter(item => 
  new RegExp(searchTerm, 'i').test(item)
);
console.log(results); // ['Apple']

使用字符串的 includes 方法

对于简单的包含匹配,可以使用字符串的 includes 方法:

const items = ['Apple', 'Banana', 'Orange', 'Grape'];
const searchTerm = 'ap';

const results = items.filter(item => 
  item.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log(results); // ['Apple']

使用第三方库 Fuse.js

Fuse.js 是一个强大的模糊搜索库,支持更复杂的模糊匹配逻辑:

const Fuse = require('fuse.js');
const items = ['Apple', 'Banana', 'Orange', 'Grape'];
const options = {
  includeScore: true,
  threshold: 0.4,
};

const fuse = new Fuse(items, options);
const results = fuse.search('ap');
console.log(results.map(r => r.item)); // ['Apple']

实现 Levenshtein 距离算法

对于更高级的模糊匹配,可以计算字符串之间的编辑距离:

function levenshteinDistance(a, b) {
  const matrix = [];
  for (let i = 0; i <= b.length; i++) {
    matrix[i] = [i];
  }
  for (let j = 0; j <= a.length; j++) {
    matrix[0][j] = j;
  }
  for (let i = 1; i <= b.length; i++) {
    for (let j = 1; j <= a.length; j++) {
      if (b.charAt(i - 1) === a.charAt(j - 1)) {
        matrix[i][j] = matrix[i - 1][j - 1];
      } else {
        matrix[i][j] = Math.min(
          matrix[i - 1][j - 1] + 1,
          matrix[i][j - 1] + 1,
          matrix[i - 1][j] + 1
        );
      }
    }
  }
  return matrix[b.length][a.length];
}

const items = ['Apple', 'Banana', 'Orange', 'Grape'];
const searchTerm = 'Aple';
const threshold = 2;

const results = items.filter(item => 
  levenshteinDistance(item.toLowerCase(), searchTerm.toLowerCase()) <= threshold
);
console.log(results); // ['Apple']

结合拼音搜索

对于中文内容的模糊搜索,可以结合拼音转换:

js实现模糊搜索

const pinyin = require('pinyin');
const items = ['苹果', '香蕉', '橙子', '葡萄'];
const searchTerm = 'ping';

const results = items.filter(item => {
  const py = pinyin(item, { style: pinyin.STYLE_NORMAL }).join('');
  return py.includes(searchTerm.toLowerCase());
});
console.log(results); // ['苹果']

标签: 模糊js
分享给朋友:

相关文章

vue实现模糊查找

vue实现模糊查找

Vue实现模糊查找的方法 在Vue中实现模糊查找功能,可以通过多种方式实现。以下是几种常见的方法: 使用计算属性实现模糊查找 计算属性可以根据输入的关键词动态过滤数据。定义一个计算属性,根据输入的…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

实现继承js

实现继承js

实现继承的方式 在JavaScript中,实现继承可以通过多种方式完成,每种方式都有其优缺点。以下是几种常见的实现继承的方法: 原型链继承 原型链继承是最基本的继承方式,通过将子类的原型指向父类的实…

js 多选 实现

js 多选 实现

实现多选的 JavaScript 方法 使用复选框(Checkbox)实现多选 通过 HTML 的 checkbox 元素配合 JavaScript 实现多选功能。用户可以选择多个选项,提交时获取所有…