关于JavaScript中string 的replace


Posted in Javascript onApril 12, 2013

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);
Javascript 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
关于JavaScript与HTML的交互事件
Apr 12 #Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 #Javascript
js实现单一html页面两套css切换代码
Apr 11 #Javascript
获取内联和链接中的样式(js代码)
Apr 11 #Javascript
JavaScript在XHTML中的用法详解
Apr 11 #Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 #Javascript
javascript标签在页面中的位置探讨
Apr 11 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php绘制一条直线的方法
2015/01/24 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Three.js基础学习教程
2017/11/16 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python如何读取bin文件并下发串口
2019/07/05 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
浅谈Python协程
2020/06/17 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
我爱我家教学反思
2014/05/01 职场文书
安全负责人任命书
2014/06/06 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL