js replace用法实例详解

发布时间:2020-07-26编辑:脚本学堂
本文介绍了js replace方法的用法,分享了一些js replace方法的实例,replace方法用于字符串的替换,希望本文可以帮助大家掌握js中replace方法的用法,有需要的朋友参考下。

replace方法
语法:stringObj.replace(rgExp, replaceText)
其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。

首先,分享一个js replace的小例子。
 

复制代码 代码示例:
<script language="javascript">  
var stringObj="终古人民共和国,终古人民";  
//替换错别字“终古”为“中国”  
//并返回替换后的新字符  
//原字符串stringObj的值没有改变  
var newstr=stringObj.replace("终古","中国");  
alert(newstr);  
</script> 
终古”为“中国”
的值没有改变
中国");

从以上例子,可以看出第二个错别字“终古”并没有被替换成“中国”,可以执行二次replace方法把第二个错别字“终古”也替换掉。

改进后的js replace替换方法,如下:
 

复制代码 代码示例:
<script language="javascript">  
var stringObj="终古人民共和国,终古人民";  
//替换错别字“终古”为“中国”  
//并返回替换后的新字符  
//原字符串stringObj的值没有改变  
var newstr=stringObj.replace("终古","中国");  
newstr=newstr.replace("终古","中国");  
alert(newstr);  
</script> 
终古”为“中国”
的值没有改变
中国");
中国");

如果有N的N次方个错别字,是不是也要执行N的N次方replace方法来替换掉错别字呢?
有了正则表达式之后不用一个错别字要执行一次replace方法。

再次改进后的js replace方法,如下:
 

复制代码 代码示例:
<script language="javascript">  
var reg=new RegExp("终古","g"); //创建正则RegExp对象  
var stringObj="终古人民共和国,终古人民";  
var newstr=stringObj.replace(reg,"中国");  
alert(newstr);  
</script> 

创建正则RegExp对象

以上介绍的是replace方法最简单的应用。

下面开始js replace用法的进阶教程,难度有所加大,各位提起精神啦。

在一些网站上搜索文章的时候,会发现这么一个现象,就是搜索的关键字会高亮改变颜色显示出来??这是怎么实现的呢?
可以用正则表达式来实现,来看下面的例子:
 

复制代码 代码示例:
<script language="javascript">  
var str="中华人民共和国,中华人民共和国";  
var newstr=str.replace(/(人)/g,"<font color=red>$1</font>");  
document.write(newstr);  
</script> 

上面的程序缺少互动性,再改进一下程序,实现可以自主输入要查找的字符:
 

复制代码 代码示例:
<script language="javascript">  
var s=prompt("请输入在查找的字符","人");  
var reg=new RegExp("("+s+")","g");  
var str="中华人民共和国,中华人民共和国";  
var newstr=str.replace(reg,"<font color=red>$1</font>");  
document.write(newstr);  
</script> 
人");

可能大家都会对$1这个特殊字符表示什么意思不是很理解,其实$1表示的就是左边表达式中括号内的字符,即第一个子匹配,同理可得$2表示第二个子匹配。
什么是子匹配呢?通俗点讲,就是左边每一个括号是第一个字匹配,第二个括号是第二个子匹配。。

当要把查找到的字符进行运算的时候,怎么样实现呢?
在实现之前,先介绍下怎么样获取某一个函数的参数。
在函数Function的内部,有一个arguments集合,这个集合存储了当前函数的所有参数,通过arguments可以获取到函数的所有参数。

看了下面的例子,相信你可以理解如何使用了。
 

