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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
Puppet的一些技巧
Sep 17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
解析预加载显示图片艺术
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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
Angular ElementRef简介及其使用
2018/10/01 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Linux下python3.7.0安装教程
2018/07/30 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年司法所工作总结
2014/11/22 职场文书
护林员个人总结
2015/03/04 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
雨中的树观后感
2015/06/03 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js