关于JavaScript中string 的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);

(0)

相关推荐

  • JavaScript使用replace函数替换字符串的方法

    本文实例讲述了JavaScript使用replace函数替换字符串的方法.分享给大家供大家参考.具体如下: JavaScript通过replace函数替换字符串,下面的代码将Visit Microsoft中的MicroSoft替换成jb51.net <!DOCTYPE html> <html> <body> <p> Click the button to replace "Microsoft" with "jb51.net&qu

  • javascript正则表达式使用replace()替换手机号的方法

    本文实例讲述了javascript正则表达式使用replace()替换手机号的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>javascript正则表达式使用replace()替换手机号</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  • JavaScript实现的字符串replaceAll函数代码分享

    由于javascript中的replace函数无法替换全部匹配的字符串,所以需要为String类增加一个方法,代码如下: 复制代码 代码如下: String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {       if (!RegExp.prototype.isPrototypeOf(reallyDo)) {           return this.replace(new RegExp(really

  • JavaScript String.replace函数参数实例说明

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

  • javascript替换已有元素replaceChild()使用介绍

    replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点 复制代码 代码如下: var oDiv = document.getElementById("guoDiv"); var oSpan = document.createElement("span"); oSpan.innerHTML = "4"; var firsChild = oDiv.firstElementChild ? oDiv.

  • JavaScript 函数replace深入了解

    replace函数接受两个参数,第一个参数为字符串或正则表达式,第一个参数同样可以接受一个字符串,还可能是一个函数. 首先对于第一个参数为字符串的我们不再需要多说"I am a boy".replace("boy","girl"),输出:"I am a girl".在这里想说的是第一个参数为正则的情形.对于正则表达式来说首先会根据是否全局的(全局//g)决定替换行为,如果是全部的则替换全部替换,非全局的只有替换首个匹配的字符串

  • JavaScript使用Replace进行字符串替换的方法

    本文实例讲述了JavaScript使用Replace进行字符串替换的方法.分享给大家供大家参考.具体分析如下: var str='123123'; alert(str.replace('1','0')); //只替换第一处结果为023123 alert(str.replace(/1/g,'0')); //替换全部结果为023023 希望本文所述对大家的javascript程序设计有所帮助.

  • 关于JavaScript中string 的replace

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法:string.replace(subStr/reg,replaceStr/function) 第一个参数可以是字符串的子字符串,也可以是一个正则表达式,第二个参数可以是一个字符串或者一个处理方法,下面我们分别看看 复制代码 代码如下: document.write('1234'.replace(1, 'X'));我们可以得到结果:X234,很正常,但是 复制代码 代码如下: document

  • JavaScript中String.prototype用法实例

    本文实例讲述了JavaScript中String.prototype用法.分享给大家供大家参考.具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=function() { return this.replace(/[^\x00-\xff]/g,"**").length; } // 判断字符串是否以指定的字符串结束 String.prototype.EndsWith = function(str) { return this.

  • JavaScript中String对象的使用方法以及实例

    方法总览: 实例(js中字符串和字符串对象之间能够自由转换,字符串可以直接使用字符串对象的方法和属性):  var ss="孙士彬倪炜豪汤键倪炜豪"; document.write(ss.anchor("cc")+"<br>"); // 生成一段 HTML 代码:<a name="cc">孙士彬倪炜豪汤键倪炜豪</a> document.write(ss.link("https:/

  • javascript中String对象的slice()方法分析

    本文较为详细的分析了javascript中String对象的slice()方法.分享给大家供大家参考.具体分析如下: 此方法截取字符串中的一段,并返回由被截取字符组成的新字符串. 注:原字符串不会发生改变,返回值是一个新产生的字符串. 语法结构: 复制代码 代码如下: stringObject.slice(start,end) 参数列表: 参数 描述 start  必需.规定从何处开始截取字符串.字符串的首字符的位置是0. 如果此参数为负数,那么将从字符串的尾部开始计算位置.例如:-1代表倒数第

  • javascript中href和replace的比较(详解)

    在使用javascript的时候,有时候对于经常使用的方法太熟悉而忽略了他们之间原理的细微差别. 举例如下: window.location.href,window.location.replace. 这两种方式都可以让页面跳转到一个新的页面,但是其中我就忽略了跳转之后的细节,比如返回的原来的页面. window.location.href中的href其实就是<a>标签中的href,使用这个进行页面跳转后,可以使用浏览器的后退按钮退回到原来的页面,也可以使用history.go(-1)函数跳转

  • javascript笔记 String类replace函数的一些事

    我最近查阅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的常用方法实例分析

    本文实例讲述了Javascript中String的常用方法.分享给大家供大家参考.具体如下: // length属性:获取字符串的字符个数. var s='爱像一阵风'; alert(s.length); // charAt(index)方法:获取指定索引位置的字符,索引从0开始 var s1='我不要再想你'; alert(s1.charAt(4));//想 // indexOf('e',startIndex)方法:获取指定字符串第一次出现的位置.startIndex表示从第几个开始搜索. v

  • JavaScript中string对象

    一.String:存储一个字符串,并且提供处理字符串需要的属性和方法. 1.创建String对象:显示和隐式 <DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <head> <title>js函数</title> </head> <script ty

  • JavaScript中String和StringBuffer的速度之争

    显示情况时Javascript中并没有StringBuffer类,一种主流的Javascript StringBuffer类的实现是通过prototype构造一个StringBuffer类. StringBuffer.js 复制代码 代码如下: function StringBuffer(){ this.content = new Array; } StringBuffer.prototype.append = function( str ){ this.content.push( str );

  • JavaScript中string转换成number介绍

    JavaScript中,可以通过以下3种方法来将string值转换成number: 1.调用Number()来对string进行值类型转换. 2.parseInt(). 3.parseFloat(). Number() 使用Number()函数来对string进行强制类型转换是最直接的做法.不过,这种做法有一个局限性:如果字符串截去开头和结尾的空白字符后,不是纯数字字符串,那么最终返回结果为NaN.David Flanagan的JavaScript – The Definitive Guide

随机推荐