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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
uploader秒传图片到服务器完整代码
Apr 22 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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
destoon之一键登录设置
2014/06/21 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
php pdo操作数据库示例
2017/03/10 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
运动会闭幕式解说词
2014/02/21 职场文书
校长寄语大全
2014/04/09 职场文书
岗位工作说明书
2014/07/29 职场文书
初中学校对照检查材料
2014/08/19 职场文书
数学教师个人工作总结
2015/02/06 职场文书