快速上手正则表达式RegularExpression（正则表达式常用笔记整理）

最新推荐文章于 2022-06-12 22:23:09 发布

韦_恩

最新推荐文章于 2022-06-12 22:23:09 发布

阅读量578

点赞数 2

分类专栏：前端总结文章标签： js javascript 正则表达式

本文链接：https://blog.csdn.net/qq_42539194/article/details/115035902

版权

前端总结专栏收录该内容

25 篇文章 7 订阅

订阅专栏

背景：

在学习JavaScript的时候，接触到了正则表达式，以前写C#的时候光知道但是并没有总结如何自己写，也没有研究正则表达时候具体如何应用（毕竟网上一搜一大堆），今天就这个问题我还是写一篇博客总结一下，针对正则表达式常用概念、写法以及应用进行简单汇总，避免后面忘记。

1.基本概念

正则表达式归根到底就是一个处理字符串的一个规则，有什么就写什么，解释清楚就可以了！这一块直接偷懒引用下吧。我觉得网上说的没毛病！！！

创建正则有两种方式，

一种是JS对象风格，基本语法是let reg=new RegExp('字符串','正则式子' )，看下图解释：

另一种是使用的比较多的perl风格，语法是这样的：/^\d{1,9}$/。本文将主要以这种方式说明。

介绍完概念后，下面我将列举常用正则表达式的基本符号，力求快速上手。毕竟用不起来讲再多都等于0，毕竟不是考试么，一切为实战！！！

2.正则选项

i---Ignore(忽略大小写)

g---global(全局匹配，就是只要符合条件的全都要)

m---multiline(多行模式，因为正则默认是单行模式，只读一行。正则不会识别字符串的\n换行符号，所以想要识别多行文本，就加他)

3.正则转义

小写：

\d---digit(数字)==[0-9]

\w---word(字符)==[0-9a-z_]

\s---space(代表所有的空字符)

. --- 代表任意字符，“不代表换行”，因此==[^\n]

大写：

\D---[^0-9]

\W---[^0-9a-z_]

\S---(代表非空字符)

特殊：

|---单独一个竖线表示”或“（这东西优先级贼低）

4.常用方法

search（字符串方法，因此要拿着字符串去找正则）---类似于indexof，返回的是对应位置的下表数字。

//例：
let str='abcd';
str.indexof('a');//配合字符串用
str.search(/a/ig);//配合正则来用

match（字符串方法，因此要拿着字符串去找正则）---匹配，一般加/g，就是匹配到的全部都要，以字符串数组的形式作为结果返回。

replace（字符串方法，因此要拿着字符串去找正则）---替换，一般加/g，就是找到的就全部替换，返回替换后的字符串（后面有例子，大家也可以自己试试）。

//replace有这几种情况
//【1】replace(新字符，旧字符)
//【2】replace(新字符，function(要替换的字符){return 替换的字符（可以根据条件自定义返回内容）})
//【3】replace(/正则/，旧字符)
//【4】replace(新字符，function(要替换的字符){return 替换的字符（可以根据条件自定义返回内容）})

test（正则方法，因此要拿着正则去找字符串）---返回bool值，通常做正则判断，看是否满足要求，因为他是正则的方法，所以要拿着正则去test字符串。

注意：test是在字符串中按部分找的，说白了就是不管顺序，只要有就算。

//test的例子
let str='abcdef';
let reg=/^a+$/ig;
let res=reg.test(str);
if(res){

}
else{

}

5.谓语（修饰符）

^ ---在元字符[ ]以外代表“行首”的意思，用来限定一个字符串以******开头之后必须满足我正则表达式的要求。

$ ---行尾，用来限定以****结尾之前必须满足我正则的要求。

他俩常常合在一起，用来表示【从头到尾必须满足正则表达式的要求。写法：/^**********$/】

6.正则量词（指定数量）

正则表达式如果不加量词，默认就只管一个字符

{3} ---> 三个，{1} ---> 一个；

{n,m} --->最少n个，最多m个；

{n, } ---> 最少n个，最多不限；

{0,m} ---> 最少不限，最多m个；

+ -----> 等于{1, } 就是任意一个，必须有，至少一个，最多不限制【即在取数据的时候，满足要求的情况下尽可能长的匹配】；

* ------> 等于{0, } 就是任意个，可以没有。【易出问题，即在取数据的时候，不满足要求的数据也取了】；

