实现搜索功能中搜索内容高亮效果,本文通过fuzzysort库方案实现

news2025/2/28 3:08:12

目录

    • 一:fuzzysort
      • 1.fuzzysort 介绍:
      • 2.需求所用方法介绍:
        • go
        • highlight
      • 3.效果实现

一:fuzzysort

1.fuzzysort 介绍:

fuzzysort 是一个 JavaScript 库,用于对字符串数组进行模糊搜索和排序。它特别适用于自动补全(autocomplete)功能,可以根据用户输入提供匹配的建议列表,即使输入存在拼写错误部分匹配也能够有效工作

相比正则方法的优势:更加灵活,即使输入存在拼写错误或部分匹配也能够有效工作

2.需求所用方法介绍:

go
	fuzzysort库中的一个核心函数,用于执行模糊搜索
	fuzzysort.go(searchKeywords,prevList,options):
	一:接收参数
		1.searchKeywords(搜索关键词):字符串,表示用户输入的搜索关键词。fuzzysort.go函数将使用这个关键词来查找与之一致的或者相似的结果
		2.prevList(要搜索的列表):这是一个包含多个对象的数组,每个对象都有一个或多个属性,这些属性包含了可能需要进行搜索的文本。fuzzysort.go函数将在这个列表中搜索与搜索关键词匹配的对象
		3.options(配置对象):这是一个对象,用于配置搜索的行为。举例keys: ["name"],在这个例子中,keys属性被设置为["name"],这意味着fuzzysort.go函数将只在列表中每个对象的name属性上执行搜索。这个配置对象还可以包含其他属性,用于控制模糊搜索的精确度、大小写敏感度等
	二:return包含搜索结果的数组
		1.obj:原始列表中的对象。
		2.indexes:原始列表中对象的索引。
		3.score:匹配的得分,用于确定匹配的准确性。 //返回的数据会根据score得分排序

函数书写
效果举例

highlight
	fuzzysort库提供的一个工具函数,用于将搜索到的匹配文本高亮显示
	fuzzysort.highlight(result, highlightStart, highlightEnd)
	举例:let hl =fuzzysort.highlight(results[i][j], "<b>", "</b>");
	一:接收参数
		1.result:这是fuzzysort.go函数返回的结果中的一个元素。在这个例子中,它是results[i][j],其中results是fuzzysort.go的返回值,i是结果的索引,j是匹配信息的索引
		2.highlightStart:这是一个字符串,用于标记高亮文本的开始。在这个例子中,它被设置为"<b>",这意味着高亮文本将被<b>标签包围,从而在HTML中显示为粗体。
		3.highlightEnd:这是一个字符串,用于标记高亮文本的结束。在这个例子中,它被设置为"</b>",这是<b>标签的闭合标签
	二:return的结果是拼接后的字符串

具体处理

3.效果实现

假如搜索条件`05`经过go,highlight处理后我们可以得到一个类似如下数组:
	[
		{
	        "name": "0525",
	        "highLightName": "<b>05</b>25"  // 关键信息
	 	},
	]
 //函数处理 下面props.map代表如上例的单条数据
 calcTitle = () => {
      if (!this.props.map.highLightName) {
          return <span style={{ fontWeight: 400 }}>{this.props.map.name}</span>;
      }
      let name = this.props.map.highLightName;
      let substr = name.substring(0);
      let results = [];
      while (substr) {
          let start = substr.indexOf("<b>");
          if (start < 0) {
              results.push(<span key={results.length}>{substr}</span>);
              substr = 0;
          } else {
              if (start > 0) results.push(<span key={results.length}>{substr.substring(0, start)}</span>);
              let end = substr.indexOf("</b>");
              results.push(
                  <span key={results.length} style={{ fontWeight: "bold" }}>
                      {substr.substring(start + 3, end)} //+3 <b>占位
                  </span>,
              );
              substr = substr.substring(end + 4); //+4 </b>占位
          }
      }
      return <span style={{ fontWeight: 400 }}>{results}</span>;
  };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1823407.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

只要往前走,至少能到达自己所能做到的部分

