网上有关replace的文章很多了,这里主要聊聊它的第二个参数。阅读本文需要对replace方法有一定了解。W3school=>replace

  我们要把一段字符串中的某些指定字符替换掉,第一时间想到的就是replace方法,他的用法很简单,W3school上讲的清晰易懂。

  replace第一个参数一般放置的是正则表达式,用来匹配想要替换的文本;第二个参数一般我们放入的是字符串,用来替换掉正则匹配到的文本。

  其实replace远比上面说的要强大的多,它的内部已经封装的很完善了,远不是我们想象的那么简单,下面我们就来详细聊聊replace的第二个参数。

  现在要实现一个功能,把HTML中的字符实体转换成它们所对应的字符,比如:"&lt;"转换成对对应字符为:"<"。

  下面我们来看看代码实现:

  

 String.prototype.deentityfy=(function(){
var entity = {
lt:'<',
gt:'>'
};
return function(){
return this.replace(/&([^&;]+);/g,
function(a,b,c,d){
console.log('a:'+a+'---b:'+b+'---c:'+c+'---d:'+d);
var r = entity[b];
return typeof r ==='string' ? r : a ;
})
}
}())
document.write('&lt;h1&gt;我是标题&lt;/h1&gt;'.deentityfy());

  这里得讲讲字符实体,以免下面混淆。

  字符实体是不会当作HTML语句来解析的,比如上面的'&lt;h1&gt;我是标题&lt;/h1&gt;'这一段输出到页面上,我们看到的是这样的:

  

  <h1>只是被浏览器当作字符串输出,而不是标签输出,上面这段代码就是把这些字符实体转换成对应字符,能够被浏览器所编译。

  我们一步步来看上面的代码是怎么实现的。

  首先,给String对象的原型挂载了一个deentityfy方法,这个方法是个自执行函数,使用闭包的形式,函数内的所有内容对外都是不可见的。

  函数内,我们定义了一个entity对象字面量,里面有两个属性,分别对应标签的左右尖括号。

  接下来return一个匿名函数,把我们要做的事写在这个函数内。

  我们调用replace方法,第一个参数放置正则表达式:

/&([^&;]+);/g

  这段正则表达式的匹配规则是:以"&"开头,后面紧跟一个或一个以上不是"&"和";"的字符,以";"结束。后面的g代表全局匹配。(更多有关正则表达式的学习请点击这里

  这里着重说下,正则中的"()"和javascript中运算时使用的"()"概念是不同的,这里的括号术语叫做:捕获括号。简单的说就是把括号内匹配到的字符暂时储存起来,在待会的替换环节可以取出来用。

  接下来详细讲讲replace的第二个参数,也就是本文的重点。

  我们一般是放一个字符串在第二个参数中,直接用于替换所匹配到的字符;还有更高阶的技巧,使用$字符可以取得捕获括号中的内容,再进行相关操作。具体可以查看W3school,里面都有讲。

  还有第三种方法, 给第二个参数传入匿名函数,函数的返回值用做替换的字符。

  匿名函数有4个参数可以传入,当然,这些参数都不是必须要传的。

  第一个参数:正则所匹配到的字符;

  第二个参数:捕获括号所捕获到的字符;

  第三个参数:正则匹配到的每段字符的第一个字符的索引;

  第四个参数:用于匹配的字符串主体;

  我把上面代码的运行结果打印出来大家应该就很清晰了:

  

  接触正则也快三年时间了,一直不知道正则还有这么强大的功能,当然也可能是我孤陋寡闻啦。希望大家永葆一颗学习的心,一起进步。

关于字符串replace方法第二个参数探究的更多相关文章

  1. js replace方法第二个参数,远不止你想的那么强大

    js replace() 方法,想必大家都不陌生. 定义和用法: replace()方法用于在字符串中用一些字符替换另一些字符,或者替换一个与正则表达式匹配的子串. stringObject.repl ...

  2. python字符串replace()方法

    python字符串replace()方法 >>> help(str.replace)Help on method_descriptor:replace(...)    S.repla ...

  3. js中替换字符串(replace方法最简单的应用)

    replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也 ...

  4. ***php解析JSON二维数组字符串(json_decode函数第二个参数True和False的区别)

    客户端的请求体中的数据:[{"msg_id": 1, "msg_status": "HAS_READ" }, { "msg_id& ...

  5. JavaScript系列:replace()函数(第二个参数为函数)

    语法 stringobject.replace(regexp/substr,replacement) 只讲解这个:参数replacement为函数时,这个参数函数的参数代表的意义,以及运行次数,及过程 ...

  6. [JS高程] 字符串模式匹配方法

    目录 1. RegExp 对象 2. 字符串模式匹配方法 2.1 match() , search() 2.2 replace() 2.2.1 第二个参数为字符串的应用情况 2.2.2 第二个参数为函 ...

  7. 字符串的replace()方法隐藏着什么不可告人秘密?

    最近在做JS算法项目时发现一个令我匪夷所思的问题, 这里想记录一下问题. 首先介绍一下字符串replace()方法的基本用法. replace() 方法使用一个替换值(replacement)替换掉一 ...

  8. replace函数结合正则表达式实现转化成驼峰与转化成连接字符串的方法

    //连接符转成驼峰写法 function toCamel(str){ var reg=/-(\w)/g; return str.replace(reg,function(){ return argum ...

  9. 使用 runtime 实现字符串转方法,并传递参数

    利用runtime的动态机制实现字符串转方法并传递参数 使用 SEL 关键字引用方法声明,使用 methodForSelector 寻找方法实现, 使用函数指针调用方法. - (void)action ...

随机推荐

  1. Maxdos 9.3不能引导系统进入Maxdos

    一.故障描述 最近安装一台新电脑安装的系统版本是windows7_professional_with_sp1_x64,安装完成后想用Maxdos对系统进行备份.出现错误:Warning: the hi ...

  2. php 基础知识

    一.判断代码输出 $str1 = null; $str2 = false; echo $str1==$str2 ? '相等' : '不相等'; $str3 = ''; $str4 = 0; echo ...

  3. nginx 常用配置说明

    一.location 配置 1.1 语法规则: location [=|~|~*|^~] /uri/ { … }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可 ...

  4. Android开发环境搭建相关文章列表(转载)

    Android开发虽然有所了解,但是一直没有搭建开发环境去学习,Android的更新速度比较快了,Android1.0是2008年发布的,截止到目前为止Android已经更新Android5.0.1, ...

  5. osgEarth基础入门

    osgEarth基础入门 2015年3月21日 16:19 osgEarth是基于三维引擎osg开发的三维数字地球引擎库,在osg基础上实现了瓦片调度插件,可选的四叉树调度插件,更多的地理数据加载插件 ...

  6. 编写高质量JS代码的68个有效方法(三)

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  7. 15个带给您优秀用户体验的移动应用 UI 设计

    在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多移动应用程序的 UI 概念设计,让你惊叹.如果你想获得灵感,那很有必要看看下面15个优秀用 ...

  8. TinyFox在VS2015上的调试器

    这个一个TinyFox在VS2015上的调试工具 : 开源了 https://github.com/maxzhang1985/TinyFoxDEBUG 开发这个工具的初衷,是想更便捷的调试Nancy ...

  9. 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式

    我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView   通过初始化的时候  传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...

  10. js页面跳转整理(转载未整理)

    js方式的页面跳转1.window.location.href方式    <script language="JavaScript" type="text/java ...