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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 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
PHP自定义函数收代码
2010/08/01 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
js 省地市级联选择
2010/02/07 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python绘图实现显示中文
2019/12/04 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
小学新教师培训方案
2014/02/03 职场文书
旷课检讨书3000字
2014/02/04 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
法定授权委托证明书
2015/06/18 职场文书
首次购房证明
2015/06/19 职场文书
禁毒心得体会范文
2016/01/15 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL