JS的正则表达式

正则表达式

什么是正则？正则有什么用？

正则的基本概念

正则：简单点来说他就是用来处理"字符串"的规则,他有量大特点：匹配与捕获，首先正则只能处理字符串，他是处理字符串的规则

匹配

验证当前字符串是否符合我设定的规则

捕获

把字符串中符合规则的部分捕获到

创建正则的两种方式

字面量方式

• 在两个斜杠中间包含一堆元字符；g是修饰符;
• 字面量方式不能把一个变量存储的值，作为正则的规则放进来；
• let reg1 = /\d+/g;

构造函数方式

• 包含元字符和修饰符的都是字符串
• 字符串有一个问题：“再字符串中不能单独出现一个\，如果需要出现，必须再拿一个\把它转义一下”
• 构造函数方式可以用字符串的变量，需要用"@“拼接一下
• let reg2 = new RegExp(”\d+",“g”);

正则表达式中的元字符和修饰符

量词元字符:

代表出现的次数

    * 零到多次  
    + 一到多次
    ? 零次或者一次
    {n} 出现n次
    {n,} 出现n到多次
    {n,m} 出现n到m次

特殊元字符

有自己特殊含义

    \转义字符(普通-特殊-普通)
    . 除\n（换行符）以外的任意字符
    ^ 以哪一个元字符作为开始
    $ 以哪一个元字符作为结束
    \n 换行符
    \d 0~9之间的一个数字
    \D 非0~9之间的一个数字 （大写和小写的意思是相反的）
    \w 数字、字母、下划线中的任意一个字符
    \s 一个空白字符（包含空格、制表符、换页符等）
    \t 一个制表符（一个TAB键：四个空格）
    \b 匹配一个单词的边界
    x|y x或者y中的一个字符
    [xyz] x或者y或者z中的一个字符
    [^xy] 除了x/y以外的任意字符
    [a-z] 指定a-z这个范围中的任意字符  [0-9a-zA-Z_]===\w
    [^a-z] 上一个的取反“非”
    () 正则中的分组符号
    (?:) 只匹配不捕获
    (?=) 正向预查
    (?!) 负向预查 

修饰符

  i =>ignoreCase  忽略单词大小写匹配
  m =>multiline   可以进行多行匹配
  g =>global      全局匹配

分组(用括号包起来)

分组的作用：

• 解决优先级(权重问题);使用x|y基本上必加括号
• 分组捕获:正则在捕获的时候，除了可以把大正则匹配的信息捕获到，而且还可以把正则中每一个小分组匹配的信息单独捕获到;如果写了分组，但是不想在捕获的时候捕获，需要加 ?；

分组引用：

• \1出现和第一个分组一模一样的内容 …\n出现和第N个分组一模一样的内容
?的作用
• ？本身是量词元字符，代表出现0-1次
• 取消正则捕获的贪婪性
• (?:)只匹配不捕获
• (?=)正向预警
• (?!)负向预警
常用的正则表达式
验证是否为有效数字
• 正负数：可以出现可以不出现
• 整数：一位数0-9 两位数不能以0开始；整数必须有
• 小数：点后面必须有一位数字；可以有可以没有
• let reg = /¹?(\d|(1-9)\d+)?$/;

验证密码"数字、字母、下划线 & 6-16位"

• let reg = /^\w{6,16}$/;
验证真实姓名 [\u4E00-\u9FA5]
• let reg = /^[\u4E00-\u9FA5]{2,}(·[\u4E00-\u9FA5]{2,})?$/;

验证邮箱

>• let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

验证身份证号

• 规则：18位，前17位必须是数字，最后一位可以是x或者数字

• let reg = /^\d{17}(X|\d)$/;

正则的捕获

正则捕获是具备"懒惰性"的：

• 默认情况下，正则每一次捕获，只能把第一个匹配的信息拿到，其余匹配的信息无法获取;

懒惰原因

• lastIndex存储的是下一次正则捕获的时候，从字符串的哪个索引开始查找，默认是0
• 每一次捕获完，正则的lastIndex值是不变的，所以下一次捕获还是从零开始，找到的还是第一个匹配的结果
改变懒惰
• 给正则设置一个全局修饰符G，让其全局匹配[可以改变lastIndex的值]，从而解决懒惰性问题
• 字符串有一个办法match，默认就具备了execAll的功能;但是有自己的局限性，在正则设置了g的情况下，执行一次match，虽然可以把大正则匹配的信息都捕获到，但是无法捕捉到小分组中的信息…而exec方法虽然要执行多次，但是每一次，不仅大正则匹配的信息捕获到了，而且每一个小分组匹配的信息也拿到了
正则的贪婪性：
• 默认情况下，正则每一次捕获的结果都是按照其"最长"匹配的信息捕获

• 解决办法：

• ？；如果左边是一个非量词元字符，那么它本身代表量词，出现零到一次
• 如果左边是一个量词元字符，则是取消正则捕获的贪婪性

正则捕获的方法

• match
• execAll
• test
• replace
test
• test是正则的匹配，但是也可以实现捕获的效果
• 正则设置了g，每一次执行test，也要在字符串中找到匹配的信息(相当于捕获)，也会改变正则的lastIndex值，那么下一次exec的时候，是从上一次的lastIndex开始往后找

replace(正则，回调函数)：
• 首先拿正则和字符串去匹配，每匹配一次，都会把"回调函数"执行一次
• 并且会把每次正则和字符串捕获的结果(基于EXEC 数组)分别传递给回调函数
• 每一次回调函数中返回啥，都相当于把当前大正则匹配的结果替换成啥

时间字符串格式化处理

• formatTime：时间字符串的格式化处理 * @params
templete:[string] 我们最后期望获取日期格式的模板
模板规则:{0}->年 {1~5}->月日时分秒
@return
[string]格式化后的时间字符串
by zhufengpeixun on 2021/05/05
String.prototype.formatTime = function formatTime(template) {
// this -> str 要处理的时间字符串
if (typeof template === “undefined”) template = “{0}年{1}月{2}日 {3}时{4}分{5}秒”;
// 1.先获取到时间字符串中的“年月日时分秒”信息
let arr = this.match(/\d+/g); //[“2021”, “5”, “5”, “17”, “25”, “3”]

把template模板中的“{数字}”替换成为arr数组中的某一项，而且{}中的数字就是我们从arr中取值的索引

return template.replace(/\{(\d+)\}/g, (val, $1) => {
    let item = arr[$1] || "00";
    if (item.length < 2) item = '0' + item;
    return item;
});

};
let str = ‘2021/5/5 17:25:3’; //变为 “05月05日 17:25” “2021年05月05日” “05-05 17:25” …
console.log(str.formatTime());
console.log(str.formatTime(’{1}月{2}日 {3}:{4}’));
console.log(str.formatTime(’{0}年{1}月{2}日’));
console.log(str.formatTime(’{1}-{2} {3}:{4}’));
queryURLParams：

• 获取URL地址问号和面的参数信息（可能也包含HASH值）
• @params * @return
• [object]把所有问号参数信息以键值对的方式存储起来并且返回

• by zhufengpeixun on 2021/05/05
String.prototype.queryURLParams = function queryURLParams() {
    // this->url
    let obj = {};
    this.replace(/#([^?&#=]+)/g, (_, $1) => obj['HASH'] = $1);
    this.replace(/([^?&#=]+)=([^?&#=]+)/g, (_, $1, $2) => obj[$1] = $2);
    return obj;
};
let url = 'http://www.zhufengpeixun.cn/index.html?name=xxx&age=12#teacher';
console.log(url.queryURLParams());
{name:'xxx',age:'12',HASH:'teacher'}

millimeter：实现数字的千分符处理

• @params  
• @return
• [string]千分符后的字符串
• by zhufengpeixun on 2021/05/05
String.prototype.millimeter = function millimeter() {
    let result = this.replace(/\d{1,3}(?=(\d{3})*$)/g, val => val + ',');
    return result.substring(0, result.length - 1);
};
let str = '12343424567';
console.log(str.millimeter());
'12,343,424,567'

若有收获，就点个赞吧

---

1. +- ↩︎