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,jquery闭包概念分析
Jun 19 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
JS实现标签页切换效果
May 04 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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使用mysqldump命令导出数据库
2015/04/14 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP7内核之Reference详解
2019/03/14 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
实例讲解Python3中abs()函数
2019/02/19 Python
如何在python中写hive脚本
2019/11/08 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python opencv进行图像拼接
2020/03/27 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Python 实现一个简单的web服务器
2021/01/03 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
Python中的变量与常量
2021/11/11 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
Python如何将list中的string转换为int
2022/07/15 Ruby