javascript replace()第二个参数为函数时的参数用法


Posted in Javascript onDecember 26, 2016

javascript的replace()第二个参数为函数时的参数:

replace()函数具有替换功能,它可以具有两个参数,第一个参数可以是要被替换的字符串或者匹配要被替换字符串的正则表达式,第二个参数可以是替换文本或者一个函数,下面看一下关于replace()函数的几个代码实例。
代码实例:
实例一:

<script>
var str="I love 3water and you?";
console.log(str.replace("jb","java"));
</script>

上面的代码只能够替换字符串中的第一个指定子字符串。
实例二:

<script>
var str="I love 3water and you?";
var reg=/jb/g;
console.log(str.replace(reg,"java"));
</script>

上面的代码可以将字符串中的所有指定子字符串替换掉。
实例三:

<script>
var str="I love 3water and you?";
console.log(str.replace("jb",function(){
 return "java"}
));
</script>

上面的代码中,第二个参数是一个函数,可以用此函数的返回值替换字符串中指定的子字符串。当第二个参数为函数的时候,其实这个函数可以传递参数的,下面就通过代码实例介绍一下关于函数的参数问题。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>三水点靠木</title>
<script type="text/javascript">
var url = "https://3water.com/o.php?mod=viewthread&tid=14743&extra=page%3D1";
//第一参数为字符串
console.group("字符串");
var oneResult = url.replace("3water.com",function(){
 console.log("replace输入参数:%o",arguments);
 var val = /3water.com/.exec(url);
 
 console.log("exec输出参数:%o",val);
              
 console.assert(arguments[0] === val[0]);
 console.assert(arguments[1] === val["index"]);
 console.assert(arguments[2] === val["input"]);
 return "3water";
});
console.log("replace返回字符串:"+oneResult);
console.groupEnd("字符串");
    
//第一参数为正则表达式
console.group("正则表达式");
var regexp_global = /[?&](\w+)=([^&]*)/g;
var count = 0;
var twoResult = url.replace(regexp_global,function(){
 console.log("第"+(count++)+"次运行");
 console.log("replace输入参数:%o",arguments);
 var val = regexp_global.exec(url);
 console.log("exec输出参数:%o",val);
              
 console.assert(arguments[0] === val[0]);
 console.assert(arguments[1] === val[1]);
 console.assert(arguments[2] === val[2]);
 console.assert(arguments[3] === val["index"]);
 console.assert(arguments[4] === val["input"]);
 return count;
});
console.log("replace返回字符串:"+twoResult);
console.groupEnd("正则表达式");
</script>
</head>
<body>
 
</body>
</html>

在上面的代码中,分别演示了replace()函数第一参数是普通字符串和正则表达式的时候,第二个函数参数传递参数的情况,下面分别做一下简单的说明:
第一个参数是普通字符串:

当第一个参数是普通字符串的时候,那么只会替换原字符串中的第一个子字符串,也就是说只会执行一次替换操作,为函数传递的参数和以普通字符串参数作为正则表达式执行exec()函数返回的数组的元素是相同的。
第一个参数是正则表达式:

由于篇幅原因,这里只是截取了一部分运行结果内容,replace()函数的第一个参数是正则表达式,并且执行的是全局匹配,那么第二个函数参数会多次被调用,每次被调用传递的参数,也是和regexp_global.exec(url)返回的数组的元素内容是相同的。

Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
javascript prototype原型详解(比较基础)
Dec 26 #Javascript
如何提高数据访问速度
Dec 26 #Javascript
Angular的模块化(代码分享)
Dec 26 #Javascript
详解Angular的数据显示优化处理
Dec 26 #Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 #Javascript
手动初始化Angular的模块与控制器
Dec 26 #Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 #Javascript
You might like
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
jquery ajax例子返回值详解
2012/09/11 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python实现弹跳小球
2019/05/13 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
厨师岗位职责
2013/11/12 职场文书
外贸实习生自荐信范文
2013/11/24 职场文书
运动会广播稿200米
2014/01/27 职场文书
环境日宣传活动总结
2014/07/09 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
先进党组织事迹材料
2014/12/26 职场文书
HAM-2000摩机图
2021/04/22 无线电