JS模糊匹配|极客笔记

JS模糊匹配

在前端开发中，经常会遇到需要模糊匹配字符串的情况，比如搜索框的联想功能、输入提示等。JavaScript提供了一些方法来实现字符串的模糊匹配，本文将详细讨论这些方法的使用和实现原理。

1. String.prototype.includes()

includes 方法可以检查一个字符串是否包含另一个字符串，返回一个布尔值。这个方法不区分大小写，可以用于简单的模糊匹配。

const str = "Hello, World!";
console.log(str.includes("lo")); // true
console.log(str.includes("abc")); // false

上面的示例中，我们可以看到第一个 includes 方法返回了 true，因为原始字符串中包含子字符串 “lo”，而第二个 includes 方法返回了 false，因为原始字符串中不包含 “abc”。

2. String.prototype.match()

match 方法可以使用正则表达式在字符串中查找符合条件的子串，返回一个数组。

const str = "JavaScript is a popular programming language";
const matchResult = str.match(/s[a-z]/g);
console.log(matchResult); // ["sc", "st", "si", "se"]

在上面的示例中，我们使用正则表达式 /s[a-z]/g 匹配了字符串中以 “s” 开头且紧跟一个小写字母的子串，返回了一个包含所有匹配结果的数组。

3. String.prototype.indexOf()

indexOf 方法返回第一个匹配到的子串在原始字符串中的位置，如果没有找到匹配子串则返回 -1。

const str = "Hello, World!";
console.log(str.indexOf("lo")); // 3
console.log(str.indexOf("abc")); // -1

在上面的示例中，我们可以看到第一个 indexOf 方法返回了 3，因为子串 “lo” 在原始字符串中的位置是从索引 3 开始的，而第二个 indexOf 方法返回了 -1，因为原始字符串中不包含 “abc”。

4. 模糊匹配实现

除了上面介绍的方法外，我们还可以通过自定义函数来实现模糊匹配。下面是一个简单的示例：

function fuzzyMatch(str, keyword) {
  return str.toLowerCase().includes(keyword.toLowerCase());
}

const str = "Hello, World!";
console.log(fuzzyMatch(str, "LO")); // true
console.log(fuzzyMatch(str, "abc")); // false

在上面的示例中，我们定义了一个 fuzzyMatch 函数，该函数会将字符串和关键词都转换为小写字符后使用 includes 方法进行模糊匹配，忽略大小写。这样就可以实现不区分大小写的模糊匹配功能。