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类(纯JS, Ajax模式)
Mar 12 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
详解微信小程序 template添加绑定事件
Jun 23 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Javascript 汉字字节判断
2009/08/01 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python高并发和多线程有什么关系
2020/11/14 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
大学生学习党课思想汇报
2014/01/03 职场文书
工作违纪检讨书
2014/02/17 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
物业接待员岗位职责
2015/04/15 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
毕业证明书
2015/06/19 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis