[javascript] 正则替换内容并变色

最新推荐文章于 2022-08-15 14:03:48 发布
最新推荐文章于 2022-08-15 14:03:48 发布
阅读量1k 收藏 3
点赞数
文章标签： 正则表达式 js 字符串 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34450741/article/details/106423368
版权

彩蛋：后台管理系统一站式平台模板

vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0

1、效果

在这里插入图片描述

2、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则替换内容并变色</title>
	</head>
	<body>

		<div>
			<p>1、普通字符串：</p>
			<div>
				原数据：<span id="str11"></span>
			</div>
			<div>
				转数据：<span id="str12"></span>
			</div>
		</div>

		<div>
			<p>2、带中括号字符串：</p>
			<div>
				原数据：<span id="str21"></span>
			</div>
			<div>
				转数据：<span id="str22"></span>
			</div>
		</div>

		<script>
			// 1、普通字符串
			var str1 = '12312dsdddda211231'
			var keyWord = '12';
			var newStr1 = str1.replace(new RegExp(keyWord, 'gi'), `<span style='color:red'>${keyWord}</span>`)

			document.getElementById('str11').innerHTML = str1
			document.getElementById('str12').innerHTML = newStr1

			// 2、带中括号字符串(括号方法雷同)
			var str2 = `abdssagag[00111]dkagagalhgn[00222]xxxal,,asd[aaaabb]dkalgn(12312)'233'"3333"`;
			var newStr2 = str2.replace(/\[(.+?)\]/g, `<span style='color:red'>[$1]</span>`);

			document.getElementById('str21').innerHTML = str2
			document.getElementById('str22').innerHTML = newStr2
		</script>
	</body>