很多说自己力不足的人&#xff0c;往往是中道而废&#xff0c;在通往目标的途中就失败了。 无论怎么力不足&#xff0c;只要往前走&#xff0c;至少也能到达自己所能做到的部分。 《刻意练习》有个原则&#xff1a;如果有人能做到一件事&#xff0c;其他人就都能做到。 &…

【最新鸿蒙应用开发】——ArkWeb1——arkts加载h5页面

1. Web组件概述 Web组件用于在应用程序中显示Web页面内容&#xff0c;为开发者提供页面加载、页面交互、页面调试等能力。 页面加载&#xff1a;Web组件提供基础的前端页面加载的能力&#xff0c;包括&#xff1a;加载网络页面、本地页面、html格式文本数据。 页面交互&#…

测试记录4:在windows wsl2上配置ubuntu20.04

1.下载ubuntu20.04 (1) 在microsoft store中下载ubuntu20.04 (2) 在powershell中检查ubuntu20.04 wsl --listwsl -l -v安装成功 2.安装界面 见测试记录3 3.安装必要的功能包 sudo apt install zip sudo apt install gedit 出现问题&#xff1a; Command: xacro /home/buaa…

HCIA 15 AC+FIT AP结构WLAN基础网络

本例配置AC+FIT,即瘦AP+AC组网。生活中家庭上网路由器是胖AP,相当于AC+FIT二合一集成到一个设备上。 1.实验介绍及拓扑 某企业网络需要用户通过 WLAN 接入网络,以满足移动办公的最基本需求。 1. AC 采用旁挂核心组网方式,AC 与AP 处于同一个二层网络。 2. AC 作为DHCP …

【QT5】<重点> IMX6ULL开发板运行QT

目录 1. 安装交叉编译器 2. 命令行交叉编译QT项目 3. 运行该可执行程序 4. 开发板上运行UDP程序与Ubuntu通信 1. 安装交叉编译器 第一步&#xff1a;进入正点原子论坛找到IMX6ULL开发板的资料&#xff0c;下载“开发工具”&#xff0c;将“交叉编译工具”中的fsl-imx-x11-…

【递归、搜索与回溯】DFS解决FloodFill算法

一、经验总结 之前我们已经研究过了BFS解决FloodFill算法&#xff1a;【优选算法】BFS解决FloodFill算法-CSDN博客 DFS只是遍历顺序发生了变化&#xff0c;其他需要注意的点大差不差。 二、相关编程题 2.1 图像渲染 题目链接 733. 图像渲染 - 力扣&#xff08;LeetCode&am…

少样本学习元学习

基本概念 首先是机器学习&#xff1a; 然后&#xff0c;什么是元学习&#xff08;what is meta learning?) 之前&#xff0c;Component都是让人自己设置的。在Meta Learning中&#xff0c;我们期望它能够自己学出来。 不同的meta learning方法就是想办法去学learning algori…

GoogLeNet(InceptionV3)模型算法

GoogLeNet 团队在给出了一些通用的网络设计准则&#xff0c;以期望在不提高网络参数 量的前提下提升网络的表达能力&#xff1a; 避免特征图 (feature map) 表达瓶颈&#xff1a;从理论上讲&#xff0c;尺寸 (seize) 才包含了相关结构等重要因素&#xff0c;维度(channel) 仅仅…

教师博览杂志教师博览杂志社教师博览编辑部2024年第15期目录

高校教师园地 “心流”融入高职劳动教育课程的思考探究 宫婷婷;柳学知; 4-6 高职院校思政教育与就业创业指导融合机制研究 袁晓旭; 7-9 职教社助力乡村人才振兴的实践探索和功能定位——以江西省为例 涂恬; 10-12 育人之道《教师博览》投稿&#xff1a;cn7kantouga…

这家来自内蒙古的物流企业,用另一种方式减碳超500吨

2016年&#xff0c;多蒙德实业集团整合旗下物流及运销板块&#xff0c;组建成立了内蒙古多蒙德科技有限公司&#xff08;以下简称“多蒙德”&#xff09;&#xff0c;整合互联网、大数据及智慧物流为一体&#xff0c;自主研发多蒙达网络货运平台及多个供应链智慧系统&#xff0…

对话分析数据:揭秘企业销售场景的隐形金矿

