`
wktong
  • 浏览: 54592 次
社区版块
存档分类
最新评论

JS使用replace全局&忽略大小写替换CSS样式标签

阅读更多

项目要求,对ckEditor编辑器做了一个全局高亮/取消高亮指定文字的功能,主要是为了兼容了IE。

以下是取消高亮功能的实现。

 

源字段及可视化效果:

<p>
 没<span style="background-color: rgb(255,155,0)">的</span></p>
<p>
 ab非<span style="background-color: rgb(255,155,0)">的</span></p>
<p>
 AB破洞<span style="background-color: rgb(255,155,0)">的</span></p>


 

 

替换后字段及可视化效果:

<p>
 没的</p>
<p>
 ab非的</p>
<p>
 AB破洞的</p>


 

 

 

实现方法:

 

var keyWord = formPanel.getForm().findField('keyWord').getValue();
if(keyWord != ''){
	//获取编辑器上的的全部字符
	var ckBody = CKEDITOR.instances["appendixCont"].document.getBody();
	var allText = ckBody.getHtml()
	//先把BACKGROUND-COLOR: rgb(255,155,0)替换为空
	//第一次替换后剩余的样式即为<SPAN style="">***</SPAN>
	allText = allText.replace(/BACKGROUND-COLOR:\s*rgb\(255,155,0\)/ig, "");
	var regText = '<SPAN style="">' + keyWord + '</SPAN>';
	var regS = new RegExp(regText, "gi");
	//再替换剩余的字段
	allText = allText.replace(regS, keyWord);
	//重新把替换后的字符写入编辑器
	ckBody.setHtml(allText, true);
}

 

备注:

 

new RegExp(patternattributes);参数

参数 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 参数,抛出该异常。

 

  • 大小: 20 KB
  • 大小: 20 KB
分享到:
评论

相关推荐

    CSS加JS常用正则表达式

    5. **标志**:`g` 全局匹配,`i` 忽略大小写,`m` 多行模式。 6. **方法**:`test()` 检查字符串是否匹配,`match()` 返回匹配结果,`search()` 查找第一次出现的位置,`replace()` 替换匹配的部分,`split()` 使用...

    Replace Pioneer

    5. **自定义设置**:用户可以根据自己的需求自定义搜索和替换的参数,比如忽略大小写、匹配整词等。 6. **批量操作日志**:工具可能记录每一次批量处理的详细日志,便于用户追踪和回溯操作历史。 7. **易用性**:...

    搜索工具 Search and Replace

    3. **高级搜索选项**:除了基本的关键词搜索,"Search and Replace"还提供了诸如忽略大小写、全词匹配、正则表达式等高级搜索选项,满足了开发者对复杂查询的需求。 二、替换功能精讲 1. **批量替换**:在找到目标...

    jS 正则表达式实现关键字高亮显示

    例如,`new RegExp(keywords.join("|"), "gi")`将创建一个全局(g)和不区分大小写(i)的正则表达式。 4. **字符串替换** 使用`String.prototype.replace()`方法,结合新创建的正则表达式,我们可以找到文本中...

    Js高亮显示文本输入框.rar

    其中,`keyword`是需要高亮的词,`gi`标志表示全局(g)和不区分大小写(i)的匹配。 3. **遍历文本**: 使用JavaScript的`innerHTML`或`innerText`属性,以及`replace()`方法来遍历文本输入框的值,替换匹配项为...

    javascript 正则表达式教程

    2. `i`忽略大小写,使匹配不区分大小写。 3. `m`多行模式,`^`和`$`可以匹配每一行的开头和结尾。 六、模式修饰符 1. `u`Unicode模式,用于处理Unicode字符。 2. `y`粘贴模式,匹配时要求定位符必须与上一次匹配的...

    js 正则表达式实例(搜索字符高亮显示)

    `flags`是可选的,包括`g`(全局匹配,找到所有匹配项而非只找第一个)、`i`(忽略大小写)和`m`(多行模式,使`^`和`$`能匹配每一行的开始和结束)。 现在,假设我们已经有了一个字符串`content`,我们要搜索的...

    页面高亮搜索到的文字

    例如,`new RegExp(keyword, 'gi')`创建一个全局、不区分大小写的正则表达式,其中`keyword`是用户的搜索词。正则表达式`gi`标志代表全局匹配(g)和不区分大小写(i)。 3. **替换匹配到的文本**:使用`String....

    java script

    例如,使用`/pattern/gi`可以全局、不区分大小写地搜索字符串。 6. JavaScript提供了`RegExp`对象和字符串对象的`match()`, `test()`, `replace()`, `search()`等方法,配合正则表达式进行复杂的文本处理。例如,`...

    JavaScript笔记

    |--js中正则表达式语法:/正则表达式/[属性后缀]--其中属性后缀,g:全局匹配 i:忽略大小写(仅英文有效) 如果不适用模式匹配方式,将执行原文匹配 结果:如果正则表达式写错,也将执行原文匹配 12.Array笔试题...

    关键字加亮

    // 使用正则表达式,'gi'表示全局和不区分大小写匹配 result = result.replace(regex, '$&&lt;/span&gt;'); } return result; } var text = "这是一个关于'关键字加亮'的示例。"; var keywords = ["关键字", "加亮"];...

    jQuery关键词查找高亮显示代码.rar_jquery 搜索高亮

    `new RegExp(keyword, 'gi')`创建一个正则表达式,`'g'`表示全局匹配,`'i'`表示忽略大小写。匹配到的关键词被包裹在`&lt;span&gt;`标签内,`class="highlight"`使得我们可以通过CSS控制高亮样式。 最后,为了使高亮效果...

    搜索和替换

    此外,高级搜索通常还包括大小写敏感/不敏感、全词匹配、正则表达式等选项,以满足不同需求。 **替换功能**:替换功能是搜索功能的延伸,它不仅找到匹配的文本,还会将这些文本替换为用户指定的新内容。例如,在...

    JS关键字变色实现思路及代码

    在JavaScript中,我们可以使用类似的方法,但通过正则表达式`new RegExp(keyword, 'gi')`来实现全局(g)和不区分大小写(i)的匹配。 2. 用正则,CSS背景变色 对于更复杂的需求,我们可以使用正则表达式配合CSS来...

    页面关键字高亮实例

    正则表达式`new RegExp(keyword, 'gi')`用于全局搜索和不区分大小写匹配。`replace()`函数内部的回调函数将每个匹配项替换为带有`highlight`样式的`&lt;span&gt;`元素。 接下来,我们需要在HTML文件中应用这个函数。通常...

    网页常用的js小功能

    - `/pattern/flags`: 创建正则表达式,如`var regex = /hello/gi`,`g`表示全局匹配,`i`表示忽略大小写。 - `test()`: 测试字符串是否符合正则表达式,如`var isMatch = regex.test('Hello')`。 - `exec()`: 在...

    关键字飘红

    例如,`new RegExp(keyword, "gi")`创建了一个全局(g)和不区分大小写(i)的正则表达式,用于匹配关键词。 5. **数据绑定和框架**:在现代Web开发中,很多项目会使用如React、Vue或Angular等前端框架。这些框架...

    最全面的ajax技术手册

    例如,`/pattern/gi`表示一个全局、不区分大小写的正则表达式,可以用于`string.match`或`string.replace`等方法。 综上所述,这个“最全面的Ajax技术手册”涵盖了Web开发中的关键技术和工具,对于理解并熟练运用...

    jQuery自定义实时搜索插件支持突出显示.zip

    // 创建正则表达式,'gi'表示全局和不区分大小写 // 遍历需要高亮的元素,例如列表项 $('ul li').each(function() { var content = $(this).text(); // 获取原始文本 var highlightedContent = content....

    asp点击图片放大查看

    当用户点击图片时,JavaScript会创建一个新的大图元素,并将其插入到页面中,同时应用CSS样式,使图片看起来像是被放大并悬浮在原图上方,提供良好的视觉效果。 在压缩包中的"点击放大"文件可能包含以下内容:HTML...

Global site tag (gtag.js) - Google Analytics