javascript 死磕正则

正则基础

1. 正则的声明
   使用字面量: var reg =/abc/i
   使用构造函数:var reg = new RegExp('abc', 'i')
   区别：
   • 字面量在javascript解析阶段就会新建表达式，而构造函数会在运行时新建，前者效率会更高一些。
   • 前者会更直观一点。
   • 构造函数的方式 支持变量

2. 正则对象实例的属性

//修饰符相关
reg.ignoreCase // 是否设置了i 修饰符，即是否忽略了大小写，默认值是false


// 修饰符无关
RegExp.prototype.lastIndex 下一此匹配开始搜索的位置

3. 常用的方法

1. test(str)  
当前的模式 是否能匹配到字符串参数
如果正则中包含了g , 则从上一次结束的位置（lastIndex）开始匹配

var reg = /nice/g;
var str  = "niceone";
reg.test(str)// true
reg.test(str)// false


2. exec(str) 
返回值：一个数组
[匹配结果, 第一个分组的匹配结果, ...., index: 命中匹配的起始位置, ]

var reg = /nice(a)/g;
var str = 'niceasdfniceas';
reg.exec(str)// ["nicea", "a", index: 0, input: "niceasdfniceas", groups: undefined]

reg = /(nice(a))/g

reg.exec(str);
// 第一个分组是最外层的() 所以相比上面多了一个nicea
// ["nicea","nicea", "a", index: 0, input: "niceasdfniceas", groups: undefined]

注意点：

1. 和test方法一样，如果有g全局搜索修饰符，lastIndex会后移
2. 如果匹配失败，也是返回null

使用实例：
写一个formatter(tpl, data)函数，处理hi ${name}, ${user.age}字符串。
data = {name: 'ngnice', user: {age: 10}}

var data = {
        name: 'ngnice',
        user: {
            age: 10
        }
    }
    var reg = /\$\{(.*?)\}/g;
    console.log(formatter('hi ${name}, ${user.age}', data));

    function getValue(obj, keyPath) {
        var ret ='';
        try {
            ret = eval(obj+'.'+keyPath)
        } catch (err) {

        }
        return ret;
    }

    function formatter(tpl, data) {
        var match;
        var res = tpl;
        while (match = reg.exec(tpl)) {
            console.log(match);
            res = res.replace(match[0],getValue('data',match[1]));
        }

        return res;
    }

字符串中和正则相关的方法

1. String.prototype.match 将所有匹配到的元素以数组的形式全部返回， 没有匹配到就返回null
2. String.prototype.search 返回第一个匹配到的字符串在其中的索引， 没有的话 返回-1
3. String.prototype.replace

xxx.replace(xxx, xxx);
// 可以之前匹配相关的字符进行替换
$&：匹配的子字符串。
$`：匹配结果前面的文本。
$’：匹配结果后面的文本。
$n：匹配成功的第n组内容，n是从1开始的自然数。
$$：指代美元符号$。

// 第二个参数可以是一个函数 将匹配到的字符替换成函数的返回值
xxx.replace(xxx, function replacer(match, $1, $2 ,..., index, input) {
  return $1;
})

模板引擎实现

参考：

1. https://zhuanlan.zhihu.com/p/26269716
2. 阮一峰 关于javascript中的正则介绍