Javascript中字符串replace方法的第二个参数探究


Posted in Javascript onDecember 05, 2016

前言

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

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

实例介绍

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

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

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('<h1>我是标题</h1>'.deentityfy());

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

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

Javascript中字符串replace方法的第二个参数探究

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Javascript中字符串replace方法的第二个参数探究

Javascript中字符串replace方法的第二个参数探究 

总结

好了,以上就是这篇文章的全部内容了,接触正则也快三年时间了,一直不知道正则还有这么强大的功能,当然也可能是我孤陋寡闻啦。希望大家永葆一颗学习的心,一起进步。同时也希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
JS中常用的消息框总结
Feb 24 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
解析预加载显示图片艺术
Dec 05 #Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 #Javascript
简单几步实现返回顶部效果
Dec 05 #Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 #Javascript
jquery删除数组中重复元素
Dec 05 #Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 #Javascript
DOM 事件的深入浅出(二)
Dec 05 #Javascript
You might like
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
js计算页面刷新的次数
2009/07/20 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
js禁止表单重复提交
2017/08/29 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python+Django+apache的配置方法详解
2016/06/01 Python
浅析python的Lambda表达式
2019/02/27 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
初一体育教学反思
2014/01/29 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
网络优化专员求职信
2014/05/04 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
高一作文之乐趣
2019/11/21 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python