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

js高亮文本

高亮文本

const inputs = ["这是一个普通文本,包含关键字测试。",'<p style="font-size: 10px">这是一个<span>GVM</span> <strong>测试</strong>内容。</p>',
];const keywords = ["测试", "GVM"];
function highlightKeyword(inputContent, keyword) {if (!keyword) return inputContent; // 如果没有关键字,直接返回原始内容// 转义用户输入的关键字,避免正则表达式特殊字符冲突const escapeRegExp = (str) =>str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");// 创建匹配关键字的正则表达式const keywordRegex = new RegExp(`(${escapeRegExp(keyword)})`, "gi");// 判断是否为普通文本(没有 HTML 标签)const isPlainText = !/<[^>]+>/.test(inputContent);if (isPlainText) {// 普通文本处理return inputContent.replace(keywordRegex,'<span class="highlight">$1</span>');}// HTML 内容处理const parser = new DOMParser();const doc = parser.parseFromString(inputContent, "text/html");// 遍历节点,处理文本高亮function traverseNodes(node) {if (node.nodeType === Node.TEXT_NODE) {// 替换关键字为高亮的内容const parent = node.parentNode;const highlightedHTML = node.textContent.replace(keywordRegex,'<span class="highlight">$1</span>');// 用安全的 HTML 替换if (highlightedHTML !== node.textContent) {const temp = document.createElement("div");temp.innerHTML = highlightedHTML;while (temp.firstChild) {parent.insertBefore(temp.firstChild, node);}parent.removeChild(node);}} else if (node.nodeType === Node.ELEMENT_NODE) {// 递归处理子节点Array.from(node.childNodes).forEach(traverseNodes);}}traverseNodes(doc.body);// 返回处理后的 HTMLreturn doc.body.innerHTML;
}

相关文章:

js高亮文本

