详解JS正则replace的使用方法


Posted in Javascript onMarch 06, 2016

在讲replace的高级应用之前,我们先简单梳理一下JS正则中的几个重要的知识点,以帮助你对基础知识的回顾,然后再讲解JS正则表达式在replace中的使用,以及常见的几个经典案例。 

一、正则表达式的创建

JS正则的创建有两种方式: new RegExp() 和 直接字面量。

//使用RegExp对象创建
var regObj = new RegExp("(^\s+)|(\s+$)","g");

//使用直接字面量创建
var regStr = /(^\s+)|(\s+$)/g;

其中 g 表示全文匹配,与之相关的还有 i 和m,i 表示匹配时忽略大小写,m 表示多行匹配,如果多个条件同时使用时,则写成:gmi 

二、()、[]、{} 的区别

() 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如 (\s+) 表示连续空格的字符串。

[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和数字。

{}一般用来表示匹配的长度,比如 \d{3} 表示匹配三个空格,\d[1,3]表示匹配1~3个空格。

三、^ 和 $

^ 匹配一个字符串的开头,比如 (^a) 就是匹配以字母a开头的字符串

$ 匹配一个字符串的结尾,比如 (b$) 就是匹配以字母b结尾的字符串

^ 还有另个一个作用就是取反,比如[^xyz] 表示匹配的字符串不包含xyz

需要注意的是:如果^出现在[]中一般表示取反,而出现在其他地方则是匹配字符串的开头

四、\d  \s  \w  .

\d 匹配一个非负整数, 等价于 [0-9]

\s 匹配一个空白字符

\w 匹配一个英文字母或数字,等价于[0-9a-zA-Z]

.   匹配除换行符以外的任意字符,等价于[^\n]

五、* + ?

* 表示匹配前面元素0次或多次,比如 (\s*) 就是匹配0个或多个空格

+ 表示匹配前面元素1次或多次,比如 (\d+) 就是匹配由至少1个整数组成的字符串

? 表示匹配前面元素0次或1次,相当于{0,1} ,比如(\w?) 就是匹配最多由1个字母或数字组成的字符串

六、test 、match

前面的大都是JS正则表达式的语法,而test则是用来检测字符串是否匹配某一个正则表达式,如果匹配就会返回true,反之则返回false

/\d+/.test("123") ; //true

/\d+/.test("abc") ; //false

match是获取正则匹配到的结果,以数组的形式返回

"186a619b28".match(/\d+/g); // ["186","619","28"] 

以上基本上是我经常用到的基础知识,不是很全面,不常用的就没有列出来,因为列出来也只是摆设,反而混淆主次!

七、replace

replace 本身是JavaScript字符串对象的一个方法,它允许接收两个参数:

replace([RegExp|String],[String|Function])
第1个参数可以是一个普通的字符串或是一个正则表达式

第2个参数可以是一个普通的字符串或是一个回调函数

如果第1个参数是RegExp, JS会先提取RegExp匹配出的结果,然后用第2个参数逐一替换匹配出的结果

如果第2个参数是回调函数,每匹配到一个结果就回调一次,每次回调都会传递以下参数:

result: 本次匹配到的结果

$1,...$9: 正则表达式中有几个(),就会传递几个参数,$1~$9分别代表本次匹配中每个()提取的结果,最多9个

offset:记录本次匹配的开始位置

source:接受匹配的原始字符串

以下是replace和JS正则搭配使用的几个常见经典案例: 

(1)实现字符串的trim函数,去除字符串两边的空格

String.prototype.trim = function(){

  //方式一:将匹配到的每一个结果都用""替换
  return this.replace(/(^\s+)|(\s+$)/g,function(){
    return "";
  });

  //方式二:和方式一的原理相同
  return this.replace(/(^\s+)|(\s+$)/g,'');
};

^\s+ 表示以空格开头的连续空白字符,\s+$ 表示以空格结尾的连续空白字符,加上() 就是将匹配到的结果提取出来,由于是 | 的关系,因此这个表达式最多会match到两个结果集,然后执行两次替换:

String.prototype.trim = function(){
  /**
   * @param rs:匹配结果
   * @param $1:第1个()提取结果
   * @param $2:第2个()提取结果
   * @param offset:匹配开始位置
   * @param source:原始字符串
   */
  this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){
    //arguments中的每个元素对应一个参数
    console.log(arguments);
  });
};

" abcd ".trim();

输出结果:

[" ", " ", undefined, 0, " abcd "] //第1次匹配结果
[" ", undefined, " ", 5, " abcd "] //第2次匹配结果

(2)提取浏览器url中的参数名和参数值,生成一个key/value的对象

function getUrlParamObj(){
  var obj = {};
  //获取url的参数部分
  var params = window.location.search.substr(1);
  //[^&=]+ 表示不含&或=的连续字符,加上()就是提取对应字符串
  params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
    obj[$1] = $2;
  });

  return obj;
}

/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一个完整key/value,形如 xxxx=xxx, 每当匹配到一个这样的结果时就执行回调,并传递匹配到的key和value,对应到$1和$2

(3)在字符串指定位置插入新字符串

String.prototype.insetAt = function(str,offset){

  //使用RegExp()构造函数创建正则表达式
  var regx = new RegExp("(.{"+offset+"})");

  return this.replace(regx,"$1"+str);
};

"abcd".insetAt('xyz',2); //在b和c之间插入xyz
>> "abxyzcd"

当offset=2时,正则表达式为:(^.{2})  .表示除\n之外的任意字符,后面加{2} 就是匹配以数字或字母组成的前两个连续字符,加()就会将匹配到的结果提取出来,然后通过replace将匹配到的结果替换为新的字符串,形如:结果=结果+str

(4) 将手机号12988886666转化成129 8888 6666

function telFormat(tel){

  tel = String(tel);

  //方式一
  return tel.replace(/(\d{3})(\d{4})(\d{4})/,function (rs,$1,$2,$3){
    return $1+" "+$2+" "+$3
  });

  //方式二
  return tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1 $2 $3");
}

(\d{3}\d{4}\d{4}) 可以匹配完整的手机号,并分别提取前3位、4-7位和8-11位,"$1 $2 $3" 是在三个结果集中间加空格组成新的字符串,然后替换完整的手机号。

 (5) 实现函数escapeHtml,将<, >, &, " 进行转义

function escapeHtml(str) {
  //匹配< > " &
  return str.replace(/[<>"&]/g, function(rs) {
    switch (rs) {
      case "<":
        return "<";
      case ">":
        return ">";
      case "&":
        return "&";
      case "\"":
        return """;
    }
  });
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
JavaScript File分段上传
Mar 10 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
浅谈javascript中的call、apply、bind
Mar 06 #Javascript
一波JavaScript日期判断脚本分享
Mar 06 #Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 #Javascript
JavaScript实现数据类型的相互转换
Mar 06 #Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 #Javascript
javascript实现label标签跳出循环操作
Mar 06 #Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 #Javascript
You might like
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
Bootstrap插件全集
2016/07/18 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python数据处理实战(必看篇)
2017/06/11 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
关于python 跨域处理方式详解
2020/03/28 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
保险专业大专生求职信
2013/10/26 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
股权转让协议书
2014/12/07 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
python单元测试之pytest的使用
2021/06/07 Python