js 改变匹配到的字符串的颜色

Posted SlightFly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 改变匹配到的字符串的颜色相关的知识,希望对你有一定的参考价值。

1、js判断是否存在,存在则替换 -- 缺点:只能替换第一个匹配的字符,如果存在多个,则对后面的无效

if(text.indexOf(this.searchText)>=0) {
    text = text.replace(this.searchText,"<span style=‘color:red;‘>" + this.searchText+"</span>");
}
return text;

 

2、正则匹配替换,,完美,,全部可以替换  ,,我的正则中使用了变量,g表示匹配全局,没有g则只匹配第一个,,

let res = new RegExp("("+this.searchText+")",g);
text = text.replace(res,"<span style=‘color:red;‘>" + this.searchText+"</span>");
return text;

 

巩固一下吧

RegExp 对象

1、直接量语法     ----------------------------/pattern/attributes

2、创建 RegExp 对象的语法:---------- new RegExp(pattern, attributes)

参数

参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。

返回值

一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 pattern 是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式,或 attributes 含有 "g"、"i" 和 "m" 之外的字符,抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象,但没有省略 attributes 参数,抛出该异常。

以上是关于js 改变匹配到的字符串的颜色的主要内容,如果未能解决你的问题,请参考以下文章

前端开发中最常用的JS代码片段

根据数字大小改变颜色js

js对象属性名驼峰式转下划线

如何将 vscode css 颜色选择器功能带入带有匹配颜色名称格式的字符串的 js 文件中?

js中.style.background无法改变背景颜色

jquery或者js,获取匹配字符串更换CSS样式