高亮文本 const inputs ["这是一个普通文本&#xff0c;包含关键字测试。",<p style"font-size: 10px">这是一个<span>GVM</span> <strong>测试</strong>内容。</p>, ];const keywords ["测试", "G…...

解决SpringBoot 健康检测接口 actuator/health 访问一直卡着,但 actuator/info等其他接口能正常访问的问题

背景 最近在做服务迁移&#xff0c;迁移完后的新服务&#xff0c;直接将pod的配置丢到新的K8S集群中&#xff0c;健康监测一直失败 Debug思路 先看日志&#xff0c;日志显示SpringBoot已成功启动&#xff0c;按理说不应该无法访问其/actuator/health接口 拉长健康监测延时时…...

KVM创建ubuntu20.04虚机,部署K8S,再克隆出二份,做为Worker节点加入集群,通过Helm创建2个Pod,让它们之间通过域名互访

KVM创建ubuntu20.04虚机,部署K8S,再克隆出二份,做为Worker节点加入集群,通过Helm创建2个Pod,让它们之间通过域名互访 一.背景二.操作步骤1.安装KVMA.在BIOS中开启VT-dB.修改grub,开启iommu在/etc/default/grub 中 GRUB_CMDLINE_LINUX行 添加 intel_iommuon iommupt重新创建引导…...

GaussDB中的Vacuum和Analyze

GaussDB中的Vacuum和Analyze 基本概念与区别手动Vacuum和Analyze查看Vacuum和Analyze记录Autovacuum配置参数 基本概念与区别 使用VACUUM、VACUUM FULL和ANALYZE命令定期对每个表进行维护&#xff0c;主要有以下原因&#xff1a; VACUUM FULL可回收已更新或已删除的数据所占据…...

IvorySQL 4.2 发布

IvorySQL 4.2 已于 2025 年 1 月 13 日正式发布。新版本全面支持 PostgreSQL 17.2&#xff0c;并修复了多项 bug。 增强功能 PostgreSQL 17.1 增强功能 确保当 RLS 应用于非顶级表引用时&#xff0c;缓存的计划会标记为依赖于调用角色使 libpq 在 SSL 或 GSS 协议协商期间丢…...

浅谈云计算20 | OpenStack管理模块(下)

OpenStack管理模块&#xff08;下&#xff09; 五、存储管理5.1 存储管理概述 5.2 架构设计5.2.1 Cinder块存储架构5.2.2 Swift对象存储架构 六、网络管理6.1 网络管理概述6.2 架构解析6.2.1 Neutron网络服务架构6.2.2 网络拓扑架构 6.3 原理与流程6.3.1 网络创建原理6.3.2 网络…...

去年社融增量超32万亿 货币信贷平稳增长-乐享数科

数据显示&#xff0c;2024年全年&#xff0c;社会融资规模增量为32.26万亿元&#xff1b;去年12月末&#xff0c;社会融资规模同比增长8.0%&#xff0c;广义货币供应量&#xff08;M_[2]&#xff09;同比增长7.3%&#xff0c;人民币贷款同比增长7.6%&#xff0c;增速相比上月有…...

STM32 HAL库函数入门指南:从原理到实践

1 STM32 HAL库概述 STM32 HAL(Hardware Abstraction Layer)库是ST公司专门为STM32系列微控制器开发的一套硬件抽象层函数库。它的核心设计理念是在应用层与硬件层之间建立一个抽象层&#xff0c;这个抽象层屏蔽了底层硬件的具体实现细节&#xff0c;为开发者提供了一套统一的、…...

React封装倒计时按钮

背景 在开发过程中&#xff0c;经常需要使用到倒计时的场景&#xff0c;当用户点击后&#xff0c;按钮进行倒计时&#xff0c;然后等待邮件或者短信发送&#xff0c;每次都写重复代码&#xff0c;会让代码显得臃肿&#xff0c;所以封装一个组件来减少耦合 创建一个倒计时组件…...

深入探究Linux树状目录结构

Linux 作为一款广泛使用的开源操作系统&#xff0c;其目录结构采用了树状设计&#xff0c;这种结构清晰、有条理&#xff0c;便于用户和系统进行文件管理与操作。 一、根目录&#xff08;/&#xff09; 根目录是整个 Linux 文件系统的起始点&#xff0c;就像一棵大树的根部&…...

Realsense相机驱动安装及其ROS通讯配置——机器人抓取系统基础系列(四)

文章目录 概要1 Realsense相机驱动安装Method1: 使用Intel服务器预编译包Method2: 使用ROS服务器预编译包Method3: 使用SDK源代码方法对比总结 2 Realsense-ROS通讯配置与使用2.1 Realsense-ROS包安装2.2 ROS节点启动 小结Reference 概要 本文首先阐述了Realsense相机驱动安装…...

linux安装nvm

下载命令 wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.tar.gz当前盘打开终端后的nvm文件夹中 mkdir -p /nvm/.nvm如果树根不够就用加sudo 解压文件 tar xvf v0.39.1.tar.gz输入pwd 确定当前文件完成路径 在当前文件中写入。bashrc文件及代码回车进入编辑…...

图论1-问题 C: 算法7-6:图的遍历——广度优先搜索

题目描述 广度优先搜索遍历类似于树的按层次遍历的过程。其过程为&#xff1a;假设从图中的某顶点v出发&#xff0c;在访问了v之后依次访问v的各个未曾被访问过的邻接点&#xff0c;然后分别从这些邻接点出发依次访问它们的邻接点&#xff0c;并使“先被访问的顶点的邻接点”先…...

基于 STM32 的多功能时间管理器项目

引言 在快节奏的生活中&#xff0c;时间管理显得尤为重要。本项目旨在通过 STM32 开发一个多功能时间管理器&#xff0c;功能包括计时器、闹钟和日历。用户可以方便地设置不同的提醒和计时任务&#xff0c;以更好地管理日常生活和工作。 项目名称 多功能时间管理器 环境准备 …...

Java工程结构:二方库依赖规约

文章目录 I jar 包分类一方库:二方库:三方库:II 专有名词GAV(GroupId、ArtifactId、Version):Maven 坐标III GAV 规则GroupId 格式ArtifactId 格式二方库版本号命名方式:主版本号.次版本号.修订号I jar 包分类 一方库: 本工程内部子项目模块依赖的库(jar 包)。 二…...

Django自带admin管理系统使用

1、admin路径地址 localhost:8000/admin 2、使用命令行创建超级管理员 python manage.py createsuperuser 之后按照提示一步一步往下走就好了。 3、修改管理员密码 python manage.py changepassword admin admin是超级管理员的账号 4、后台管理系统注册模型&#xff0c;…...

Jmeter 简单使用、生成测试报告(一)

一、下载Jmter 去官网下载&#xff0c;我下载的是apache-jmeter-5.6.3.zip&#xff0c;解压后就能用。 二、安装java环境 JMeter是基于Java开发的&#xff0c;运行JMeter需要Java环境。 1.下载JDK、安装Jdk 2.配置java环境变量 3.验证安装是否成功&#xff08;java -versio…...

手摸手实战前端项目CI CD

由于图片和格式解析问题&#xff0c;为了更好阅读体验可前往 阅读原文 CI/CD 是 持续集成&#xff08;Continuous Integration&#xff09; 和 持续交付/部署&#xff08;Continuous Delivery/Continuous Deployment&#xff09; 的缩写&#xff0c;是现代软件开发中的一种自动…...

【Elasticsearch】搜索类型介绍,以及使用SpringBoot实现,并展现给前端

Elasticsearch 提供了多种查询类型&#xff0c;每种查询类型适用于不同的搜索场景。以下是八种常见的 Elasticsearch 查询类型及其详细说明和示例。 1. Match Query 用途&#xff1a;用于全文搜索&#xff0c;会对输入的文本进行分词&#xff0c;并在索引中的字段中查找这些分…...

K8S中的Pod调度之亲和性调度

亲和性调度 亲和性调度是一种比硬性指定节点&#xff08;使用 nodeName 或 nodeSelector&#xff09;更灵活的调度策略&#xff0c;它允许定义一组规则&#xff0c;根据这些规则&#xff0c;调度器会尝试将 Pod 调度到最合适的节点上&#xff0c;但如果找不到完全匹配的节点&a…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...