目录

表格版

字符串模糊查询

使用includes方法

使用indexOf方法

使用search方法

正则表达式

数组模糊查询

filter和indexOf/includes组合

filter和正则表达式

扩展高级搜索算法

往期优质相关推荐

---

表格版

数据类型	方法名	作用	简单代码示例
字符串	includes	检查是否包含子字符串	var str = "死亡如风,常伴吾身！"; if (str.includes("风")) { console.log("包含'风'"); }
字符串	indexOf	检查子字符串首次出现的位置	var str = "死亡如风,常伴吾身！"; if (str.indexOf("风") !== -1) { console.log("包含'风'"); }
字符串	search	使用正则表达式检索字符串	var str = "死亡如风,常伴吾身！"; if (str.search(/风/) !== -1) { console.log("包含'风'"); }
字符串	正则表达式的test方法	使用正则表达式检查字符串是否匹配	let str = "Hello, World!"; let regex = /world/i; if (regex.test(str)) { console.log("匹配到"); }
数组	indexOf	查找元素在数组中首次出现的位置	let grades = ["A", "B", "C", "D"]; console.log(grades.indexOf("A")); // 输出: 0
数组	includes	检查数组是否包含特定元素	let animals = ["娜可露露", "橘右京", "宫本武藏", "夏洛特"]; console.log(animals.includes("宫本武藏")); // 输出: true
数组	filter和indexOf组合	使用indexOf进行模糊匹配过滤数组	let arr = ["apple", "banana", "grape", "orange"]; let result = arr.filter(item => item.indexOf("an") !== -1); console.log(result); // 输出: ["banana", "orange"]
数组	filter和正则表达式	结合正则表达式进行复杂模式匹配过滤数组	let fruits = ["apple", "banana", "grape", "orange"]; let regex = /an/; let result = fruits.filter(fruit => regex.test(fruit)); console.log(result); // 输出: ["banana", "orange"]

字符串模糊查询

使用includes方法

这个方法返回一个布尔值，表示目标字符串是否包含了特定的子字符串。适用于字符串类型的数据。

var str = "死亡如风,常伴吾身！";

if (str.includes("风")) {
  // 如果字符串中包含"风"
  console.log("字符串中包含'风'");
}

使用indexOf方法

这个方法返回被搜索字符串在原字符串中首次出现的位置的索引，如果没有找到则返回-1。适用于字符串和数组类型的数据。这是最简单的方法，用于检查一个子字符串是否存在于另一个字符串中。

var str = "死亡如风,常伴吾身！";

if (str.indexOf("风") !== -1) {
  // 如果字符串中包含"风"
  console.log("字符串中包含'风'");
}

// 对于数组
let grades = ["A", "B", "C", "D"];

console.log(grades.indexOf("A")); // 输出: 0
console.log(grades.indexOf("F")); // 输出: -1

使用search方法

这个方法使用正则表达式进行搜索，返回匹配的位置索引，如果没有找到匹配则返回-1。只适用于字符串。

var str = "死亡如风,常伴吾身！";

if (str.search("风") !== -1) {
  // 如果字符串中包含"风"
  console.log("字符串中包含'风'");
}

正则表达式

对于更复杂的模糊匹配，可以使用正则表达式来匹配模式。

let str = "Hello, World!";
let searchTerm = "world"; // 搜索不区分大小写

let regex = new RegExp(searchTerm, "i"); // "i" 代表不区分大小写

if (regex.test(str)) {
  console.log("Term found!");
}

数组模糊查询

filter和indexOf/includes组合

对于数组中的字符串，可以用filter方法结合indexOf或includes来实现模糊查询。

let animals = ["娜可露露", "橘右京", "宫本武藏", "夏洛特"];

console.log(animals.includes("宫本武藏")); // 输出: true
console.log(animals.includes("宫本子"));    // 输出: false


let grades = ["A", "B", "C", "D"];

console.log(grades.indexOf("A")); // 输出: 0
console.log(grades.indexOf("F")); // 输出: -1



let arr = ["apple", "banana", "grape", "orange"];
let searchTerm = "an";

let result = arr.filter(item => item.indexOf(searchTerm) !== -1);

console.log(result); // ["banana", "orange"]

filter和正则表达式

如果需要更复杂的查询，可以结合filter方法和正则表达式。

let arr = ["apple", "banana", "grape", "orange"];
let searchTerm = "an";

let regex = new RegExp(searchTerm, "i");

let result = arr.filter(item => regex.test(item));

console.log(result); // ["banana", "orange"]

扩展高级搜索算法

对于更高级的模糊搜索，可以使用算法，如Levenshtein距离（编辑距离），或者字符串搜索算法，如Boyer-Moore算法。

以下是一个使用Levenshtein距离的例子，它度量两个字符串之间的差异：

function levenshtein(a, b) {
  var tmp;
  if (a.length === 0) { return b.length; }
  if (b.length === 0) { return a.length; }
  if (a.length > b.length) { tmp = a; a = b; b = tmp; }

  var i, j, res, alen = a.length, blen = b.length, row = Array(alen);
  for (i = 0; i <= alen; i++) { row[i] = i; }

  for (i = 1; i <= blen; i++) {
    res = i;
    for (j = 1; j <= alen; j++) {
      tmp = row[j - 1];
      row[j - 1] = res;
      res = b[i - 1] === a[j - 1] ? tmp : Math.min(tmp + 1, Math.min(res + 1, row[j] + 1));
    }
  }
  return res;
}

let arr = ["apple", "banana", "grape", "orange"];
let searchTerm = "aple"; // Intentional typo

let threshold = 1; // Set a threshold for similarity
let result = arr.filter(item => levenshtein(searchTerm, item) <= threshold);

console.log(result); // ["apple"]

        在实际应用中，你可能需要根据具体情况选择或者组合不同的方法来实现模糊查询。例如，如果你只需要简单的子字符串匹配，indexOf或includes可能就足够了。而如果你需要更复杂的模式匹配，正则表达式会是更好的选择。对于数组，通常结合filter方法以及字符串匹配技术来实现模糊查询。而对于复杂的字符串相似度匹配，可能需要使用Levenshtein距离等算法。

往期优质相关推荐

VSCode 最全实用插件（VIP典藏版）

Vue超详细整理（VIP典藏版）

Vue中created，mounted，updated详解

一文快速上手Echarts（持续更新）

Vue中el-table数据项扩展各种类型总结（持续更新）

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！

---