【前端32_高级】正则表达式：元字符、断言、匹配模式

正则

为什么要学正则，正则这东西可真的太神奇了，可以把字符串弄得服服帖帖的，不然你跟字符串相处就不是那么亲昵 hhhh

---

参考

开课吧的网课~这里是个整理

---

入门：提取数字

给你一串字符串 123jkh123hjk213h213jk43bmnb，请把这里的数字提取出来

第一种方法，写个函数

function getNumber(str){
    let arr = [];
    let temp = "";
    for(let i=0;i<str.length;i++){
        // console.log(typeof str[i]);
        if(!isNaN(str[i])){
            // console.log("数字");
            temp += str[i];
        }else{
            // console.log("非数字");
            if(temp!=""){
                arr.push(temp);
                temp = "";
            }
        }
    }
    if(temp!=""){
        arr.push(temp);
    }
    return arr;
}
let res = getNumber(str);
console.log(res);

判断字符串中是不是数字可以用isNaN()

第二种方式：正则

let reg = /\d+/g;
let arr = str.match(reg);
console.log(arr);

---

详解

创建正则

• 字面量
• 构造函数

let str = "dsajlkjrwlj";
let regExp1 = /\d+/g;						// 字面量创建正则
let regExp2 = new RegExp("\\d+","g")		// 构造函数创建正则，第二个参数是匹配模式

---

跟正则相关的字符串方法

split

let str = "babbabbbabbbb";
let arr = str.split(/a/);
console.log(arr);	// (4) ["b", "bb", "bbb", "bbbb"]

replace

let str = "abcd1234";
let reg = /\d+/g;
let res = str.replace(reg,"*");
console.log(res);   // abcd*

可以用来做敏感词过滤，可以看下一个例子

let str = "澳门赌场，真人发牌，av女优";
// 教育部 、 人员；
let reg = /赌场|av|女优/g;
// let res = str.replace(reg,"*");
let res = str.replace(reg,function(arg){
    // 回调函数中能够拿到匹配到的结果
    str.replace(reg,"*");
    return "*".repeat(arg.length);
})
console.log(res);   // 澳门**，真人发牌，****

match

let str = "abcd1234";
let reg1 = /\d+/g; 
let reg2 = /\d+/; 
// 如果不是全局匹配的话，他会拿到很多详细的
let res1 = str.match(reg1);
let res2 = str.match(reg2);
console.log(res1);   // ["1234"]
console.log(res2);   // ["1234", index: 4, input: "abcd1234", groups: undefined]

search

// 4.search:匹配第一个符合结果的索引值位置；如果找不到 就返还-1；
// 忽略全部匹配；所以加g 或者 不加g 没什么区别
let str = "fdsfda323fdaf1232";
let reg = /\d+/;
let res = str.search(reg);
console.log(res);

---

元字符

啥叫元字符呢？

元字符：正则中有特殊含义的非字母字符；
比方说. *(0次或者多次) + ? $ ^ | \ () [] {};

下面会一一介绍每个元字符的作用

. 除了 \n \r \u2028 或 \u2029 以外的所有字符

\ 转义：将特殊含义转换成字面量含义

* 出现零次或多次

^ 开头、$结尾、\w 字母、数字、下划线

// let str = "cde__111fg";
let str = "cde__111f";      // 测试的话改这里
// let reg = /^c\w+g$/g;
let reg = /^c\w+g$/g;
// let res = reg.test(str);
let res = str.match(reg);
console.log(res);

[] 字符集合

let str = "dffdabfds123fdabfdb435afdsa";
// let reg = /a|b/g;
let reg = /[ab]/g;      
let reg = /[^ab]/g; // 尖括号写在集合里面，就是取反的意思      
let res = str.replace(reg,"*");
console.log(res);

// 以下两个意思相同
let reg1 = /\d+/g;
let reg2 = /[0-9]+/g;

// 多种方式
// . === [^\r\n]
// \d === [0-9];
// \w === [a-zA-Z_0-9];

\b 边界：非 \w 都被称为边界；

// 想要匹配 前面的is ，而不是 this 中的 is
let str = "is this a book?";
let reg = /\bis\b/g;
// let reg = new RegExp("\\bis\\b","g");
let arr =  str.match(reg);
console.log(arr);

{} 说明匹配的数量

() 分组

let str = "abfdssafdsababljljabssfd";
/* 
    ? --- {0,1} 
    + --- {1,} 
    * --- {0,}     
    {2};
*/
let reg = /s{2}/g;      // {} 指定数量
let reg = /(ab){2}/g;   // abb
let res = str.replace(reg,"*");
console.log(res);

