技术成神

Appearance

Return to top
本页目录

正则表达式

8个例子入门正则表达式 image-20230408122657633 不知道正则是啥,可以去Regex.ai - Artificial Intelligence Regular Expression Generator这个智能生成正则表达式的网站去直观感受一下

1.用字符串函数处理字符串与用正则对象处理字符串的对比

js
/**
    写一个方法,提取字符串的数字字符组合的数组
**/
let str = "520$qqq13we14d2331";
function f(str){
    let res = [];   //接收数字的数组
    for(let i=0;i<str.length;i++){
        let x = str.charAt(i);
        if(parseInt(x)==x){
            res.push(x);
        }
    }
    return res;
}
console.log(f(str));  
// [5,2,0,1,3,1,4,2,3,3,1]
// 是数字先不push先拼接,不是数字字符再push
function f2(str){
    let tmp = "";   //准备拼接的字符串
    let res = [];   //接收数字的数组
    for(let i=0;i<str.length;i++){
        let x = str.charAt(i);
        if(parseInt(x)==x){
            tmp += x;
        }else{
            tmp&&res.push(tmp); //push的前提是字符换存在
            tmp = "";
        }
    }
    tmp&&res.push(tmp);     //最后一步再检测一次
    return res;
}
body.innerHTML = f2(str);
console.log(f2(str));  


//换成正则表达式,非常简洁
function f3(str){
    return str.match(/\d+/g);
}
console.log(f3(str));

2.声明匹配规则的两种方式

js
//正则其实是正确的规则,正则的核心是先有规则再通过api匹配到正确的字符串
// 如何声明正则表达式的规则方式1
let reg = /龙/  ;  //匹配字符串的规则
//测试
let str = "译文叶公子高非常喜欢龙，衣带钩、酒器上都刻着龙，屋子内外都雕刻着龙。他这样爱龙，被天上的真龙知道后，便从天上来到叶公的住所，龙头搭在窗台上探看，龙尾伸到了厅堂里。叶公一看是真龙，转身就跑，被吓的像失了魂似的，惊恐万状，茫然无措。由此看来，叶公并不是真的喜欢龙，他喜欢的只不过是那些像龙却不是龙的东西罢了。"
// 学习第一个api  r.test(s) 
/**
    匹配成功返回布尔值
    匹配成功返回布尔值true,否则返回false
*/
console.log(reg.test(str));
body.innerHTML = reg.test(str);


//声明正则表达式的规则方式2
//如果匹配规则中的字符串是未知的,需要用一个变量来给出对应的正则表达式
let a = "龙"
let reg2 = new RegExp(a);

console.log(reg2.test(str));
body.innerHTML = reg2.test(str);

3.斜杆与反斜杠的匹配规则写法

js
// 如何定义一个带有/的字符串的规则
let reg = /\//
let str = "男/女";
console.log(reg.test(str));

//如何定义一个反斜杠的字符串规则
let reg2 = /\\/;        
let str2 = "男\\女"         //字符串中如果要显示\也需要转义一次

console.log(reg2.test(str2));

4.修饰符

js
/**
 * 修饰符
 *   i   不区分大小写
 *   g   全局匹配   找过继续找 用在match方法上才有意义  规则加g的时候返回数组就很干净全部是匹配到的字符串
 *   m   换行匹配
 *
 *  正则表达式创建方式
 *  var reg = /ask id/修饰符    字面量形式
 *  var reg = new RegExp(字符串,修饰符)   构造函数形式
 */

let str = /Abc/;

let reg = /abc/;
let reg1 = /abc/i;
console.log(reg.test(str));
console.log(reg1.test(str));

let reg2 = /\d+/g;
let str1 = "1234zx2345styui 123e4r";
console.log(str1.match(reg2));

5.表达式(字符集).js

js
//前面是确定匹配,现在是模糊匹配
/**
 * 字符集 用来表示字符区间
 *  范围
 *      [2-7] 匹配2-7之间的任意一个字符
 *      [a-K]   
 *      [A-Z]
 * 
 *  本质上,是两个字符的unicode编码区间的范围
 * 
 * 或者:
 *  [abc]  a或者b或者c   无论正括号写几个只匹配一个
 *  [阿飞0-9]  阿或者飞或者0~9之间的任意字符
 *
 * 非:
 *  在表达式开头加上^ [^a]
 */


