360前端星计划之正则的三个使用场景

正则表达式的创建和使用

• 创建正则表达式
  • 使用正则表达式字面量const reg = /[a-z]\d+[a-z]/i;（\d表示数字0-9，+表示重复1次或多次，i表示可以匹配大写或小写）
    • 简单方便
    • 不需要考虑二次转义
    • 子内容不能重复使用
    • 过长的正则表达式导致可读性差
  • 使用RegExp构造函数const alpha='[a-z]';const reg=new RegExp('${alpha}\\d+${alpha}','i');
  • 子内容可以重复使用
  • 可以通过控制子内容粒度提高可读性
  • 二次转义容易出现问题
• 常见用法
  • RegExp.prototype.test()，要求输入字符串，如果不是字符串，则会进行类型转换，转换失败抛出TypeError；输出true或者false
  • RegExp.prototype.source指向当前正则表达式的模式文本（斜线中间的部分）；RegExp.prototype.flags指向修饰符，对修饰符按字母升序进行排序（gimsuy）。
  • 匹配：RegExp.propotype.exec()输入字符串，遇到非字符串会进行转换；String.prototype.match()，输入正则表达式，若为其他类型会先尝试转成字符串，再以字符串为source创建正则表达式。匹配成功时返回匹配字符、第一次出现的位置等；
    • 正则表达式含有g修饰符时，RegExp.propotype.exec()只返回一个匹配结果，String.prototype.match()返回所有的匹配结果，格式为字符串数组，推荐使用RegExp.propotype.exec()。
  • RegExp.propotype.lastIndex（），结合g使用，返回当前正则表达式最后一次匹配成功的位置，lastIndex不会自己重置。
  • String.prototype.replace()把目标字符串匹配到的地方进行替换，不带g时只替换第一个，带g则全部替换
  • String.prototype.search()搜寻匹配字符串出现的位置
  • String.prototype.split()

正则与数值

• 数值判断
  • /[0-9]+/ []字符集，使用-指定字符范围，若要匹配-则需要转义或挨着方括号放置，还可使用\d进行匹配数字。
    • 问题在于不是全字符匹配
  • /^\d+$/^匹配字符串开始位置，结合m表示匹配某一行开始位置，$匹配字符串结束位置，可全字符匹配
    • 问题在于不能匹配带符号的数字，不能匹配小数
  • /^[+-]?\d+(\.\d+)?$/（）内为子表达式，不带修饰符时表示创建一个捕获组；？作为限定符表示匹配0到1个；.匹配换行符以外的任意字符，结合s可匹配任意字符，.为转义。
    • 问题在不能匹配无整数的小数，捕获组增加开销
  • /^[+-]?(?:\d*\.)?\d+$/（?:）创建一个非捕获组，*匹配0个或多个
    • 问题在于不能匹配无小数部分但带.的数值，不能匹配科学计数法
• 完整的数值正则
  
  • /^[+-]?(?:\d+\.?|\d*\.\d+)(?:e[+-]?\d+)?$/i|用来创建分支
• 正则处理数值
  • 数值的解析
    例题：CSS中数字的解析，数字可能带有符号，数量不定
    • 思路：无全字符匹配，使用exec进行解析， exec不为null则循环。
    • 数值匹配/^[+-]?(?:\d+\.)?\d+(?:e[+-]?\d+)?(?=px|\s|$)/gi?=：正向肯定环视/顺序肯定环视/先行断言，用于匹配符合条件的位置。
      • ？！表示后面跟的不是
      • ?<=
      • ?<!
      • g全局匹配
    • 仍存在问题：0的判断，不同的单位及百分比等
  • 数值转货币格式（千分位加逗号）
    • /(\d)(?=(\d{3})+(,|$))/g
    • return str.replace(reg,'$1,')$n表示第n个捕获组，$&表示完整匹配
    • /(?<=\d)(?=(\d{3})+(,|$))/g可以使用反向环视
    • return str.replace(reg,',')

正则与颜色

• 16进制表示法，对应正则写法

const hex='[0-9a-fA-F]';
const reg=new RegExp('^(?:#${hex}{6}|#${hex}{8}|#${hex}{3,4})$')

• rgb/rgba数值或者百分比，对应正则写法

const num=/^[+-]?(?:\d+\.?|\d*\.\d+)(?:e[+-]?\d+)?$;
const somma = '\\s*,\\s*';
const reg = new RegExp('rgba?\\(\\s*${num}(%?)(?:${comma}${num}\\1){2}(?:${comma}${num}%?)?\\s*\\)')

- \n表示引用第n个捕获组 
- \s用于匹配空白
- 捕获组内的内容可选时，问号写在捕获组内

• 用正则处理颜色
  例题：两两相等时缩写
  • (?<key>) 具名捕获组，反向引用时语法为\k<key>，replace中用$<key>访问，exec时，通过execResult.group[key]访问

正则与URL

• 用正则解析URL
  • 思路：使用变量创建一些具名捕获组
• 用正则解析search和hash
  • *?：?可以跟在任何限定符之后，表示非贪婪模式
  • y：粘连修饰符，每次匹配的结果必须是连续的，在match时只会返回第一个匹配结果
  • 正则如果可能匹配到空字符串，可能造成死循环，要注意跳出。
    
    （待解决…）