$反向引用：根据分组

// 转换时间格式：2019-10-19  ---->  19/10/2019;
// 反向引用；
let mytime = "2019-10-19";
let reg = /(\d{4})-(\d{1,2})-(\d{1,2})/g;
let reg1 = /(\D+)/g;
let res = mytime.replace(reg,"$3/$2/$1");       // 正则里的东西，拿过来引用，通过分组
console.log( RegExp.$1 );                       // 2019

let res1 = mytime.replace(reg1,"-");            // 
console.log( RegExp.$1 );                       // -        
console.log(res);                               // 通过 RegExp 反向引用是有顺序的，应该是保留最后一次用正则的结果

命名分组：?<分组名> ES2018 新增特性

let str = "$name=zhangsan&age=20";
let reg = /\$(?<str>\w+)/;
let res = str.match(reg);
console.log(res.groups.str);

零宽断言

这是 ES2018 也就是 ES9 的语法。

我理解的啊

所谓的正向反向是针对 断言 的，（断言的意思就是猜测，不确定的东西。比方说 iphone6、iphone7 等等，这些数字就是需要猜测的）

正向断言就是：猜后面，改前面
反向断言就是：猜前面，改后面

正向肯定断言

分组之后 (?=)

let str = "iphone3iphone4iphone11iphoneNumber";
// iphone 换成“苹果”;
// 匹配的条件是 iphone 后面必须接 一到两个 数字
let reg = /iphone(?=\d{1,2})/g;
let res = str.replace(reg,"苹果");
console.log(res);       // 苹果3苹果4苹果11iphoneNumber

正向否定断言

(?!)

let str = "iphone3iphone4iphone11iphoneNumber";
// iphone 换成“苹果”;
let reg = /iphone(?!\d{1,2})/g;
let res = str.replace(reg,"苹果");
console.log(res);   // iphone3iphone4iphone11苹果Number

负向肯定断言

(?<=)

// let str = "10px20px30pxipx";
// // px-->像素；
// let reg =  /(?<=\d{2})px/g;
// let res = str.replace(reg,"像素");
// console.log(res);   // 10像素20像素30像素ipx

负向否定断言

(?<!)

// 负向否定断言；猜前面，改后面
let str = "10px20px30pxipx";
// px-->像素；
let reg =  /(?<!\d{2})px/g;
let res = str.replace(reg,"像素");
console.log(res);       // 10px20px30pxi像素

匹配模式

// 匹配模式
// g:全局匹配
// i:忽略大小写；
let str = "aaaaaAAAAAA";
let reg = /a/g;
let reg1 = /a/gi;
let res = str.replace(reg,"*");
let res1 = str.replace(reg1,"*");
console.log(res);   // *****AAAAAA
console.log(res1);  // ***********

m 多行匹配

let str = `aaaaa
aaaaa`;
let reg1 = /^\w/g;
let reg2 = /^\w/gm;
let res1 = str.replace(reg1,"*");
let res2 = str.replace(reg2,"*");
console.log(res1);  
/* *aaaa
    aaaaa */

console.log(res2);
/*  *aaaa
    *aaaa */

s 可以让 . 匹配到换行符

let str = `<div>som
    e value..</div>`;
let reg1 = /<div>.*<\/div>/g;
let reg2 = /<div>.*<\/div>/gs;
// “\” 转义：将特殊含义转换成字面量含义；
let res1 = reg1.test(str);
let res2 = reg2.test(str);
console.log(res1);      // false
console.log(res2);      // true

u

// `\uD842\uDFB7` 是 汉字 𠮷
console.log(/^.$/.test("\uD842\uDFB7"));     // false
console.log(/^.$/u.test("\uD842\uDFB7"));    // true

y 粘性模式，只匹配第一个，之后的就匹配不到了。

let str = "12ab34cd";
let reg1 = /\d+/g;
let reg2 = /\d+/gy;
console.log(reg1.exec(str));    // ["12", index: 0, input: "12ab34cd", groups: undefined]
console.log(reg1.exec(str));    // ["34", index: 4, input: "12ab34cd", groups: undefined]

console.log(reg2.exec(str));    // ["12", index: 0, input: "12ab34cd", groups: undefined]
console.log(reg2.exec(str));    // null

都滑倒底了，如果对你有帮助的话，点个赞再走吧~