|
在使用JavaScript对字符串进行处理的时候我们经常会用到replace方法，很简单的一个方法，以前一直不以为意，直到今天看JavaScript语言精粹的时候读到了一个有趣的小例子的时候，并不是十分理解，了解了一下replace的用法才明白，原来replace不像想象中的那么简单
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语法：string.replace(subStr/reg,replaceStr/function)
第一个参数可以是字符串的子字符串，也可以是一个正则表达式，第二个参数可以是一个字符串或者一个处理方法，下面我们分别看看
复制代码 代码如下:
document.write('1234'.replace(1, 'X'));我们可以得到结果：X234，很正常，但是
复制代码 代码如下:
document.write('1214'.replace(1, 'X'));我们预想结果应该是：X2X4，但是得到的结果却是：X214，也就是说如果我们第一个参数写的是子字符串，那么replace只替换第一个匹配就停止搜索
我们换为正则的写法
复制代码 代码如下:
document.write('1214'.replace(/1/g, 'X'));这时候我们可以得到预想结果：X2X4
我们看看function的写法
复制代码 代码如下:
var r = 'abcd'.replace(/\w/g, function() {
return 'X';
});
document.write(r);
这时我们可以看到预想结果：XXXX，所有字符被替换为X，这是我之前对replace的认识，但我在JavaScript语言精粹上看到这样一个例子，我迷惑了
复制代码 代码如下:
var t = document.getElementById('t');
String.prototype.deentityfy = function() {
var entity = {
quot: '"',
lt: '<',
gt: '>'
};
return function() {
return this.replace(/&([^&;]+);/g, function(a, b) {
var r = entity[b];
return typeof r === 'string' ? r : a;
}); //end of replace
};
} ();
document.write('<">'.deentityfy());
这段代码是为JavaScript的String对象添加一个deentityfy 方法，用以替换字符串中得HTML字符（把"替换为”,<替换为<，>替换为>），我们先忽略作者使用的语言技巧，看看他的replace是怎么用的，第一个参数是一个正则表达式，是匹配之前提到的三个字符串，第二个参数的function竟然有了两个参数，这两个参数到底是什么？为什么方法却得到了预想结果，我们来简单分析一下。
首先entity[b]是JavaScript关联数组的用法，根据数组数据的name得到value，为了方便理解，我们不妨改造一下这个方法，让它变得简单些，让我们可以更清楚地看到function的参数到底是什么，同时为了消除浏览器转码问题，我们修改一下替换字符串
复制代码 代码如下:
String.prototype.deentityfy = function() {
var entity = {
a: 'A',
b: 'B',
c: 'C'
};
return function() {
return this.replace(/1([^12])2/g, function(a, b) {
for (var i = 0; i < arguments.length; i++) {
document.write(arguments[i] + '<br/>');
}
document.write('===========================<br/>');
var r = entity[b];
return typeof r === 'string' ? r : a;
}); //end of replace
};
} ();
document.write('1a21b21c2'.deentityfy());
这样，我们把方法的参数都打印出来，看看结果是什么
复制代码 代码如下:
a2
a
a21b21c2
===========================
b2
a21b21c2
===========================
c2
c
a21b21c2
===========================
ABC
很奇怪对不对，最后的<”>是方法的结果，很正确，得到了预期结果，让我们看看function的参数部分，
function被调用了3次，恰恰是匹配的次数，每次都置换匹配字符串。
每次调用的时候方法有四个参数
第一个参数很简单，是匹配字符串
第二个很诡异，不过每个都看一遍不难得出，第二个参数是正则表达式括号内的匹配的内容
第三个参数和容易想到，是匹配项在字符串中的index
第四个参数则是原字符串
很神奇对不对，但是不是就是这样了呢，我们再写一个试试
复制代码 代码如下:
var r = '1a21b21c2'.replace(/1\w2/g, function() {
for (var i = 0; i < arguments.length; i++) {
document.write(arguments[i] + '<br/>');
}
document.write('===========================<br/>')
return 'X';
});
document.write(r);
和前面例子很像，只是简单的把所有匹配项替换为了X，看看结果
复制代码 代码如下:
a2
a21b21c2
===========================
b2
a21b21c2
===========================
c2
a21b21c2
===========================
XXX
出乎意料对不对，结果是预期的，但是参数少了一个，第二项参数不见了，看看究竟还有什么不同——正则表达式中看似多余的括号不见了，上一个例子中，第二项参数恰恰是括号内的匹配项，是不是第二个参数就是正则表达式中括号内的匹配项呢，我们把括号加回来验证一下
复制代码 代码如下:
var r = '1a21b21c2'.replace(/1(\w2)/g, function() {
for (var i = 0; i < arguments.length; i++) {
document.write(arguments[i] + '<br/>');
}
document.write('===========================<br/>')
return 'X';
});
document.write(r);
看看结果
复制代码 代码如下:
a2
a2
a21b21c2
===========================
b2
b2
a21b21c2
===========================
c2
c2
a21b21c2
===========================
XXX
果不其然，这样我们就了解了function中到底有哪些参数，现在看看JavaScript语言精粹重的例子就应该明白了，当然我们需要知道关联数组，立即执行函数，闭包和arguments对象，如果让我们把一句话中所有的单词首字母大写，是不是会了呢
复制代码 代码如下:
//方法很多，这个只是验证我们刚才的理论才故意写成这样麻烦的做法
var sentence = 'i love you';
var upper = sentence.replace(/(\w)\w*\b/g, function(a,b) {
return b.toUpperCase()+a.substring(1);
});
document.write(upper);
复制代码 代码如下:
//这样写其实已经可以胜任
var sentence = 'i love you';
var upper = sentence.replace(/\w+\b/g, function(a) {
return a.substr(0,1).toUpperCase()+a.substring(1);
});
document.write(upper);
| 
发表于 2013-4-12 10:18:03
