js中replace的用法总结


Posted in Javascript onDecember 27, 2013

replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。为了帮助大家更好的理解,下面举个简单例子说明一下

Js代码

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

比我聪明的你,看完上面的例子之后,会发现第二个错别字“终古”并没有被替换成“中国”,我们可以执行二次replace方法把第二个错别字“终古”也替换掉,程序经过改进之后如下:

Js代码

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

我们可以仔细的想一下,如果有N的N次方个错别字,是不是也要执行N的N次方replace方法来替换掉错别字呢??呵,不用怕,有了正则表达式之后不用一个错别字要执行一次replace方法。。程序经过改进之后的代码如下

Js代码

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

创建正则RegExp对象

上面讲的是replace方法最简单的应用,不知道大家有没有看懂??下面开始讲稍微复杂一点的应用。。

大家在一些网站上搜索文章的时候,会发现这么一个现象,就是搜索的关键字会高亮改变颜色显示出来??这是怎么实现的呢??其实我们可以用正则表达式来实现,具体怎么样实现呢?简单的原理请看下面的代码

Js代码

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

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

Js代码

    <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可以获取到函数的所有参数,为了大家理解,请看下面的代码

Js代码

    <script language="javascript">    
    function test(){    
       alert("参数个数:"+arguments.length);    
       alert("每一个参数的值:"+arguments[0]);    
       alert("第二个参数的值"+arguments[1]);    
      //可以用for循环读取所有的参数    
    }        test("aa","bb","cc");    
 </script>   
alert("
alert("
alert("
//循环读取所有的参数

看懂上面的程序之后,我们再来看下面一个有趣的程序

Js代码

    <script language="javascript">    
    var reg=new RegExp("\\d","g");    
    var str="abd1afa4sdf";    
    str.replace(reg,function(){alert(arguments.length);});    
    </script>  

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

Js代码

    <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)。其实这些参数的个数,还会随着子匹配的变多而变多的。弄清这些问题之后,我们可以用另外的一种写法

Js代码

    <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>"
人");

看了上面的程序,原来可以对匹配到的字符为所欲为。下面简单举一个应用的例子

Js代码

    <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 相关文章推荐
js继承的实现代码
Aug 05 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
js 颜色选择插件
Jan 23 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
微信小程序删除处理详解
Aug 16 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 #Javascript
jquery插件jquery倒计时插件分享
Dec 27 #Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 #Javascript
window.open打开页面居中显示的示例代码
Dec 27 #Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 #Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 #Javascript
JS 数字转换研究总结
Dec 26 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
jquery 插件学习(二)
2012/08/06 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python如何制作英文字典
2019/06/25 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
职业培训师职业生涯规划
2014/02/18 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
56句经典英文座右铭
2019/08/09 职场文书