简介

Fuse.js 是一个轻量级的 JavaScript 库，用于在 JavaScript 中实现模糊搜索。它允许你在一个数组或对象中搜索匹配的元素，并且可以指定搜索的选项，如大小写敏感、模糊匹配等。

安装

你可以通过 npm 或 yarn 来安装 Fuse.js：

npm install fuse.js

或者

yarn add fuse.js

使用

import Fuse from "fuse.js";

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  // 多层嵌套
  // keys: ["name", "age", "address.city", "address.country"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

const result = fuse.search("Jo");
console.log(result); // [{ item: { name: 'John', age: 30 }, refIndex: 0, score: 0.001 }];

参数

名称	类型	默认值	描述
`keys`	`string[]`	`[]`	指定要搜索的键
`includeScore`	`boolean`	`false`	是否包含匹配的分数
`threshold`	`number`	`0.6`	匹配的阈值
`isCaseSensitive`	`boolean`	`false`	是否大小写敏感
`ignoreLocation`	`boolean`	`false`	是否忽略位置, 忽略 location、distance
`includeMatches`	`boolean`	`false`	是否包含匹配的字符
`minMatchCharLength`	`number`	`1`	最小匹配字符长度
`shouldSort`	`boolean`	`false`	是否按分数 score 对结果进行排序
`findAllMatches`	`boolean`	`false`	即使字符串中已经找到完美匹配，匹配函数仍将继续到搜索模式的末尾
`location`	`number`	`0`	指定搜索模式应开始的位置
`distance`	`number`	`100`	指定两个匹配项之间的最大距离
`useExtendedSearch`	`boolean`	`false`	是否使用扩展搜索
`getFn`	`function`	`null`	自定义获取函数
`sortFn`	`function`	`null`	自定义排序函数
`ignoreFieldNorm`	`boolean`	`false`	是否忽略字段长度标准
`fieldNormWeight`	`number`	`1`	字段长度规范对评分的权重

方法

search(pattern, options)

pattern：要搜索的字符串或对象
options：可选的搜索参数

返回一个包含匹配结果的数组，每个结果都是一个对象，包含以下属性：

item：匹配的元素
refIndex：匹配元素的索引
score：匹配的分数

setCollection

更新搜索的数据集

const options = {
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0,
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

const newData = [
  {
    name: "Jo",
    age: 18,
  },
];

fuse.setCollection(newData);
const result = fuse.search("Jo");
console.log(result); // [{ item: { name: 'Jo', age: 18 }, refIndex: 0, score:2.220446049250313e-16 }];

add

向搜索的数据集中添加一个元素

const options = {
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0,
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

fuse.add({
  name: "Jo",
  age: 18,
});
const result = fuse.search("Jo");
console.log(result); // [{ item: { name: 'John', age: 30 }, refIndex: 0, score: 0.001 }, { item: { name: 'Jo', age: 18 }, refIndex: 1, score: 0.001 }];

removeAt

从搜索的数据集中删除指定索引的元素

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

fuse.removeAt(0);
const result = fuse.search("Jo");
console.log(result); // [];

remove

从搜索的数据集中删除元素

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

fuse.remove((doc) => {
  return doc.name === "John";
});
const result = fuse.search("Jo");
console.log(111, result); // [];

getIndex

获取搜索的索引

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

const index = fuse.getIndex();
console.log(index); // { docs, keys, getFn, list, isCreated, norm, records, _keysMap }

索引

使用索引来加速搜索。

createIndex

创建索引

onst options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const myIndex = Fuse.createIndex(options.keys, data);
const fuse = new Fuse(data, options, myIndex);
const result = fuse.search("Jo");

parseIndex

解析索引

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

// const myIndex = Fuse.parseIndex(myIndex);
// fs.writeFileSync("fuseIndex.json", JSON.stringify(myIndex.toJSON()));

const fuseIndex = await require("fuseIndex.json");
const myIndex = Fuse.parseIndex(fuseIndex);
const fuse = new Fuse(data, options, parsedIndex);
const result = fuse.search("Jo");

逻辑运算符

使用逻辑运算符来组合多个搜索条件。

$and

使用 $and 运算符来组合多个搜索条件，只有当所有条件都满足时，结果才会被返回。

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

const result = fuse.search({
  $and: [{ name: "John" }, { age: 30 }],
});
console.log(result); // [{ item: { name: 'John', age: 30 }, refIndex: 0, score: 0 }];

$or

使用 $or 运算符来组合多个搜索条件，只要有一个条件满足，结果就会被返回。

const options = {
  // 指定搜索的选项
  keys: ["name", "age"],
  useExtendedSearch: true,
  includeScore: true,
  threshold: 0, // 0 表示完全匹配，1 表示不匹配
};

const data = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 },
];

const fuse = new Fuse(data, options);

const result = fuse.search({
  $or: [
    {
      name: "John",
    },
    {
      name: "Jane",
    },
  ],
});
console.log(result); // [{ item: { name: 'John', age: 30 }, refIndex: 0, score: 1.4901161193847656e-8 }, { item: { name: 'Jane', age: 25 }, refIndex: 1, score: 1.4901161193847656e-8 }];

嵌套搜索

const docs = [
  {
    title: "The Catcher in the Rye",
    author: {
      name: "J.D. Salinger",
      age: 26,
    },
  },
  {
    title: "To Kill a Mockingbird",
    author: {
      name: "Harper Lee",
      age: 28,
    },
  },
];

// 点符号
const options = {
  keys: ["title", "author.name"],
};
// 数组符号
const options = {
  keys: ["title", ["author", "name"]],
};
//函数
const options = {
  keys: [
    {
      name: "title",
      getFn: (doc) => doc.title,
    },
    {
      name: "author.name",
      getFn: (doc) => doc.author.name,
    },
  ],
};

加权搜索

const options = {
  keys: [
    {
      name: "title",
      weight: 0.5,
    },
    {
      name: "author.name",
      weight: 0.5,
    },
  ],
};

扩展搜索

代币	匹配类型	描述
`fuse`	模糊匹配	模糊匹配的项目 fuse
`=fuse`	精确匹配	等于 fuse
`js`	包含匹配	包括的项目 js
`!js`	反向精确匹配	不包括的项目 js
`^js`	前缀精确匹配	以开头的项目 js
`!^js`	反向前缀精确匹配	不以 js
`.js$`	后缀精确匹配	以结尾的项目.js
`!.js$`	反向后缀精确匹配	不以.js

fuse.search("^js");

$or: [
  {
    name: "!js",
  },
  {
    name: "&js",
  },
],

原文链接：https://code.ifrontend.net/archives/326，转载请注明出处。

Fuse.js轻量级js模糊搜索库使用详解

简介

安装

使用

参数

方法

search(pattern, options)

setCollection

add

removeAt

remove

getIndex

索引

createIndex

parseIndex

逻辑运算符

$and

$or

嵌套搜索

加权搜索

扩展搜索

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

Fuse.js轻量级js模糊搜索库使用详解

简介

安装

使用

参数

方法

search(pattern, options)

setCollection

add

removeAt

remove

getIndex

索引

createIndex

parseIndex

逻辑运算符

$and

$or

嵌套搜索

加权搜索

扩展搜索

猜你喜欢

Motion – 让动画开发变得简单而强大，使JavaScript 动画的拥有无限潜力

微信小程序腾讯电子健康卡接入实战

Node.js爬虫 CheerioJS ‌轻量级解析、操作和渲染HTML及XML文档

daisyUI 扩展之 pin input 组件开发，极致pin码输入框

Lodash.js 实用工具库常用方法详解

Math.js高级数学运算与函数库使用详解

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部