当前位置：首页 > JavaScript

js实现模糊搜索

2026-01-30 13:45:38JavaScript

实现模糊搜索的基本思路

模糊搜索的核心是通过输入的关键词匹配目标数据，允许存在一定的不完全匹配。常见的实现方式包括字符串包含检查、正则表达式匹配或使用第三方库。

使用字符串的 includes 方法

最简单的方法是使用 JavaScript 字符串的 includes 方法检查目标字符串是否包含搜索词。这种方法区分大小写，适合简单场景。

const data = ['apple', 'banana', 'orange', 'grape'];
const searchTerm = 'ap';

const results = data.filter(item => item.includes(searchTerm));
console.log(results); // ['apple']

不区分大小写的模糊搜索

通过将字符串和搜索词统一转换为小写（或大写）实现不区分大小写的匹配。

const data = ['Apple', 'banana', 'Orange', 'grape'];
const searchTerm = 'ap';

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

使用正则表达式实现更灵活的匹配

正则表达式可以实现更复杂的模糊匹配逻辑，例如部分匹配、开头匹配或结尾匹配。

const data = ['apple', 'banana', 'orange', 'grape'];
const searchTerm = 'na';

const regex = new RegExp(searchTerm, 'i'); // 'i'表示不区分大小写
const results = data.filter(item => regex.test(item));
console.log(results); // ['banana', 'orange']

实现基于相似度的模糊搜索（Levenshtein 距离）

对于更高级的模糊搜索，可以计算字符串之间的编辑距离（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 data = ['apple', 'banana', 'orange', 'grape'];
const searchTerm = 'aple';
const threshold = 2; // 允许的最大编辑距离

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

使用第三方库简化实现

如果项目允许使用第三方库，可以考虑使用 Fuse.js 或 lodash 的模糊搜索功能。

安装 Fuse.js：

npm install fuse.js

使用示例：

import Fuse from 'fuse.js';

const data = ['apple', 'banana', 'orange', 'grape'];
const options = {
  includeScore: true,
  threshold: 0.3, // 匹配阈值，值越小匹配越严格
};

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

在前端实现实时模糊搜索

结合输入框的事件监听，可以实现实时模糊搜索功能。

<input type="text" id="searchInput" placeholder="Search...">
<ul id="results"></ul>

<script>
  const data = ['apple', 'banana', 'orange', 'grape'];
  const searchInput = document.getElementById('searchInput');
  const resultsContainer = document.getElementById('results');

  searchInput.addEventListener('input', (e) => {
    const searchTerm = e.target.value.toLowerCase();
    const filteredData = data.filter(item => 
      item.toLowerCase().includes(searchTerm)
    );

    resultsContainer.innerHTML = '';
    filteredData.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      resultsContainer.appendChild(li);
    });
  });
</script>