let reg1 = /[abc]/g;
let reg2 = /[abc]+/g;
let str = "abdc";
console.log(str.match(reg1));
console.log(str.match(reg2));

//除了用表达式来表示单个字符或关系   
//如果表达字符组的或关系,可以在子项里用 | 逻辑运算符 / (abc | bcd) / 表达或关系
let reg3 = /(abc|bcd)/

6.元字符(特殊的转义字符).js

js
//元字符本质也是表达式
//一个元字符只能匹配到一个字符

//  \s  含义空格/换行/tab      \S  非\s  非空    
//  [\n\f\r\t\v]表示能显示空白的字符
let reg = /\s/;
let reg2 = /\S/;
let str = `叶公 好龙`;
let str2 = `叶公好龙`;
let str3 = `   `;

//  \w  含义数字 字母 _      \W  非\w  非数字 字母 _        适用场景:注册用户名的时候
//\w === [0-9A-z]    \W === [^\w]
let reg3 = /\w/;
let reg4 = /\W/;
let str4 = `叶公好龙123`;
let str5 = `叶公好龙_`;

// \d 匹配数字          \D 非\d 不匹配数字                字符串中没有数字 只有一个一个的数字字符串  
// \d===[0-9]   \D === [^\d]
let reg5 = /\d/;
let reg6 = /\D/;

let reg7 = /jack/;
let reg8 = /\bjack\b/;  //表示jack前后都有单词边界
let reg9 = /\b阿飞\b/;   //汉字每个字之间都有间隔,无论如何都是true
let str6 = `jaclLove is a busnissman`
let str7 = `jaclLove is a busnissman`
let str8 = `jacl-Love is a busnissman`
let str9 = `阿飞飞`

7.量词.js

js

// 匹配字符串有没有10位数字
let reg = /\d\d\d\d\d\d\d\d\d\d/;

let str = "hello1234567890";
let str1 = "hello1234567890123";
console.log(reg.test(str));

//当多个重复规则或者字符的需求的时候,需要用量词去简化规则
let reg2 = /\d{10}/;

console.log(reg2.test(str));

//确定最小个数的写法,多于10也能匹配成功
console.log(reg2.test(str1));
// 确定指定个数的写法  修饰词 ^开始 $结束 必须要10不然false
let reg3 = /^\d{10}$/;
console.log(reg3.test(str1));

//量词的三种形式
//确定量词
//{n}  确定个数n
//模糊量词
//{n,m}  n~m包含n也包含m
//{n,} 最少n 最多不限制
//没有这种写法{,n}因为量词没有负数只能写{0,n}

//特殊的量词,符号代替常用的量子
//{1,}  ===   +
//{0,}  ===   *
//{0,1}  ===  ?    有也行没有也行

let str2 = "言心酱老师";
let str3 = "言心酱酱酱酱酱老师";
let reg4 = /言心酱?老师/;
let reg5 = /言心酱*老师/;
console.log(reg4.test(str2));
console.log(reg5.test(str3));

// /tel:\d??/  ===/tel:\d{0,1}?/

8.match返回字符数组api与模糊量词匹配的惰性原则

js
//学习一个新的api
//s.match(r)
//匹配成功,返回包含着复合规则的字符的数组,否则返回null
//默认为贪婪,设置惰性,量词后面加?

let str = "a456777891231234567890w"
let str2 = "a45677789w"
let reg = /\d{4}/;

console.log(str.match(reg));
//[ '4567', index: 1, input: 'a45677789', groups: undefined ]

let reg2 = /\d{4,8}/;  //默认贪婪,默认看最大的
console.log(str.match(reg2));


let reg3 = /\d{4,8}?/;  //设置惰性,默认看最小的
console.log(str.match(reg3));

let reg4 = /\d{4,}/;  //设置惰性,默认看最小的
console.log(str.match(reg4));