复制代码 代码示例:
<script language="javascript">  
function test(){  
  alert("参数个数:"+arguments.length);  
 alert("每一个参数的值:"+arguments[0]);  
 alert("第二个参数的值"+arguments[1]);  
//可以用for循环读取所有的参数  
}  
test("aa","bb","cc");  
</script> 
alert("
alert("
alert("
//循环读取所有的参数
看懂上面的程序之后,再来看下面一个有趣的程序:
<script language="javascript">  
var reg=new RegExp("d","g");  
var str="abd1afa4sdf";  
str.replace(reg,function(){alert(arguments.length);});  
</script> 
 

可以发现,匿名函数竟然被执行了二次,并且在函数里还带有三个参数,为什么会执行二次呢?
这个很容易想到,因为写的正则表达式是匹配单个数字的,而被检测的字符串刚好也有二个数字,故匿名函数被执行了二次。
在匿名函数内部的那三个参数到底是什么内容呢?

为了弄清这个问题,来看下面的代码。
 

复制代码 代码示例:
<script language="javascript">  
function test(){  
for(var i=0;i<arguments.length;i++){  
alert("第"+(i+1)+"个参数的值:"+arguments[i]);  
}  
}  
var reg=new RegExp("d","g");  
var str="abd1afa4sdf";  
str.replace(reg,test);  
</script> 
for(var i=0;i<arguments.length;i++){
alert("个参数的值:"+arguments[i]);
}

第一个参数表示匹配到的字符,第二个参数表示匹配时的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符串(RegExp.input)。
其实这些参数的个数,还会随着子匹配的变多而变多的。

弄清这些问题之后,可以用另外的一种写法:
 

复制代码 代码示例:
<script language="javascript">  
function test($1){  
 return "<font color='red'>"+$1+"</font>" 
}  
var s=prompt("请输入在查找的字符","人");  
var reg=new RegExp("("+s+")","g");  
var str="中华人民共和国,中华人民共和国";  
var newstr=str.replace(reg,test);  
document.write(newstr);  
</script> 
return "<font color='red'>"+$1+"</font>"
人");

看了上面的程序,原来可以对匹配到的字符为所欲为。
例子:
 

复制代码 代码示例:
<script language="javascript">  
var str="他今年22岁,她今年20岁,他的爸爸今年45岁,她的爸爸今年44岁,一共有4人" 
function test($1){  
var gyear=(new Date()).getYear()-parseInt($1)+1;  
return $1+"("+gyear+"年出生)";  
}  
var reg=new RegExp("(d+)岁","g");  
var newstr=str.replace(reg,test);  
alert(str);  
alert(newstr);  
</script>
 

在javascript中,String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力。

replace()最简单的算是能力就是简单的字符替换。
例如: 
 

复制代码 代码示例:
<script language="javascript">
 var strM = "javascript is a good script language";
 //在此我想将字母a替换成字母A
 alert(strM.replace("a","A"));
</script>

它只替换了首字母。但如果加上正则表达式结果就不一样了!replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换!
 

复制代码 代码示例:
<script language="javascript">
 var strM = "javascript is a good script language";
 //在此我想将字母a替换成字母A
alert(strM.replace(/a/,"A"));
</script>

但是结果还是没有更改,如果您熟悉正则,那这就难不住您。稍加修改就OK了。
 

复制代码 代码示例:
<script language="javascript">
var strM = "javascript is a good script language";
//在此将字母a全部替换成字母A
alert(strM.replace(/a/g,"A"));
</script>

还可以这样,看看效果!
 

复制代码 代码示例:
<script language="javascript">
 var strM = "javascript is a good script language";
 alert(strM.replace(/(javascript)s*(is)/g,"$1 $2 fun. it $2"));
</script>

这里的例子比较简单,replace()在此点上与您使用正则表达式的能力成正比。正则表达式越强,呵呵,那您就会越疯狂的爱上它。
当然,我这儿推荐replace()的原因并不因为它能与正则表达式合作,而在于它还能与函数进行合作,发挥出强大的功能。

例子:将所有单词首字母换成大写。
 

复制代码 代码示例:
<script language="javascript">
 var strM = "javascript is a good script language";
 function change(word)
{
 return word.indexOf(0).toUpperCase()+word.substring(1);
}
 alert(strM.replace(/bw+b/g,change));
</script>

由上可知,当正则表达式有"g"标志时,代表将处理整个字符串,即函数change的变换将应用于所有匹配的对象。而该函数有三个或更多参数,具体个数视正则表达式而定。
有了函数与正则表达式的配合,replace()处理字符串的功能空前强大起来了!

最后还举个例子,将字符串所有单词倒序,用replace()处理是如此简单。
 

复制代码 代码示例:
<script language="javascript">
var strM = "javascript is a good script language";
function change(word)
{
 var result = word.match(/(w)/g);
 if ( result )
{
 var str = "";
  for ( var i=result.length-1; i>=0; i-- )
 {
   str += result;
 } return str;
}
else
{
  return "null";
}
}
alert(strM.replace(/b(w)+b/g,change));
</script>

JS Replace 全部替换字符的用法

例子:
 

复制代码 代码示例:
<script language="javascript">
var r= "1n2n3n";
//将字母n替换成分号
alert(r.replace("n",";"));
结果:1;2n3n 只替换了第一个
</script>
<script language="javascript">
var r= "1n2n3n";
//将字母n替换成分号
alert(r.replace(/n/g, ";"));
结果:1;2;3; replace 的第一个参数可以是正则表达式,/g标识全文匹配。
</script>

以上通过丰富的实例介绍了js replace的用法,希望对大家有所帮助。