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获取xml节点的最大值(实现代码)
Dec 11 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
详解vue-cli3使用
2018/08/14 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
python求crc32值的方法
2014/10/05 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
详解python的argpare和click模块小结
2019/03/31 Python
简单了解python变量的作用域
2019/07/30 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle