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 相关文章推荐
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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函数(ignore_user_abort)
2012/08/01 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python基本语法练习实例
2017/09/19 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python实现自动登录
2018/09/17 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Python实现简单的2048小游戏
2021/03/01 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
微笑服务标语
2014/06/24 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2015年售票员工作总结
2015/04/29 职场文书
我的中国梦主题班会
2015/08/14 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
导游词之介休绵山
2019/12/31 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python