当前位置:首页 > 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 方法:

js实现模糊搜索

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 是一个强大的模糊搜索库,支持更复杂的模糊匹配逻辑:

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']

结合拼音搜索

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

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
分享给朋友:

相关文章

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数: fun…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…

js验证码的实现

js验证码的实现

验证码的基本实现原理 验证码(CAPTCHA)的核心目标是区分人类用户和自动化程序。JavaScript可用于生成或验证客户端验证码,但需注意纯前端验证可能被绕过,通常需结合后端验证。 纯前端验证码…