</html>
lyt-top
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js_正则表达式全攻略
05-20
正则表达式可以让自己的源码更加的简练易懂,掌握一门好技术可以给自己增添机会的筹码
JS关键字变色实现思路及代码
10-27
在JavaScript中实现关键字变色或高亮显示是一个常见的需求，特别是在网页中搜索或者突出显示特定内容时。这里我们将探讨两种实现方法，一种是通过简单的字符串替换，另一种是使用正则表达式和CSS来达到更灵活的效果...
用正则表达式使字符串中的某个字体变色
m0_49940462的博客
06-09 1024
要求： 使用正则表达式，让页面中这段字符串 “我爱你哈哈爱你” 中的”爱“字全变为红色。 结果：
关于通过JS变更文本框内文字与颜色
m0_46150601的博客
05-18 2301
新人程序猿，望大家指导，轻喷，谢谢！ (因为公司内外网隔离，无法复制粘贴，所有代码都是手敲的) 曾经有个文本框 <input id="inputId" style="line-height: 22px;" class='easyui-validatebox' > 想要在文本框内实现输入提示的功能 最开始想用placeholder去实现，但发现easyui好像不支持placeholder，所以就自己用js去实现，好在也不复杂。 在htm里添加了onclick和onblur方法调用，变成如下： &
JS中使用正则表达式
weixin_44440165的博客
02-21 297
在JS中创建正则对象有两种方法： 字面量创建（推荐） 内置对象RegExp创建 JS正则对象常用的方法： test(str):判断字符串中是否具有指定模式的子串，返回结果是一个布尔类型的值。 exec(str):返回一个数组，第一个元素是匹配的字符串，后面依次是子表达式的值。 JS字符串的方法中使用正则表达式： search:返回匹配的起始位置 replace:替换字符串中...
程序天下:JavaScript实例自学手册
07-08
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
模糊搜索关键词改变.zip
08-12
- `JavaScript` 的 `String.prototype.replace()` 方法可以结合正则表达式来查找和替换匹配的关键词。 4. **性能优化**： - **分页加载**：当搜索结果过多时，可以采用分页显示，减少一次性处理的数据量。 - **...
jQuery+PHP+Mysql实现输入自动完成提示的功能-关键字加变色
05-03
例如，可以将关键词设为红色，使用正则表达式替换方法找到关键词并添加CSS类。同时，为了首字母大写，可以使用JavaScript的`toUpperCase()`方法。 5. **搜索结果数组添加字段**：在PHP处理查询结果时，除了基础信息...
使用js使检索的关键字变色
花满天下的博客
07-08 4953
$(function(){ //关键字变色 var searchText = $("#searching").text();//获取你输入的关键字 var regExp = new RegExp(searchText, "g");//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了 $(".h3").e...
正则表达式替换字符串的一个技巧 －－－ 可用于关键词变红色
weixin_30262255的博客
04-04 332
前两天碰到一个问题，就是想把一段文本中满足正则表达式匹配的所有项都用红色标记，醒目显示。 如果，要匹配的是一个固定的关键词，replace方法就可以轻松解决了，如果是多个匹配项，或者干脆是正则表达式匹配，那就只能想其他的办法了。 于是，看了js的正则帮助文档，使用如下的方法解决了问题。 js关键语句如下： var origstr = "";//原始字符串 var reg = n...
js 改变匹配到的字符串的颜色 — replace
Jana Jing的分享
06-28 3559
1、js判断是否存在，存在则替换 -- 缺点：只能替换第一个匹配的字符，如果存在多个，则对后面的无效 if(text.indexOf(this.searchText)>=0) { text = text.replace(this.searchText,"<span style='color:red;'>" + this.searchText+"</span>"); } return text; 2、正则匹配替换，，完美，，全部可以替换 ，，我的正则中使用了变量.
改变placeholder里的样式；重写ant design中的icon；正则表达式匹配搜索关键字中的字，并且给匹配的颜色标红；button按钮进行文件下载；
m0_51578916的博客
08-15 285
1.2.重写ant design中的icon3.使用正则表达式匹配搜索关键字中的字，并且给匹配的颜色标红4.button按钮进行文件下载。
关键词变红--正则表达式
过客的博客
04-09 3207
搜索 就是我在搜索框里面就是个关键字然后点击搜索然后它会出现对应的标题内容标题内容这样的，可是下去然后我需要，如果说我这个关键字的标题或者内容中有出现我就把它显示出来，但是我就是要做关键字然后在标题或者说内容这里，如果说出现了这个，关键是就把这关键字标红； var str = $('.text').html(); $('
iOS Regex匹配关键字并修改颜色
dianchidu6913的博客
05-11 356
引入第三方框架RegexKitLite /** * 根据传入的文字返回一个符合规则的富文本 * * @param title 匹配的文字 * * @return 创建的富文本 */ -(NSAttributedString *)titleLabText:(NSString *)title { NSMutableAttributedString *attribut...
js利用replace()方法让搜索的关键字，变成红色
qq_21896051的博客
08-21 2923
$(".finKey").each(function () { var str=$(this).text(); // alert(str); var substr="/${param.searchValue}/g"; var replaceStr=str.replace(eval(substr),"<span style='color:red;font-weight:bo...
通过js正则表达式替换标签背景
hh_xlp的专栏
04-27 836
function choose_img(url){   var area = parent.document.getElementById("EditorFrame").contentWindow.document;   if(area.getElementById('backimg') == null){    var node = document.createElement('div'
JavaScript的replace方法与正则表达式结合应用讲解
dream_like的专栏
07-08 517
　　大家好！！把javascript中replace方法讲解一下，如果讲得不对或不合理是情理之中的事，因为我不是老鸟，也不是菜鸟，我也不知道我当底是什么鸟？？呵~~　　replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(str
JavaScript正则替换
最新发布
05-23
在 JavaScript 中，可以使用正则表达式进行字符串替换。下面是一个简单的例子： ```javascript let str = "Hello, world!"; let newStr = str.replace(/world/, "JavaScript"); console.log(newStr); // 输出 "Hello, JavaScript!" ``` 上面的代码中，我们使用 `replace` 方法将字符串中的 `"world"` 替换为 `"JavaScript"`，并将结果赋值给 `newStr` 变量。其中，正则表达式 `/world/` 用来匹配字符串中的 `"world"`。 除了字符串，我们还可以使用函数作为第二个参数来进行替换。例如： ```javascript let str = "hello, world!"; let newStr = str.replace(/(\w+)/, function(match, p1) { return p1.toUpperCase(); }); console.log(newStr); // 输出 "Hello, world!" ``` 上面的代码中，我们使用正则表达式 `/(\w+)/` 匹配字符串中的第一个单词，并使用一个函数将其转换为大写形式。 总之，在 JavaScript 中，使用正则表达式进行字符串替换非常方便和灵活，可以实现各种各样的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值