js实现模糊搜索
实现模糊搜索的基本思路
模糊搜索的核心是通过字符串匹配算法，找到与用户输入关键词相似的内容。常见方法包括字符串包含检查、正则表达式匹配或使用第三方库实现更复杂的算法（如Levenshtein距离）。
使用字符串包含检查
通过 String.prototype.includes() 或 String.prototype.indexOf() 检查目标字符串是否包含用户输入的关键词。这种方法简单但区分大小写，通常需要转为统一大小写。
const data = ["apple", "banana", "orange", "grape"];
const keyword = "ap";
const results = data.filter(item =>
item.toLowerCase().includes(keyword.toLowerCase())
);
console.log(results); // ["apple"]使用正则表达式匹配
正则表达式可以实现更灵活的模糊匹配，例如忽略大小写、部分匹配或通配符搜索。
const data = ["apple", "banana", "orange", "grape"];
const keyword = "a.*e";
const regex = new RegExp(keyword, "i"); // "i"表示不区分大小写
const results = data.filter(item => regex.test(item));
console.log(results); // ["apple", "grape"]使用第三方库实现高级模糊搜索
若需要更复杂的模糊匹配（如拼写容错），可以使用 Fuse.js 等库。Fuse.js 支持权重、阈值配置和多种匹配模式。
import Fuse from "fuse.js";
const data = ["apple", "banana", "orange", "grape"];
const options = {
includeScore: true,
threshold: 0.4, // 匹配阈值，值越低越严格
};
const fuse = new Fuse(data, options);
const results = fuse.search("ap").map(item => item.item);
console.log(results); // ["apple"]实现前端实时模糊搜索
结合输入框事件监听，动态过滤数据并展示结果。
<input type="text" id="searchInput" placeholder="Search...">
<ul id="results"></ul>
<script>
const data = ["apple", "banana", "orange", "grape"];
const input = document.getElementById("searchInput");
const resultsContainer = document.getElementById("results");
input.addEventListener("input", (e) => {
const keyword = e.target.value.toLowerCase();
const filtered = data.filter(item =>
item.toLowerCase().includes(keyword)
);
resultsContainer.innerHTML = filtered
.map(item => `<li>${item}</li>`)
.join("");
});
</script>优化搜索性能
对于大数据集，可以通过以下方式优化性能：
- 对数据建立索引（如使用
Fuse.js）。 - 防抖（Debounce）输入事件，避免频繁触发搜索。
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
input.addEventListener("input", debounce((e) => {
// 搜索逻辑
}, 300));模糊搜索的扩展场景
- 对象数组搜索：针对对象中的特定属性进行模糊匹配。
const users = [{ name: "John" }, { name: "Jane" }]; const results = users.filter(user => user.name.toLowerCase().includes("jo") ); - 拼音搜索：结合拼音库实现中文拼音模糊匹配。
