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>
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
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>
