通过 replace() 和正则实现将文本中的所有数字颜色高亮

最新推荐文章于 2023-07-31 18:35:15 发布

原创最新推荐文章于 2023-07-31 18:35:15 发布 · 509 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

js 专栏收录该内容

67 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript的replace()方法来查找并替换字符串中的数字，以实现高亮显示的效果。在示例代码中，作者创建了一个名为numHandle的函数，该函数通过正则表达式匹配所有数字，并将它们包裹在带有颜色样式的span标签中，从而达到突出显示的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的效果：

用到的知识点：

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

repalce（ a, b ）必须传两个值，其中a 是要替换的文本，或者满足条件的正则。

b是要替换成的文本或内容。

其中b的值可为：

详见：JavaScript replace() 方法

具体代码：

        numHandle(){ // 数字处理
            var regex = new RegExp("\\d",'g')
            console.log(regex);
            var content='完成设备巡检15件，帐卡一致9件，有帐无物3件，有物无帐2件，帐卡匹配错误1件，现场实物ID附码率80%。'
                    // replace中的 $& 为匹配到的元素，
                    // new RegExp('\\d|\\%','gm') \\d表示匹配数组，| 表示或 ，\\%表示匹配% ，g 表示全局匹配，m表示全局的循环
            var a = content.replace(new RegExp('\\d','gm'),`<span style="color:red">${'$&'}</span>`)
            console.log(a);
          
        },