关于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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
关于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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php session处理的定制
2009/03/16 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
PHP实现简易图形计算器
2020/08/28 PHP
jquery实现textarea 高度自适应
2015/03/11 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
javascript简易画板开发
2020/04/12 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
解读! Python在人工智能中的作用
2017/11/14 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
pandas去除重复列的实现方法
2019/01/29 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
yy司仪主持词
2014/03/22 职场文书
毕业论文评语大全
2014/04/29 职场文书
群教个人对照检查材料
2014/08/20 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
Golang 字符串的常见操作
2022/04/19 Golang