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 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
javascript getElementsByTagName
Jan 31 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
JS中FormData类实现文件上传
Mar 27 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
Javascript MD4
2006/12/20 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
django ajax发送post请求的两种方法
2020/01/05 Python
浅谈Python 参数与变量
2020/06/20 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
高老头读书笔记
2015/06/30 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
终止合同协议书范本
2016/03/22 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android