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如何获取兄弟、父类等节点
Jan 06 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
javascript版2048小游戏
Mar 18 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
德劲1103的维修打理经验
2021/03/02 无线电
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
个人生活学习自我评价范文
2013/11/26 职场文书
高中生自我评语大全
2014/01/19 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
会议邀请函
2015/01/30 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP