关于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 相关文章推荐
JS实现文档加载完成后执行代码
Jul 09 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JS setTimeout与setInterval的区别
Apr 20 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合并discuz用户脚本的方法
2015/08/04 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
一些mootools的学习资源
2010/02/07 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python实现批量图片格式转换
2020/06/16 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python异常处理例题整理
2019/07/07 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python 常见的反爬虫策略
2020/09/27 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS