vue3+TS前端JS实现 搜索关键词变红

起初在网上搜索获得的处理方式大都是类似这种:

但是实际使用中发现,对于汉字和数字是没有问题的,但是如果有字母就会出现问题。

1.只有汉字和数字的时候:匹配正常。

2.当有字母的时候:异常替换。

原因:第二次判断的时候,替换的html代码里面的字母也做了识别和标红替换

最后做了调整改用另一种方式,针对单字匹配和字符串匹配两种处理:

展示:

<li v-html="brightenKeyword('123abcd张三李四')"></li>

处理:

 const brightenKeyword = (contentText) => {//单字匹配时将文字标红let res = contentText;if (searchKey.value == '') {return res;} else {let wordsArray = contentText.split('');for (var i = 0; i < wordsArray.length; i++) {if (searchKey.value.includes(wordsArray[i])) {wordsArray[i] = "<span style='color: red;'>" + wordsArray[i] + '</span>';}}res = wordsArray.join('');return res;}};// const brightenKeyword = (contentText) => {//   // 字符串整串匹配时:仅需要当前方法//   let res = contentText; //res的初始值是不带任何红色格式的//   const Reg = new RegExp(searchKey.value, 'g');//   res = contentText.replaceAll(Reg, `<span style="color: red;">${searchKey.value}</span>`);//   return res;// };

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

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

相关文章

[sqoop]hive3.1.2 hadoop3.1.1安装sqoop1.4.7

参考: Hadoop3.2.4Hive3.1.2sqoop1.4.7安装部署_hadoop sqoop安装_alicely07的博客-CSDN博客 一、安装 1、解压 tar -zxvf sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz -C /home/data_warehouse/module mv sqoop-1.4.7.bin__hadoop-2.6.0 sqoop-1.4.72、配置文件 sqoop-env.s…

【记录】实现从Linux下载下载文件(文件导出功能)并记录过程产生的BUG问题。

前言 导出功能的实现&#xff0c;主要记录总结导出过程中出现的一些问题。 代码实现导出功能 public R templateDown(HttpServletResponse response) {String fileName "template.xlsx";// 清空responseresponse.reset();response.setCharacterEncoding("UTF…

TuyaLink 快速入门教程

通过本入门教程&#xff0c;大家能了解到如何在涂鸦 IoT 开发平台上使用 TuyaLink 完成智能设备接入。并通过 Java 程序&#xff0c;在 IntelliJ IDEA 中使用 TuyaLink 的 GitHub Demo 工程&#xff0c;对一个电工开关设备&#xff0c;实现基本的数据上报下发功能。 准备工作 …

测试与FastAPI应用数据之间的差异

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 当使用两个不同的异步会话来测试FastAPI应用程序与数据库的连接时&#xff0c;可能会出现以下错误&#xff1a; 在测试中&#xff0c;在数据库中创建了一个对象&#x…

在vscode中做实验出现的bug......

1、python如何调用opencv中的saliency模块 如果你已经安装了opencv-python的库&#xff0c;但是调用cv2.saliency方法时出现了如下的报错&#xff1a; module ‘cv2.saliency’ has no attribute ‘StaticSaliencySpectralResidual_create’ 这时你只需要卸载opencv-python库&a…

python常用命令

文本包含 在Python中&#xff0c;判断一个文本是否包含在另一个文本中可以通过多种方式完成。以下是一些常见方法&#xff1a; 使用 in 关键字: text "Hello, world!" substring "world" if substring in text:print(f"{substring} is in {text}…

QT记事本+登陆界面的简单实现

主体头文件 #ifndef JSB_H #define JSB_H#include <QMainWindow> #include <QMenuBar>//菜单栏 #include <QToolBar>//工具栏 #include <QStatusBar>//状态栏 #include <QTextEdit>//文本 #include <QLabel>//标签 #include <QDebug&g…

chatgpt 优秀项目

chagpt token 获取&#xff1a;点击即可 一、pandala 项目 仓库地址&#xff1a;pandora docker 部署方案 拉取镜像 docker pull pengzhile/pandora本地启动镜像 docker run -d --name chatgpt-e PANDORA_ACCESS_TOKEN<access_token> -e PANDORA_SERVER0.0.0.0:<p…

Golang gorm 一对一关系

一对一关系 一对一关系比较少&#xff0c;一般用于表的扩展例如一张用户表&#xff0c;有很多字段那么就可以把它拆分为两张表&#xff0c;常用的字段放主表&#xff0c;不常用的字段放详情表。 针对用户表来说可以通过user去点出userinfo。 创建表和插入数据 package mainimp…

MySQL 清空表 截断表

清空表&#xff1a;delete from users&#xff1b; 清空表只是清空表中的逻辑数据&#xff0c;但是物理数据不清除&#xff0c;如主键值、索引等不被清除&#xff0c;还是原来的值。 截断表&#xff1a;truncate table users&#xff1b; 截断表可以用于删除表中 的所有数据…

纯js实现html指定页面导出word

因为最近做了范文网站需要&#xff0c;所以要下载为word文档&#xff0c;如果php进行处理&#xff0c;很吃后台服务器&#xff0c;所以想用前端进行实现。查询github发现&#xff0c;确实有这方面的插件。 js导出word文档所需要的两个插件&#xff1a; FileSaver.js jquery.w…

【AI视野·今日NLP 自然语言处理论文速览 第三十六期】Tue, 19 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 19 Sep 2023 (showing first 100 of 106 entries) Totally 106 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Speaker attribution in German parliamentary debates with QLoRA-ada…

如何理解高效IO

目录 前言 1.如何理解高效的IO 2.五种IO模型 3.非阻塞IO 4.非阻塞代码编写 总结 前言 哈喽&#xff0c;很高兴和大家见面&#xff01;今天我们要介绍的关于IO的话题&#xff0c;在计算机中IO是非常常规的操作&#xff0c;例如将数据显示到外设&#xff0c;或者将数据从主…

微服务引擎

微服务引擎&#xff0c;MSE_微服务引擎 MSE-阿里云帮助中心 一、什么是微服务引擎MSE 微服务引擎MSE&#xff08;Microservices Engine&#xff09;是一个面向业界主流开源微服务生态的一站式微服务平台&#xff0c;提供注册配置中心&#xff08;原生支持Nacos/ZooKeeper/Eur…

【LeetCode75】第五十九题 第N个泰波那契数

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目顾名思义&#xff0c;让我们求出第N个泰波那契数&#xff0c;也就是除了开头三个数之外&#xff0c;第四个数开始就是等于前三个数之…

基于 Alpine 环境构建 aspnetcore6-runtime 的 Docker 镜像

关于 Alpine Linux 此处就不再过多讲述&#xff0c;请自行查看相关文档。 .NET 支持的体系结构 下表列出了当前支持的 .NET 体系结构以及支持它们的 Alpine 版本。 这些版本在 .NET 到达支持终止日期或 Alpine 的体系结构受支持之前仍受支持。请注意&#xff0c;Microsoft 仅正…

Jenkins+Gitee+Docker+Ruoyi项目前后端分离部署

前言 描述&#xff1a;本文主要是用来记录 如何用标题上的技术&#xff0c;部署到云服务器上通过ip正常访问。 一、总览 1.1、Docker做的事 拉取 mysql 镜像拉取 redis 镜像拉取 jdk 镜像拉取 nginx 镜像 解释说明&#xff1a;前端项目的打包文件放在 nginx容器运行。后端…

PWMADC重要参数

频率的计算 1、 ARR&#xff08;TIM_Period&#xff09; 是计数值&#xff1b; 2、 PSC&#xff08;TIM_Prescaler&#xff09; 是预分频值。 频率计算公式&#xff1a;Fpwm 主频 / ((ARR1)*(PSC1))(单位&#xff1a;Hz) 占空比的计算 计算公式&#xff1a;duty circle TIM3…

部署大数据平台详细教程以及遇到的问题解答(ubuntu18.04下安装ambari2.7.3+HDP3.1.0)

节点准备: 我搭建的是3台,节点可以随意。建议最少是3台 hostname ip 角色 ubuntu-1804-1 172.21.73.53 从节点 ubuntu-1804-2 172.21.73.54 主节点 ubuntu-1804-3 172.21.73.55 从节点 一:关闭所有节点的防火墙 sudo ufw disable二:配置时钟同步NTP 所有节点安装ntp sud…

Lua学习笔记:探究package

前言 本篇在讲什么 理解Lua的package 本篇需要什么 对Lua语法有简单认知 对C语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级…