一直以为没有机会用，但是在仿vue2.0的mvvm模式时，有一个纯文本替换其中的{{expr}}为目标value的操作。直接抄别人写的不过瘾(其实是我自己打断点调试时，发现别人写的处理的还是不太到位)，还是自己再复习一把。

1.RegExp

RegExp是JS内置的对象。正则对象创建一个RegExp两种方式

new RegExp(patter,attributes)

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

new RegExp("a")匹配一次字符串
new RegExp("a","g") 全局匹配a字符串,多次匹配

字面量

/a/ 匹配一次字符串
/a/g 全局匹配a字符串,多次匹配

观察一下RegExp的实例化属性是什么准确的类型。是一个"[object RegExp]"

Object.prototype.toString.call(/a/)
"[object RegExp]"

2.RegExp.prototype.test()

regexObj.test(str) 参数:目标字符串返回值:是否匹配成功Boolean

/abc/.test("qabcqqq")  true

总结: 主要就是用来判断字符串是否有符合匹配的正则

3.String.prototype.match()

这是字符串提供的匹配方法语法

str.match(searchStr)匹配普通字符串
str.match(regexp)匹配正则表达式

3.1 str.match(searchStr)

如果匹配的是普通字符串"qwer".match("w")类似于indexOf 和lastIndexOf 。

区别:

indexOf 和lastIndexOf返回的是匹配的索引值，如果没有匹配成功返回-1
match匹配成功返回的是一个数组。失败返回null。成功的数组索引0就是匹配的searchStr。数组的index属性才是匹配成功字符串所在的索引值。(说实话，个人感觉没有indexOf好用)

3.2 str.match(regexp)

匹配的是正则表达式。匹配正则时，会根据是否有g全局匹配还出现不同的返回值

正则没有g属性时，和匹配普通字符串返回结果一直。有则返回一个数组，无则返回null
正则带有g全局匹配时。返回结果也是一个数组，但是数组中的值。是出现了几个searchStr。匹配不成功就是null

总结:个人感觉字符串的match方法用的确实少。

4 String.prototype.replace()

语法:第一个参数是需要替换的oldStr.第二参数是替换后的newStr。不会改变原字符串，返回全新字符串

str.replace(regexp|substr, newSubStr|function)

第二个参数为函数时，函数的参数。你可以自己打断点或者console看看

解决问题:抽离纯文本中的{{}}替换为对应的值

   let data = {
        msg: "这是一条消息",
        age: 18,
        flag: true,
        person: {
          name: "武汉加油"
        }
      };
      //目标文本
      let str =
        "消息:{{msg}}年龄:{{age}}:真还是假:{{flag}}:地区姓名:{{person.name}}";
      function exec(str) {
        // 记得全局匹配。记得多行匹配。.* 为贪婪匹配，我不能不需要。所以.*? 非贪婪匹配
        let reg = /\{\{(.*?)\}\}/g;
        let newStr = str.replace(reg, function(...args) {
          // 替换匹配的{{}}为最新的值
          return getVal(args[1], data);
        });
        return newStr;
      }
      // 根据表达式和数据。返回指定的值. expr:msg   return "这是一条消息"
      function getVal(expr, data) {
        // 根据表达式返回最新的值
        return expr.split(".").reduce((data, item) => {
          return data[item];
        }, data);
      }
      // 执行
      let newStr = exec(str);
      console.log(newStr);//消息:这是一条消息年龄:18:真还是假:true:地区姓名:武汉加油

强大:只要你厉害，这个可以玩出花

参考

学习的话，基本语法什么掘金有很多文章，就不贴出来。 juejin.cn/post/684490…正则表达式真的很骚，可惜你不会写！！！ developer.mozilla.org/zh-CN/docs/…MDN

工具

regexper.com/ 解析正则表达式.尤大推荐的

JS中使用正则替换