js处理给标题添加搜索词高亮,标题不包含内容包含的拼接内容包含字样

2024-04-16 12:12

本文主要是介绍js处理给标题添加搜索词高亮,标题不包含内容包含的拼接内容包含字样,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目场景:

在项目中我们经常会写搜索,搜索后显示的数据要么标题包含搜索词要么内容包含搜索词,所以我们需要写出下面的效果!
在这里插入图片描述


问题描述

数据是后台给的,标题内容是文字样式,所以我们需要在请求完数据后,给数据进行处理
示例:

数据为:this.pageListData
接口请求完后:
this.pageListData = res.data

解决方案:

数据处理需要两个方法:
一个是正则匹配,给包含搜索词的添加标签并且加上class类名,方便我们加上高亮样式
第二个方法是为了使标题内容不超出两行,加上内容超出提示语后前面的多余字显示省略号,加上提示语不超出两行所以需要加个控制字数的方法,这个字数可以根据自己的样式进行调整

highlightSearchTerm(text, searchTerm) {var regex = new RegExp("(" + searchTerm + ")", "gi"); // 创建全局不区分大小写的正则表达式return text.replace(regex, "<span class='highlight'>$1</span>"); // 将匹配到的关键字包装为<span>标签并添加样式类名'highlight'},truncateString(str, length) {return str.length > length ? str.slice(0, length > 3 ? length - 3 : length) + '...' : str;},

使用:

循环得到的数据
this.activeList为搜索词,我这里的搜索词是搜索品类,为多个,所以需要循环,正常搜索的话只需要用indexOf()方法判断是否包含搜索词即可进行内容替换
//第一步循环,找到内容包含搜索词的数据,给他们使用highlightSearchTerm方法,让内容添加标签和类名,方便添加高亮样式
//highlightSearchTerm方法第一个参数为标题内容,第二个为搜索词,匹配的话就会更替内容
for (var index = 0; index < this.pageListData.length; index++) {for (var i = 0; i < this.activeLists.length; i++) {this.pageListData[index].Title = this.highlightSearchTerm(this.pageListData[index].Title, this.activeLists[i].name);}}for (var index = 0; index < this.pageListData.length; index++) {
//循环搜索词组for (var i = 0; i < this.activeLists.length; i++) {//这里判断为:如果内容包含了搜索词就不再进行操作,如果已经添加过内容包含提示的话也不在加了,是为了防止重复添加提示内容if (this.pageListData[index].Title.indexOf('highlight') != -1 || this.pageListData[index].Title.indexOf('内容包含搜索关键词') != -1) {} else {//如果标题没有搜索词并且超出了指定字数,那就给标题添加span标签拼接//truncateString方法就是上面的,判断超出了多少个字符之后显示省略号,第一个参数传标题内容,第二个参数传多少个字,自己调整if (this.pageListData[index].Title.length > 36) {this.pageListData[index].Title = this.truncateString(this.pageListData[index].Title, 36);}this.pageListData[index].Title = this.pageListData[index].Title + '【<span class="highlight">内容包含搜索关键词</span>】'}}}这样的话标题内容就都添加上搜索词类名和包含搜索词提示了
然后在css里给highlight类名添加样式即可高亮显示
.inquery-title{/deep/ .highlight{color: #E83E3E!important;}display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;//控制多少行开始显示省略号overflow: hidden;}

效果展示:
在这里插入图片描述

这篇关于js处理给标题添加搜索词高亮,标题不包含内容包含的拼接内容包含字样的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/908765

相关文章

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

使用C++将处理后的信号保存为PNG和TIFF格式

《使用C++将处理后的信号保存为PNG和TIFF格式》在信号处理领域,我们常常需要将处理结果以图像的形式保存下来,方便后续分析和展示,C++提供了多种库来处理图像数据,本文将介绍如何使用stb_ima... 目录1. PNG格式保存使用stb_imagephp_write库1.1 安装和包含库1.2 代码解

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前

C#比较两个List集合内容是否相同的几种方法

《C#比较两个List集合内容是否相同的几种方法》本文详细介绍了在C#中比较两个List集合内容是否相同的方法,包括非自定义类和自定义类的元素比较,对于非自定义类,可以使用SequenceEqual、... 目录 一、非自定义类的元素比较1. 使用 SequenceEqual 方法(顺序和内容都相等)2.

C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

《C#使用DeepSeekAPI实现自然语言处理,文本分类和情感分析》在C#中使用DeepSeekAPI可以实现多种功能,例如自然语言处理、文本分类、情感分析等,本文主要为大家介绍了具体实现步骤,... 目录准备工作文本生成文本分类问答系统代码生成翻译功能文本摘要文本校对图像描述生成总结在C#中使用Deep

Spring Boot 整合 ShedLock 处理定时任务重复执行的问题小结

《SpringBoot整合ShedLock处理定时任务重复执行的问题小结》ShedLock是解决分布式系统中定时任务重复执行问题的Java库,通过在数据库中加锁,确保只有一个节点在指定时间执行... 目录前言什么是 ShedLock?ShedLock 的工作原理:定时任务重复执行China编程的问题使用 Shed

Redis如何使用zset处理排行榜和计数问题

《Redis如何使用zset处理排行榜和计数问题》Redis的ZSET数据结构非常适合处理排行榜和计数问题,它可以在高并发的点赞业务中高效地管理点赞的排名,并且由于ZSET的排序特性,可以轻松实现根据... 目录Redis使用zset处理排行榜和计数业务逻辑ZSET 数据结构优化高并发的点赞操作ZSET 结

微服务架构之使用RabbitMQ进行异步处理方式

《微服务架构之使用RabbitMQ进行异步处理方式》本文介绍了RabbitMQ的基本概念、异步调用处理逻辑、RabbitMQ的基本使用方法以及在SpringBoot项目中使用RabbitMQ解决高并发... 目录一.什么是RabbitMQ?二.异步调用处理逻辑:三.RabbitMQ的基本使用1.安装2.架构