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内存管理详细解析
Nov 11 Javascript
javascript使用call调用微信API
Dec 15 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
javascript控制台详解
Jun 25 Javascript
Uploadify上传文件方法
Mar 16 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
详解js获取video任意时间的画面截图
Apr 17 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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 HTML代码串 截取实现代码
2009/06/29 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JS实现吸顶特效
2020/01/08 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
Python单例模式实例详解
2017/03/01 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
实习教师自我鉴定
2013/12/12 职场文书
司法助理专业自荐书
2014/06/13 职场文书
装修活动策划方案
2014/08/27 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS