1、replace基本用法
var str = "script s";
//只会将第一个匹配到的s替换成A
console.log(str.replace("s","A"));
//只会将匹配到的第一个s替换成A。因为没有在全局范围内查找
console.log(str.replace(/s/,"A"));
//全局替换。 所有s都被替换成了A
console.log(str.replace(/s/g,"A"));
1.1、替换指定标签
var str = '<div class=”active” id="btn">提交</div>';
let result = str.replace(/<div>/g, '<h4>');
result = result.replace(/<\/div>/g, '</h4>');
1.2、替换字符串转义符
// 假设你有一段文本，有一些转义符，直接以节点赋值，可能会不兼容
var str = '<div id=\"btn\">提交</div>'
console.log(str.replace(/\\/g, '')) // '<div id="btn">提交</div>'
1.3、替换图片src链接路径
// 假设你有一段文本，里面包含图片标签
var text = '<img src="old_image_path.jpg" alt="example">';
// 使用正则表达式匹配 src 属性
var newText = text.replace(/src="([^"]*)"/g, function(match, capture) {
console.log('原 src:', capture); // 输出原始 src 值
return 'src="new_image_path.jpg"'; // 返回新的 src 值
});
console.log(newText); // 输出替换后的文本
1.4、替换字符关键字高亮显示
/*将字符串中的"java"用红色字体显示*/
var str = "Netscape在最初将其脚本语言命名为LiveScript，最初受java启发而开始设计的。";
str.replace(/java/g,'<span style="color: red;">java</span>')
1.5、替换特定两字符之间的内容
方案一：常量写法
// 替换{{666}}
var text = '<div>{{666}}</div>';
var newText = text.replace(/{{(.*?)}}/g, '我是替换的文字');
console.log(newText); // '<div>我是替换的文字</div>';
方案二：变量写法 (好处是可以封装成函数，根据不同的标识来替换内容)
// 替换{{666}}
var text = '<div>{{666}}</div>';
var start = '{{';
var end = '}}';
var regex = new RegExp(start + '(.*?)' + end, 'g');
var newText = text.replace(regex, '我是替换的文字');
console.log(newText); // '<div>我是替换的文字</div>';
2、replace高级用法之 ---- $i
如下方法（正则replace约定了一个特殊标记符）
2.1、简单的$i用法
| 1 2 3 4 5 6 7 8 | <script>
/*要求：将字符串中的双引号用"-"代替*/
var str = '"a", "b"';
console.log(str.replace(/"[^"]*"/g,"-$1-"));
//输出结果为：-$1-, -$1-
/*解释：$1就是前面正则(/"[^"]*"/g)所匹配到的每一个字符。*/
</script>
|
2.2、$i与分组结合使用
| 1 2 3 4 5 6 7 8 | <script>
/*要求：将下面字符串替换成：javascript is fn.it is a good script language*/
var str = "javascript is a good script language";
console.log(str.replace(/(javascript)\s*(is)/g,"$1 $2 fn.it $2"));
/*解释：每一对括号都代表一个分组，从左往右分别代表第一个分组，第二个分组...；如上"*(javascript)"为第一个分组，
"(is)"为第二个分组。$1就代表第一个分组匹配的内容，$2就代表第二个分组匹配的内容，依此类推...*/
</script>
|
2.3、$i与分组结合使用----关键字高亮显示
当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了，那么这种效果用JavaScript能否显示呢？答案是可以的，使用replace()很轻松就搞定了。
| 1 2 3 4 5 6 7 8 9 10 11 | <script>
/*要求：将下列字符串中的"java"用红色字体显示*/
var str = "Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。
但JavaScript的主要设计原则源自Self和Scheme。";
document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>'));
</script>
|
2.4、反向分组----分组的反向引用
在正则中，当我们需要匹配两个或多个连续的相同的字符的时候，就需要用到反向引用了，查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式，这里再介绍另一种反向分组。
| 1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript">
/* /ab(cd)\1e/ 这里的 \1 表示把第1个分组的内容重复一遍*/
console.log(/ab(cd)\1e/.test("abcde"));//false
console.log(/ab(cd)\1e/.test("abcdcde"));//true
/*要求：将下列字符串中相领重复的部分删除掉"*/
var str = "abbcccdeee";
var newStr = str.replace(/(\w)\1+/g,"$1");
console.log(newStr); // abcde
</script>
|
3、replace高级用法之参数二为函数
replace函数的第二个参数不仅可以是一个字符，还可以是一个函数！
3.1、参数二为函数之参数详解
| 1 2 3 4 5 6 7 8 9 10 11 12 | <script>
var str = "bbabc";
var newStr = str.replace(/(a)(b)/g,function (){
console.log(arguments);//["ab", "a", "b", 2, "bbabc"]
/*参数依次为：
1、整个正则表达式所匹配到的字符串----"ab"
2、第一个分组匹配到的字符串，第二个分组所匹配到的字符串....依次类推一直 到最后一个分组----"a，b"
3、此次匹配在源字符串中的下标，返回的是第一个匹配到的字符的下标----2
4、源字符串----"bbabc"
*/
})
</script>
|
3.2、参数二为函数之首字母大写案例
| 1 2 3 4 5 6 7 8 9 10 | <script>
/*要求：将下列字符串中的所有首字母大写*/
var str = "Tomorrow may not be better, but better tomorrow will surely come!";
var newStr = str.replace(/\b\w+\b/gi,function (matchStr){
console.log(matchStr);//匹配到的字符
return matchStr.substr(0,1).toUpperCase() + matchStr.substr(1);
});
console.log(newStr);
</script>
|
3.3、参数二为函数之绑定数据----artTemplate模板核心
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <h1>周星驰喜剧电影：</h1>
<div id="content"></div>
<script type="text/javascript">
var data = {
name: "功夫",
protagonist: "周星驰"
},
domStr = '<div><span>名称：</span><span>{{name}}</span></div><div><span>导演：</span><span>{{protagonist}}</span> </div>';
document.getElementById("content").innerHTML = formatString(domStr,data);
/*绑定数据的核心就是使用正则进行匹配*/
function formatString(str,data){
return str.replace(/{{(\w+)}}/g,function (matchingStr,group1){
return data[group1];
});
}
</script>
|
4、replace高级用法之获取与正则表达式匹配的文本
4.1、replace高级用法之获取与正则表达式进行匹配的源字符串
| 1 2 3 4 5 6 | <script>
var str = "i am a good man";
var newStr = str.replace(/good/g,"$&");
console.log(newStr);//结果：输出i am a good man
/*解释：在这里”$&”就是与正则表达式进行匹配的那个源字符串*/
</script>
|
4.2、replace高级用法之获取正则表达式匹配到的字符
| 1 2 3 4 5 6 7 8 | <script>
/*要求：将"i am a good man"替换成"i am a good-gond man" */
var str = "i am a good man";
var newStr = str.replace(/good/g,"$&-$&");
console.log(newStr);
/*解释：在这里”$&”可以获取到前面正则表达式匹配的内容，如上面的”$&”就是正则表达式匹配到的”good”*/
</script>
|
5、replace高级用法之获取正则匹配的左边的字符
| 1 2 3 4 5 6 7 8 | <script>
/*要求：将下列字符串替换成"java-java is a good script"*/
var str = "javascript is a good script";
var newStr = str.replace(/script/,"-$`");
console.log(newStr)
/*解释："$`"获取的是正则左边的内容，如上正则中"script"字符前面的是"java"，"-$`"就是"-java"，"-$`"会把script替换掉。*/
</script>
|
6、replace高级用法之获取正则匹配的右边的字符
| 1 2 3 4 5 6 7 8 9 | <script>
/*要求：将下列字符替换成"java is a good language!it is a good script is a good script"*/
var str = "javascript is a good script";
var newStr = str.replace(/script/," is a good language!it$'");
console.log(newStr)
/*解释："$'"获取的就是str右边的内容，如上正则中"$'"就是" is a good script"。
" is a good language!it$'"会把正则匹配到的"script"替换掉*/
</script>
|
扫一扫
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
