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,一经查实,立即删除!

相关文章

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…

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

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

Golang gorm 一对一关系

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

纯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;或者将数据从主…

【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; ♠ 一级…

腾讯云微服务平台 TSF 异地多活单元化能力重磅升级

导语 2023腾讯全球数字生态大会已于9月7-8日完美落幕&#xff0c;40专场活动展示了腾讯最新的前沿技术、核心产品、解决方案。 微服务与消息队列专场&#xff0c;腾讯云微服务平台 TSF 产品经理张桢带来了《腾讯云微服务平台 TSF 异地多活单元化能力重磅升级》的精彩演讲。本…

Unity的配置文件在安卓路径下使用的方法

Unity的配置文件在安卓路径下使用的方法 前言 之前我做过的很多使用配置文件的Unity项目&#xff0c;后面的有些项目也有在安卓路径下读取json文件的需求。这几天有个需求是获取在安卓路径下配置文件里的数据&#xff0c;我在网上查了一些案例&#xff0c;简单实现了这个需求…

内网穿透的应用-Cloudreve搭建云盘系统,并实现随时访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

小样本目标检测:ECEA: Extensible Co-Existing Attention for Few-Shot Object Detection

论文作者&#xff1a;Zhimeng Xin,Tianxu Wu,Shiming Chen,Yixiong Zou,Ling Shao,Xinge You 作者单位&#xff1a;Huazhong University of Science and Technology; UCAS-Terminus AI Lab 论文链接&#xff1a;http://arxiv.org/abs/2309.08196v1 内容简介&#xff1a; 1&…

C++const关键字

本文旨在讲解C中相关const关键字的详解&#xff0c;希望读完本篇文章&#xff0c;可以让诸位对C中的const关键字有更深一步的认识&#xff01; 在C中&#xff0c;若想让类中某一个变量不再改变&#xff0c;可以使用const关键字进行修饰&#xff0c;让数据不被修改&#xff0c;使…

2023-09-19 LeetCode每日一题(打家劫舍 IV)

2023-09-19每日一题 一、题目编号 2560. 打家劫舍 IV二、题目链接 点击跳转到题目位置 三、题目描述 沿街有一排连续的房屋。每间房屋内都藏有一定的现金。现在有一位小偷计划从这些房屋中窃取现金。 由于相邻的房屋装有相互连通的防盗系统&#xff0c;所以小偷 不会窃取…

xp 系统 安装 python 2.7 ide pip

1 下载python http://www.python.org/ftp/python/ python-2.7.2.msi 安装完需要设置环境变量 2 下载 setuptools setuptools-0.6c11.win32-py2.7.exe https://pypi.tuna.tsinghua.edu.cn/simple/setuptools/ 3 下载 pip &#xff0c;python 2.7 最高支持 pip 20.3.4 https:…