当前位置: 首页 > news >正文

js 高亮文本中包含的关键词标红

在这里插入图片描述

在开发中,遇到需要将文本中包含的关键字高亮的情况,可以做以下处理。

<div class="title"v-html="highlightKeywords(item.title, state1.tags1.concat(state2.tags2).concat(state3.tags3))">
</div>
......
......
const highlightKeywords = (text, keywords) => {if (!text || !keywords.length) return text;const regex = new RegExp(keywords.map(keyword => `(${keyword})`).join('|'), 'gi');return text.replace(regex, (match) => `<span style="color: red;">${match}</span>`);
};
http://www.lryc.cn/news/492846.html

相关文章:

  • DVWA靶场——File Inclusion
  • Android Framework禁止弹出当前VOLTE不可用的提示窗口
  • OceanBase 大数据量导入(obloader)
  • w058基于web的美发门店管理系统
  • 实时数据开发 | checkpoints监控和调优
  • el-tree的使用及控制全选、反选、获取选中
  • 机器学习(二十五):决策树算法以及决策树和神经网络的对比
  • 新版布谷直播软件源码开发搭建功能更新明细
  • vue3 reactive响应式实现源码
  • git的使用(简洁版)
  • 使用命令行创建 Maven 项目
  • JVM_栈详解一
  • Linux 金仓数据库安装和使用
  • STM32笔记(串口IAP升级)
  • C++网络编程:select IO多路复用及TCP服务器开发
  • 部署 L2JMobius 天堂2芙蕾雅版本
  • C#开发合集
  • 鸿蒙面试 --- 性能优化
  • React的基础知识:Context
  • 微知-lspci访问到指定的PCIe设备的几种方式?(lspci -s bus;lspci -d devices)
  • 【Kubernetes 集群核心概念:Pod】pod生命周期介绍【五】
  • c++的虚继承说明、案例、代码
  • 小米PC电脑手机互联互通,小米妙享,小米电脑管家,老款小米笔记本怎么使用,其他品牌笔记本怎么使用,一分钟教会你
  • 介绍SSD硬盘
  • CMAKE常用命令详解
  • Vue3的通灵之术Teleport
  • ue5第三人称闯关游戏学习(一)
  • IIC 随机写+多次写 可以控制写几次
  • controller中的参数注解@Param @RequestParam和@RequestBody的不同
  • 手搓人工智能-最优化算法(1)最速梯度下降法,及推导过程