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使用cookie
Feb 02 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
JavaScript Date对象使用总结
May 14 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
substr()函数中文版
2006/10/09 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
nodejs教程之环境安装及运行
2014/11/21 NodeJs
JS是按值传递还是按引用传递
2015/01/30 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
利用Python检测URL状态
2019/07/31 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python restful框架接口开发实现
2020/04/13 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
腾讯广告词
2014/03/19 职场文书
开业典礼主持词
2014/03/21 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
文明工地标语
2014/06/16 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
就业协议书
2014/09/12 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年售后服务工作总结
2015/04/25 职场文书