在数字化浪潮席卷全球的今天&#xff0c;企业对于数据的依赖愈发显著。尤其是在销售领域&#xff0c;数据不仅能够帮助企业精准定位市场&#xff0c;还能在竞争激烈的商海中为企业指明航向。每一个电话、每一次会议、每一段对话&#xff0c;都是企业宝贵的数据资产。然而&#…

机器学习二分类数据集预处理全流程实战讲解

本文概述 本文对weatherAUS数据集进行缺失值分析并剔除高缺失特征&#xff0c;合理填补剩余缺失值&#xff0c;利用相关性筛选关键特征&#xff0c;采用多种机器学习模型&#xff08;如逻辑回归、随机森林等&#xff09;在80%训练集上训练&#xff0c;并在20%测试集上预测明日降…

NG32031单片机串口初始化

目录 1. 串口基础 2. 串口配置步骤 3. N32G031串口初始化示例 3.1开启时钟 3.2 配置GPIO 3.3 配置USART 3.4 使能中断&#xff08;如果需要&#xff09; 3.5. 示例代码 4. 调试和验证 5. 注意事项 6. 额外功能 NG32G031单片机的串口&#xff08;UART&#xff09;通常…

【硬件模块】SSD1306 OLED屏幕(含GD32ESP32驱动代码)

OLED屏幕 最近在写GD32的文章&#xff0c;之前STM32有OLED屏幕来展示数据&#xff0c;ESP32可以直接打印到电脑屏幕上&#xff0c;GD32的话手上就没有办法了。 虽然是可以直接把STM32的OLED屏幕的驱动代码改改移植到GD32上面&#xff0c;不过想了想干脆写一个文章来说说如何驱…

苍穹外卖笔记-13-导入地址簿功能代码、用户下单、订单支付

文章目录 1. 导入地址簿功能代码1.1 需求分析和设计1.1.1 产品原型1.1.2 接口设计1.1.3 表设计 1.2 代码导入1.2.1 Mapper层1.2.2 Service层1.2.3 Controller层 1.3 功能测试 2. 用户下单2.1 需求分析和设计2.1.1 产品原型2.1.2 接口设计2.1.3 表设计 2.2 代码开发2.2.1 DTO设计…

「动态规划」买卖股票的最佳时机,如何处理多笔交易?

188. 买卖股票的最佳时机 IVhttps://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iv/description/ 给你一个整数数组prices和一个整数k&#xff0c;其中prices[i]是某支给定的股票在第i天的价格。设计一个算法来计算你所能获取的最大利润。你最多可以完成k笔交易。…

嵌入式linux中内存管理基本原理

各位开发者,大家好,今天主要给大家分享一下,如何使用linux系统中的内存管理。 前面我们学习了很多Linux内存方面的知识,比如:虚拟地址空间,进程空间,内存映射,页表机制等,我们学了这么多知识,似乎对Linux内存似懂非懂,为什么会出现这样的问题?原因在于我们缺…

关于FPGA对 DDR4 (MT40A256M16)的读写控制 2

关于FPGA对 DDR4 &#xff08;MT40A256M16&#xff09;的读写控制 2 语言 &#xff1a;Verilg HDL EDA工具&#xff1a;ISE、Vivado、Quartus II 关于FPGA对 DDR4 &#xff08;MT40A256M16&#xff09;的读写控制 2一、引言二、DDR4的简介四、DDR4 SDRAM状态框图 关键词&#x…

Java多线程学习笔记

文章目录 1. 引言1.1 多线程的重要性 2. 什么是多线程2.1 线程的定义和基本概念2.2 线程与进程的区别 3. 创建线程的方式3.1 继承Thread类3.2 实现Runnable接口&#xff0c;重写run方法3.3 实现Runnable接口&#xff0c;重写call方法3.4 匿名内部类创建Thread子类对象3.5 使用匿…

ROS中Twist消息类型

Twist消息类型在Robot Operating System (ROS)中是一个常见的数据结构&#xff0c;主要用于描述物体的线性速度和角速度。这种消息类型在ROS的geometry_msgs包中定义&#xff0c;常用于机器人运动控制&#xff0c;尤其是当需要向机器人发布速度指令时。 Twist消息由两个Vector…