关于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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
JS实现520 表白简单代码
May 21 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php表单处理操作
2017/11/16 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
质量工程师岗位职责
2013/11/16 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
六五普法规划实施方案
2014/03/21 职场文书
督导岗位职责
2015/02/04 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
python - timeit 时间模块
2021/04/06 Python
mysql查询的控制语句图文详解
2021/04/11 MySQL
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server