关于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 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
深入理解Python装饰器
2016/07/27 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
django允许外部访问的实例讲解
2018/05/14 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python程序需要编译吗
2020/06/19 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
合作投资意向书
2014/04/01 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
小学校长汇报材料
2014/08/20 职场文书
财产分割协议书范本
2014/11/03 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
高考升学宴答谢词
2015/01/20 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2015中秋祝酒词
2015/08/12 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Python字符串的转义字符
2022/04/07 Python