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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
深入理解(function(){... })();
Aug 16 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 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
PHP里的中文变量说明
2011/07/23 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jquery图片切换插件
2015/03/16 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
javascript history对象详解
2017/02/09 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
利用Python实现Windows定时关机功能
2017/03/21 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
python下载的库包存放路径
2020/07/27 Python
python的flask框架难学吗
2020/07/31 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
人事助理岗位职责
2013/11/18 职场文书
房地产项目建议书
2014/03/12 职场文书
十八大宣传标语
2014/10/09 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang
pt-archiver 主键自增
2022/04/26 MySQL