javascript笔记 String类replace函数的一些事


Posted in Javascript onSeptember 22, 2011

我最近查阅javascript资料,发现了一个函数:

function format(s) 
{ 
var args = arguments; 
var pattern = new RegExp("%([1-" + arguments.length + "])","g"); 
return String(s).replace(pattern,function(word,index){ 
return args[index]; 
}); 
} 
// test 
window.onload = alert(format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear")); 
//And the papers want to know whose shirt you wear

这种功能的函数,在shell或java都似曾见过,但是在javascript函数实现的方法很新颖。新颖的地方就是在:
return String(s).replace(pattern,function(word,index){ 
return args[index]; 
});

但是这里String类的replace的用法和我平时用的很不一样,我以前写过一个这样的replace的函数:
function myReplace(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word){ 
return word = 'CJJK00'; 
}); 
} 
//window.onload = alert(myReplace('CJ9080,CJ8976,CJ12919,CJ8765'));//CJJK0080,CJJK0076,CJJK00919,CJJK0065

我在使用replace时候,如果第二个参数是function我一般都只用到第一个参数,基本没有思考它的第二个,第三个或者更多的参数,现在看到有人使用了第二个参数,就很想探求下replace第二个参数使用到了function时候,里面参数到底有多少个,每个的含义到底如何?
下面是我改写了我自己写的替换函数:
function myReplaceFtn(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word,index){ 
return word = 'CJJK00@' + index + "@"; 
}); 
} 
//window.onload = alert(myReplaceFtn('CJ9080,CJ8976,CJ12919,CJ8765'));//CJJK00@0@80,CJJK00@7@76,CJJK00@14@919,CJJK00@22@65

本来我以为,函数format里的function(word,index),我认为应该是正则表达式所匹配字符串的索引(%1的索引为1,%2的索引为2,%3的索引为3),而我写的函数里面第二个参数index不是被匹配到字符串的索引,而是被匹配到的字符在原字符串的位置。下面我做了这样的测试:
function format(s) 
{ 
var args = arguments; 
var pattern = new RegExp("%([1-" + arguments.length + "])","g"); 
return String(s).replace(pattern,function(word,index){ 
alert("arguments.length:" + arguments.length);//4 
return args[index]; 
}); 
} 
function myReplaceFtn(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word,index){ 
alert("arguments.length:" + arguments.length);//3 
return word = 'CJJK00@' + index + "@"; 
}); 
}

函数format里面function(word,index)的参数有4个,而函数myReplaceFtn(s)里面function(word,index)的参数有3个。为什么会有这样的不同?我做了如下测试:
//以下程序在firefox里面运行 
function newformat(s) 
{ 
var args = arguments; 
var pattern = new RegExp("%([1-" + arguments.length + "])","g"); 
return String(s).replace(pattern,function(word,index){ 
console.log("arguments.length:" + arguments.length); 
for (var i = 0,j = arguments.length;i<j;i++) 
{ 
console.log("标示newformat" + i + ":" + arguments[i]); 
} 
return args[index]; 
}); 
} 
function newmyReplace(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word){ 
console.log("arguments.length:" + arguments.length); 
for (var i = 0,j = arguments.length;i<j;i++) 
{ 
console.log("标示newmyReplace" + i + ":" + arguments[i]); 
} 
return word = 'CJJK00'; 
}); 
}

结果:
arguments.length:4
标示newformat0:%1
标示newformat1:1
标示newformat2:8
标示newformat3:And the %1 want to know whose %2 you %3
arguments.length:4
标示newformat0:%2
标示newformat1:2
标示newformat2:30
标示newformat3:And the %1 want to know whose %2 you %3
arguments.length:4
标示newformat0:%3
标示newformat1:3
标示newformat2:37
标示newformat3:And the %1 want to know whose %2 you %3
arguments.length:3
标示newmyReplace0:CJ90
标示newmyReplace1:0
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0:CJ89
标示newmyReplace1:7
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0:CJ12
标示newmyReplace1:14
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0:CJ87
标示newmyReplace1:22
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
对于回调函数里的arguments值现在比较清晰了,arguments个数的不同应该和我们写的正则表达式有关系,不管怎样,第一个参数是匹配到的字符串,最后一个是原字符串,倒数第二个参数是匹配到的字符串的在原字符串索引的起始位,像format里的第二个参数index根据情况而定了,我自己写的newmyReplace里没有这个参数,format的index参数是%[1-4],里面的1-4,不过还是写个方法确定下:
function charFormat(s) 
{ 
var pattern = new RegExp("%([a-d])","g"); 
return String(s).replace(pattern,function(word,index){ 
switch(index) 
{ 
case 'a': 
return 'thisisA'; 
case 'b': 
return 'thisisB'; 
case 'c': 
return 'thisisC'; 
case 'd': 
return 'thisisD'; 
default: 
return 'thisisNULL'; 
} 
}); 
} 
window.onload = console.log(charFormat("And the %a want to know whose %d you %b", "papers", "shirt", "wear")); 
//And the thisisA want to know whose thisisD you thisisB

由此可见String的replace是相当的强大,不过本人正则表达式功力还不够,不知道还有什么别的特别的正则表达式会产生什么不同的结果。另外不知道谁有javascript里面String类replace原始写法,希望能贡献出来,我想好好研究下。
Javascript 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Prototype的Class.create函数解析
Sep 22 #Javascript
Javascript中的this绑定介绍
Sep 22 #Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 #Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 #Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 #Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 #Javascript
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
web方式ftp
2006/10/09 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
建筑专业自荐信
2013/10/18 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
打架检讨书
2015/01/27 职场文书
检讨书模板
2015/01/29 职场文书
孟佩杰观后感
2015/06/17 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
安全教育培训心得体会
2016/01/15 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers