关于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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript实现的listview效果
Apr 28 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
js opener的使用详解
Jan 11 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
浅谈vuex中store的命名空间
2019/11/08 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
小程序实现密码输入框
2020/11/16 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python中requests和https使用简单示例
2018/01/18 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python字典排序的方法
2019/10/12 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
大学生党员承诺书
2014/05/20 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
小学感恩节活动总结
2015/03/24 职场文书
闪闪红星观后感
2015/06/08 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