js正则实现关键字高量-替换html标签的text文本内容的指定值

ゝ一纸荒年。 2022-11-13 10:24 46阅读 0赞

### 一、背景 ###

> 在开发中，有个需求是关键字高量显示，如果只是存文本形式就很简单，但是我的数据是自定义的模板，一大段html代码，这个时候需要把文本内容的指定关键字找出来，替换成加红色后的样式。
> 
> 网上的代码好多都是直接把html标签清空返回，得到的只是text内容，我的是必须包含html标签，只替换内容
> 
> 关键点：html标签的text内容的指定值

### 二、效果展示： ###

原始效果：![20210326151633201.png][]                        关键字高量显示：![20210326151719620.png][]

### 三、实现代码 ###

思路：在html标签中找出text文本内容，在替换。

正则表达式(关键)：

const reg1=new RegExp("(?<=>).+(?=<)","g")

正则解释：开区间形式(>，<)，找出以 > 开头，< 结尾，并且不包含 > 和 < 之间的内容。

代码实现：

/**
     * 关键字高量
     * @param val 值(html标签)
     * @param keyword 关键字
     * @returns html标签
     */
    const brightenKeyword = function(val, keyword) {
      const reg1=new RegExp("(?<=>).+(?=<)","g")
      if (val) {
        return val.replaceAll(reg1, function (me){
          return me.replaceAll(keyword,`<span style="color: red;">${keyword}</span>`)
        });
      }
    }

[20210326151633201.png]: https://img-blog.csdnimg.cn/20210326151633201.png
[20210326151719620.png]: /images/20221022/38e138533da54e678d0c86c3e3948ff5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 正则替换

java正则表达式替换一段字符串 Java正则表达式.\(from.\)$替换成selectcount(\)$1 完整的Java替换程序如下 publicclassA

绝地灬酷狼/ 2023年09月25日 11:13/ 0 赞/ 88 阅读

相关 js 替换text() 文本内容

<h1 id="word">hello world</h1> // 替换代码 $("word").innerHTML = "xxx" 我这里的情景有

小鱼儿/ 2023年06月06日 08:14/ 0 赞/ 68 阅读

相关 JS利用正则表达式替换字符串中的内容

[JS正则表达式完整教程（略长）][JS] //从字符串'Is this all there is'中剪去'is': var str='Is this

逃离我推掉我的手/ 2023年05月30日 03:55/ 0 赞/ 36 阅读

相关 js正则实现关键字高量-替换html标签的text文本内容的指定值

一、背景 > 在开发中，有个需求是关键字高量显示，如果只是存文本形式就很简单，但是我的数据是自定义的模板，一大段html代码，这个时候需要把文本内容的指定关键字找出来，替

ゝ一纸荒年。/ 2022年11月13日 10:24/ 0 赞/ 47 阅读

相关 js正则表达式 html,Javascript正则表达式替换html属性中的文本NOT

HTML太复杂,无法用正则表达式可靠地解析. 如果你想要做这个客户端,你可以创建一个文档片段和/或断开的DOM节点(这两个都不显示在任何地方),并用HTML字符串初始化,然后

我就是我/ 2022年10月05日 11:59/ 0 赞/ 239 阅读

相关前端js实现正则表情包内容替换

表情包实现 > 思路：通过全局正则针对文本内容走查，匹配到\[嘿哈\]文本表情包，通过创建div或者img标签，包裹将文本表情包替换成我们表情包的地址链接。 /

快来打我*/ 2022年09月10日 13:20/ 0 赞/ 252 阅读

相关 JS正则替换掉小括号及内容

正则表达式：\\ ( \[ ^ \\ ) \] \ \\ ) JS代码： var str="hello(world)"; var nstr = str.re

本是古典何须时尚/ 2022年08月02日 12:57/ 0 赞/ 198 阅读

相关 js如何用正则获取a标签的内容

<script type="text/javascript"> function pp(){ var re=/<a[^>]hre

桃扇骨/ 2022年02月26日 07:44/ 0 赞/ 793 阅读

相关 js 去除html标签正则表达式

var b="<img src=''">12314</img>"; var reg = /<\\/?.+?>/g; b.replace(/<\\/?.+?>/g,"");=

╰半夏微凉°/ 2022年02月03日 03:43/ 0 赞/ 310 阅读

相关使用JS语句动态替换HTML标签内容

在HTML页面中难免需要动态替换一些标签里面的内容。如： html: //需要替换的标签 <p>ABC</p> <sc

逃离我推掉我的手/ 2021年09月24日 01:02/ 0 赞/ 990 阅读