？------>等于{0,1} 要不0，要不1，【可有可无，可以没有，如果有，有且只有一个】；

正则量词只管他前面最近的。

即：ab{5}=abbbbb;(ab){5}=ababababab;

7.元字符[ ]

元字符主要分为三种情况1.表示“或”的作用；2.表示“范围”；3.表示排除^

7.1 表示“或”的作用：

/a[abc]s/----->aas/abs/acs;

/a[abc]+s/----->abbs等（+的意思是至少一个）

7.2 表示“范围”（必须连续，中间除了-号外其他符号都会被认为判断条件）

[a-z]、[0-9]、[a-z0-9]等等都是表示范围的。

[3-52]------>3-5 或者2

7.3 表示排除^

[^abc]------>除了abc

[^0-9]------->除了数字

8.实例练习

在应用方面，实际写正则时候一定不要上来就写，而是应该把需求摘分成若干个部分，每个部分写正则并逐部分调试，之后再将各个部分的正则拼到一起去。切记不要上来就拼（否则绝对蒙圈）。

8.1邮箱例子【注释写了详细需求和思路】：

该例子写的很详细，一定要仔细看一下

<script>
    //[1]练习一个邮箱×××@×××.com
    //常见邮箱： 234234234@qq.com
    //          234234234@vip.qq.com
    //          asasdsfas@××.com
    //          ...................
    //[2]写法--分段
    //  [2.1]用户名：1-32个数字、字母、下划线
    //             \w{1,32}      
    //  [2.2]@
    //             \w{1-32}@
    //  [2.3]网址：1-63个数字、字母、中划线(网址可以重复循环好几个)
    //            ([0-9a-z\-]{1,63})+
    //  [2.4].
    //            ([0-9a-z\-]{1,63}\.)+
    //  [2.5]后缀：2-7个英文[.2-7个英文](最多循环一次，要不就没有)
    //            例：.com.cn可以，.com也行，但是.com.cn.bh.jk就不行(至少在后缀上不可以)
    //            [a-z]{2,7}(\.[a-z]{2,7})?
    //  [2.6]整合：/^\w{1,32}@([0-9a-z\-]{1,63}\.)+[a-z]{2,7}(\.[a-z]{2,7})?$/i


    //代码验证
    let reg=/^\w{1,32}@([0-9a-z\-]{1,63}\.)+[a-z]{2,7}(\.[a-z]{2,7})?$/i;
    let demoStr='54235@qq.com.cn.cn';
    if(reg.test(demoStr)){
        console.log('是邮箱');
    }
    else{
        console.log('不是邮箱');
    }

</script>

8.2框架数据绑定例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习框架数据绑定正则实现</title>
</head>
<body>
    
</body>
</html>
<script>
    let str='姓名：{{name}}  家庭住址：{{home}}  年龄：{{age}}';
    let data={
        name:'韦_恩',
        home:'哥谭市',
        // age:26
    };

    let res=rep(str,data);
    console.log(res);

    //替换函数
    function rep(str,data){
       return str.replace(/{{\w+}}/g,function(input){
            let objName=input.substring(2,input.length-2);
            if(data[objName]===undefined){
                console.warn(`没有定义${objName}变量`);
                return '';
            }
            else{
                return(data[objName]);
            }
        });
    }

</script>

9.总结

详细看了本文的简单说明和例子的分析，你对正则表达式一定会有个简单的认识，欢迎大佬留言补充。。。。。

最后推荐几个好用的正则表达式网站可以检查你写的是否正确并且还有常用正则写法：

https://c.runoob.com/front-end/854

http://www.regexp.cn/Regex

韦_恩

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
快速上手正则表达式RegularExpression（正则表达式常用笔记整理）

背景：在学习JavaScript的时候，接触到了正则表达式，以前写C#的时候光知道但是并没有总结如何自己写，也没有研究正则表达时候具体如何应用（毕竟网上一搜一大堆），今天就这个问题我还是写一篇博客总结一下，针对正则表达式常用概念、写法以及应用进行简单汇总，避免后面忘记。目录1.基本概念2.正则选项3.正则转义4.常用方法5.谓语（修饰符）6.正则量词（指定数量）7.元字符[ ]8.实例练习9.总结1.基本概念正则表达式归根到底就是一...
复制链接

扫一扫