正则高级应用

一、正则捕获

js正则捕获：把符合某个规则的字符串获取到；

+常见的捕获方法：

RegExp.prototype.exec(str);
String.prototype.match();

懒惰性

let reg = /\d+/;
let str = 'hello111 hello222 hello333';

console.log(reg.exec(str)); ['111', index.....]
console.log(reg.exec(str)); ['111', index.....]
console.log(reg.exec(str)); ['111', index.....]
console.log(reg.lastIndex); 0

console.log(str.match(reg)); ['1111']
console.log(str.match(reg)); ['1111']
console.log(str.match(reg)); ['1111']

取消懒惰性：给正则增加修饰g

let reg2 = /\d+/g;
let str2 = 'hello111 hello222 hello333';

console.log(reg2.exec(str2));
console.log(reg2.exec(str2));
console.log(reg2.exec(str2));
console.log(reg2.lastIndex);

console.log(str2.match(str2));

贪婪性：按照匹配做多的去捕获，

解决贪婪性：给量词元字符后面加 ?

分组捕获：

let reg3 = /hello(\d+)/g; 使用小括号表示正则分组
console.log(reg3.exec(str)[1]);
console.log(reg3.exec(str)[1]);
console.log(reg3.exec(str)[1]);

除了通过[索引]访问分组，在RegExp上有几个属性记录正则分组捕获的内容 RegExp.$1 表示第1个分组的捕获内容; 在RegExp上有 $1-&'] 表示整个正则捕获到的内容

console.log(RegExp.$1);
console.log(RegExp['$&']);

二、正则的高级应用

1. 配合replace使用

String.prototype.replace(匹配内容, '替换内容');



let str = 'zhufeng2018 zhufeng2019';

把字符串中的 nihao 替换成 你好

let result = str.replace('nihao', '你好');
console.log(result); // 你好2018 nihao2019

一次只能替换一个，那么有没有什么办法一次都替换掉呢？

replace(正则, callback); replace配合正则使用时

let i = 0;
let reg = /(zhufeng)/g;
let r2 = str.replace(reg, function (...arg) {
  // 回调函数的参数：
  // 第一个：整个正则匹配到的内容
  // 如果有分组，会从第二个参数
  // 倒数第二个参数是 本次捕获的的起始索引位置
  // 最后一个参数是当前原始字符串
  i++;
  console.log(arg);
  return '你好'
});
console.log(r2);
console.log(i); // 2 说明回调函数执行了2次；

2. 格式化时间字符串: 按照时间模板格式时间字符串

"2019/6/30 17:50:23" => '06-30 17:50'
2.1 获取时间字符串中所有时间数字


let str2 = "2019/6/30 17:50:23";
let reg2 = /\d+/g;
let ary = str2.match(reg2);
console.log(ary);

2.2 判断如果这些数字比10小，需要补0

let addZero = ary.map(item => +item < 10 ? '0' + item : item);
console.log(addZero);

2.3 根据模板把时间格式化

let tmp = '{0}年{1}月{2}日 {3}时{4}分{5}秒';
let tmpReg = /\{(\d)\}/g;
let result2 = tmp.replace(tmpReg, function ([, index]) {
  return ary[index];
});
console.log(result2);

扩展到原型上

String.prototype.myFormatTime = function (tmp = '{0}年{1}月{2}日 {3}时{4}分{5}秒') {
  let ary = this.match(/\d+/g).map(item => +item < 10 ? '0' + item : item);
  return tmp.replace(/\{(\d)\}/g, (...[, index]) => ary[index]);
};

console.log("2018/4/30 17:50:23".myFormatTime('{1}-{2} {3}:{4}:{5}'));

3. url查询参数格式化

let url = 'http://www.zhufeng.cn?name=mabin&age=18&form=zf&addre=hebei';

把上面的url参数的转换成一个对象：{name: 'mabin', age: '18'}

let params = {};
let reg3 = /([^?=&]+)=([^?=&]+)/g;
url.replace(reg3, (str, key, value) => params[key] = value);
console.log(params);

扩展到原型上

String.prototype.urlSeries = function () {
  let params = {};
  let reg3 = /([^?=&]+)=([^?=&]+)/g;
  this.replace(reg3, (str, key, value) => params[key] = value);
  return params
};
let result3 = url.urlSeries();
console.log(result3);

4. 获取数据类型

Object.isTypeOf = function (val) {
  let res = Object.prototype.toString.call(val); // "[object Xxxx]"
  let reg = /^\[object ([a-zA-Z]+)\]$/; // 在正则使用某些特殊元字符的原义时需要转义
  let exec = reg.exec(res)[1];
  return exec.toLowerCase();
};
console.log(Object.isTypeOf(1));