JavaScript string 的replace

在使用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('&lt;&quot;&gt;'.deentityfy());

这段代码是为JavaScript的String对象添加一个deentityfy 方法,用以替换字符串中得HTML字符(把&quot;替换为”,&lt;替换为<,&gt;替换为>),我们先忽略作者使用的语言技巧,看看他的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());

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

1a2 


1a21b21c2 
=========================== 
1b2 


1a21b21c2 
=========================== 
1c2 


1a21b21c2 
=========================== 
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,看看结果

 

1a2
0
1a21b21c2
===========================
1b2
3
1a21b21c2
===========================
1c2
6
1a21b21c2
===========================
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);

看看结果

1a2
a2
0
1a21b21c2
===========================
1b2
b2
3
1a21b21c2
===========================
1c2
c2
6
1a21b21c2
===========================
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);
时间: 2024-09-16 12:28:50

JavaScript string 的replace的相关文章

javascript笔记 String类replace函数的一些事_javascript技巧

我最近查阅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]; });

javascript String.replace函数

 代码如下 复制代码 stringObject.replace(regexp/substr,replacement) replacement 可以是字符串,也可以是函数.如果它是字符串,那么每个匹配都将由字符串替换.ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串.在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用.该函数的第一个参数是匹配模式的字符串.接下来的参数是与模式中的子表达式匹配的字符串,可以有 0 个或

JavaScript String.replace函数参数实例说明_基础知识

Email:longsu2010 at yeah dot net js String的replace函数的函数签名如下: replace(match/* 字符串OR正则表达式 */, replacement/* 字符串OR函数 */) 作用是将源自符串中的match替换为replacement并返回替换后的字符串. 如果第一参数是字符串就没什么好说的了,但是要记住此时只在源自符串替换一次match(第一次)函数就执行完成了. 所以第一参数通常是一个正则表达式,举例如下: replace(/a/g

JavaScript中的replace()方法使用详解

  这篇文章主要介绍了JavaScript中的replace()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串. 替换字符串可以包含以下特殊替换模式: 语法 ? 1 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息: regexp : 一个RegExp对象.匹配被替换参数的返回#2. substr : 一个字符串,由

JavaScript中的replace()方法使用详解_基础知识

 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串. 替换字符串可以包含以下特殊替换模式:  语法 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息:     regexp : 一个RegExp对象.匹配被替换参数的返回#2.     substr : 一个字符串,由newSubStr 来替换     newSubStr : 它取代从参数中收到的子字符串 #1.     funct

JavaScript String(字符串)对象的简单实例(推荐)_javascript技巧

返回字符串的长度: <html> <body> <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) </script> </body> </html> 为字符串添加样式: <html> <body> <script type="text/java

JavaScript中使用replace结合正则实现replaceAll的效果_javascript技巧

方法: string.replace(new RegExp(oldString,"gm"),newString)) gm 分别代表: g=global, m=multiLine 大致上方法就是这样的,可以实现替换全部指定字串 另一个简单的验证JS的方法: 在浏览器地址栏输入 javascript:alert("abcabcabc".replace(new RegExp("a","gm"),"ad")) 这样

js String类replace函数

      下面任意的匹配变量都能用来识别最新的匹配以及找出匹配的字符串.在需要动态决定替换字符串的文本替换中可以使用匹配变量.   function format(s) {     var args = arguments;     var pattern = new RegExp("%([1-" + arguments.length + "])","g");          return String(s).replace(pattern,

JavaScript String对象

JavaScript String 对象     ------用于处理文本(字符串). 创建String对象:     /*参数s是要存储在String对象中或转换成原始字符串的值*/      new String(s);      String(s);     返回值: 1.当String()和运算符new一起作为构造函数使用时候,返回一个新创建的String对象,存放的是字符串s或s的字符串表示 2.当不用new运算符直接调用String()时候,它只把s转换成原始的字符串,并返回转换后的