关于JavaScript中string 的replace_基础知识-js教程-PHP中文网

关于JavaScript中string 的replace_基础知识

WBOY

发布： 2016-05-16 17:37:27

原创

1014 人浏览过

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语言精粹上看到这样一个例子，我迷惑了

复制代码代码如下:

document.write('<">'.deentityfy());

这段代码是为JavaScript的String对象添加一个deentityfy 方法，用以替换字符串中得HTML字符（把"替换为”,<替换为<，>替换为>），我们先忽略作者使用的语言技巧，看看他的replace是怎么用的，第一个参数是一个正则表达式，是匹配之前提到的三个字符串，第二个参数的function竟然有了两个参数，这两个参数到底是什么？为什么方法却得到了预想结果，我们来简单分析一下。

首先entity[b]是JavaScript关联数组的用法，根据数组数据的name得到value，为了方便理解，我们不妨改造一下这个方法，让它变得简单些，让我们可以更清楚地看到function的参数到底是什么，同时为了消除浏览器转码问题，我们修改一下替换字符串

复制代码代码如下:

String.prototype.deentityfy = function() { 
         varEntity = { 
             a: 'A', 
             b: 'B', 
             c: 'C' 
         }; 
         return function() { 
             return this.replace(/1([^12])2/g, function(a, b) { 
                 for (var i = 0; i                     document.write(arguments[i] '
'); 
                } 
                document.write('============ ===============
');                var r = 实体[b]; 
                 return typeof r === 'string' :一个；
             }); //替换结束 
         }; 
     } ();
     document.write('1a21b21c2'.deentityfy());

这样，我们把方法的参数都打印出来，看看结果是什么

复制代码代码如下：

a2 
a 

a21b21c2 
=========================== 
b2 

 
a21b21c2 
===== ====================== 
c2 
c 

a21b21c2 
========== ================= 
ABC

很奇怪，最后的是方法的结果，很正确，得到了预期的结果，让我们功能的参数部分，
函数被调用了3次，位置是匹配的次数，每次都排列匹配字符串。

每次调用的时间方法有四个参数

第一个参数很简单，是匹配字符串

第二个很奇怪，不过每个人都看一遍不难得出，第二个参数是正则表达式短语内匹配的内容

第三个参数和容易想到的，是字符串中索引中的匹配项

第四个参数撕原字符串

对不对很神奇，但是不是这样呢，我们再写一个尝试

复制代码代码如下：

var r = '1a21b21c2'.replace(/1w2/ g, function() {
            for (var i = 0; i                 document.write(arguments[i] '
');
 }
            document.write('=============================
')
            return 'X ';
        });
        document.write(r);

和前面的例子很像，只是简单的把所有匹配项替换为X，看看结果

复制代码代码如下：

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]   '
');
            }
            document.write('===========================
')
            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);