一招搞定动态获取的多个关键词在列表的每一项高亮

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量243 收藏
点赞数
文章标签： vue html es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sara0064/article/details/127880827
版权

正则表达式 关键词匹配 高亮显示 动态渲染 JavaScript
关键词由CSDN通过智能技术生成

废话不说，就是干

item.replace(new RegExp('(十年|二十年|三十年)', 'g'),`<span style="color: red">$1</span>`) //多个关键词进行正则匹配

这样v-for循环出来的数据会动态匹配每一个item里面的高亮关键词。
注意几个要点：

  1. 关键词与关键词之间用 | 拼接

  2. 一定要加上 g 进行全文匹配

  3. $1会自动替换关键词，一定要用es6中的模板字符串哦~这样才会动态渲染某一个关键词

Sara0064
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【原创】多关键词搜索高亮标红关键词的JS方法
06-01
实现JS多关键词高亮方法，可以改造查询条件直接引用该JS方法使用，更加简单简洁实现查询高亮关键词。多关键词当前以空格隔开演示。
vue实现多组关键词对应高亮显示功能
10-16
在给定的例子中，我们首先看到一个数据结构，包括`colors`数组存储了多组关键词对应的背景色，`keywordsdetail`数组存储了关键词列表，而`comments`数组则包含了待高亮显示的文本内容。每个`comments`对象有一个`...
纯 JS 实现语雀的划词高亮功能
油墨香^-^的博客
02-03 243
前段时间公司需要实现一个划词评论的功能，但是到网上找了一圈发现划词评论的库并不多，而且大部分的实现都是需要破坏页面 DOM 结构的，也就是需要在页面 DOM 结构中拆分文本包裹一个 mask 标签，但是由于我们做的是在线富文本文档功能，文本的内容是可以再编辑的，如果评论破坏了 DOM 结构这样对我们编辑的时候编辑器解析就不是很友好。找到最后发现语雀实现的划词评论功能是基于 canvas 实现的，与页面结构完全解耦，但是由于语雀没有开源，所以也没办法参考他们的代码，只能顺着他们的思路自己写。
vue--根据数据变量动态创建正则表达式(实现部分文字高亮效果)
Gik99的博客
03-14 560
根据输入的关键字 动态创建 正则表达式。实现效果 搜索关键字 实现高亮效果。
根据搜索关键字动态显示表格数据
qq_26747571的博客
07-29 5504
最近做了为dataTable表格添加一个模糊搜索框，在这里记录下我的实现过程。 由于我的表格数据是已经加载完成的，所以在这里直接记录我是如何实现在搜索框中输入关键字点击回车后，自动根据关键字显示搜索结果的。这里我用的是bootstrap中的插件。 1.前端html页面 2.js脚本 jQu
利用SOLR搭建企业搜索平台 之一
lishoubin
02-03 192
在网络上找了很多的关于solr的资料，发现非常的不全面，即使就是官方的wiki，也是如此！ 　　基于现阶段正在研究的solr应 用，陆续的会分享我的一些经验！ 　　今天要说的是： 怎么跑起来！ 　　1》 首先下载好solr，我用的是 solr1.3，下载地址： 　　windows版本 　　http://labs.xiaonei.com/apache-m ... ache-solr-1.3.0.z...
react-一个可以把文本中多个关键字高亮显示的react组件
08-14
5. **CSS样式**：为了高亮关键词，组件可能需要创建一个或多个CSS类，用于改变关键词的背景色、字体颜色等样式。这些样式可以通过内联样式或外部样式表导入。 6. **JSX语法**：React使用JSX（JavaScript XML）来...
react中实现搜索结果中关键词高亮显示
10-18
在React中实现搜索结果中关键词高亮...这些知识点结合在一起，构成了一个完整的关键词高亮显示功能实现的逻辑链路。在实际开发中，开发者需要根据具体的需求和数据结构，灵活运用上述知识点，以达到最佳的用户体验。
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
PleaSure乐事的博客
08-11 944
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 695
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
ES6的promise
qq_35641191的博客
08-09 633
ES6的promise
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 456
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 262
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 419
注释很详细，直接上代码……
【无标题】
weixin_42348009的博客
08-14 82
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 892
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
怎么将一段字符串中包含的多个关键词高亮显示
06-10
要将一段字符串中包含的多个关键词高亮显示，可以按照以下步骤进行： 1. 将关键词存储到一个列表中。 2. 遍历列表中的每个关键词，使用字符串的 `replace` 方法将每个关键词替换为带有高亮样式的字符串。 3. 将替换后的字符串返回。 示例代码如下： ```python def highlight_keywords(text, keywords): for keyword in keywords: text = text.replace(keyword, f'<span style="background-color: yellow">{keyword}</span>') return text ``` 在这个函数中，`text` 参数是要进行高亮处理的字符串，`keywords` 参数是关键词列表。函数会遍历 `keywords` 列表中的每个关键词，并使用 HTML 标签 `<span>` 和 `style` 属性来给关键词添加高亮样式。最后返回替换后的字符串。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值