web前端学员笔记

十分钟掌握Javascript正则表达式

2019-05-30  本文已影响305人  LongFor_

    前端界有这么一句话:会正则的不一定是大牛,但是不会正则的一定不是大牛。所以正则对于前端工作者还是相当重要的一门课程。

    在阅读之前,先来看一看正则到底是什么东西。正则,简单点说,它就是用来处理某一传字符串,相当与起到一个过滤的作用,在字符串中找到符合自己要求的字符集。

1.怎样去创建一个正则表达式:

        两种方法去创建一个正则表达式。第一种方式是通过两个//进行创建。

        例如  var Reg = /'hello'/(修饰符)

        上面的正则表达式代表在某个字符串中匹配'hello',修饰符会在后面做详细介绍。

        第二种方法是通过构造函数的方式进行创建。

        例如:var Reg = new RegExp('hello','修饰符');

        这个方法和第一个方法匹配的效果是一致的。

        两种方法不同的地方是第一种方法的匹配条件是写在//中间,修饰符是跟在//后面去写

        第二种方法的条件以及修饰符都是传在()内,第一个值代表条件,后面的代表修饰符。

 2.修饰符

        g:global 全局搜索,不添加搜索到第一个停止

            表示在一个字符串存在多个相同的字符集,如果不写全局搜索,即会在找到一个以后

            返回,而写了全局搜索则会把所有符合条件的字符集都找出来,然后再返回。

        i:ignore case 忽略大小写,默认为区分大小写

            区分大小写的功能

        m:multiple lines 多行搜索。

            如果某个字符串中存在多个相同的字符集,且这些字符集没有在同一行,就可以使用

            多行搜索进行匹配。有一点需要注意的是,多行搜索需要全局搜索的配合。即//gm

        这是常用的三个修饰符g、i、m

 3.正则对象以及字符串方法:

        正则对象(exec):

            该方法表示在字符串中寻找符合正则条件的字符集,如果没有找到,则会返回null

            找到了则会返回一个数组,数组下标为0的元素及代表匹配到的字符集,index即代表                  字符集的起始下标,input代表的是原字符串。

            使用方法:拿上面声明的正则做例子,即Reg.exec(字符串)

        正则方法(test):

            该方法放回一个Boolean值。即字符串中有符合正则条件的字符集,即返回true

            如果没有,即返回false。

            使用方法:拿上面声明的正则做例子,即Reg.test(字符串);

        字符串方法(replace)

            该方法表示替换字符串中的某个字符集。接受两个参数,第一个参数为匹配的元素

            第二个为替换的元素。第一个参数的中可以传正则表达式。

            使用方法:字符串.replace('匹配的值','替换的值');

         字符串方法(search)

              该方法表示如果匹配到了某个字符集,则返回该字符集的下标

               使用方法:字符串.search('匹配的值');

         字符串方法(match)

                该方法表示在字符串中寻找符合正则条件的字符集,如果没有找到,则会返回null

                如果找到了则会返回一个数组,下标为0的元素即匹配到的字符集

                index即此字符集的起始下标 input原字符串

                如果匹配到了多个字符集则返回匹配到的字符集组成的数组。

    3.元字符

                一种是原意文本字符

                一种是元字符。

                \t:水平制表符

                \v:垂直制表符

                \n:换行符

                \r:回车符

                \0:空字符

                \f:换页符

                \cX:与X对应的控制字符(Ctrl+X)

        范围类

                ()使用可以进行分组

                []表示一个类

                ^创建反向类

                [a-z]表示字母a到字母z也可以这样写[a-zA-Z]

                -线在开头和结尾之间的代表范围。在外面代表元素

        预定义类:

                .(点)= [^\r\n] 除了回车和换行外的所有字符

                \d = [0-9] 数字字符

                \D = [^0-9]非数字字符

                \s = [\t\n\x0B\f\r]空白符

                \S = [^\t\n\x0B\f\r]非空白符

                \w = [a-zA-Z_0-9]单词字符(字母、数字、下划线)

                \W = [^a-zA-Z_0-9]非单词字符

        边界字符:

                例如var str = '@ab@cd@ef@'

                    ^:以xxx开始 /^@/g

                    $:以xxx结束/@$/g

                    \b:单词边界

                    \B:非单词边界

        量词:

                ?:出现零次或一次(最多出现一次)

                +:出现一次或多次(至少出现一次)

                *:出现零次或多次(任意次)

                {n}:出现n次

                {n,m}:出现n到m次

                {n,}:至少出现n次

      贪婪模式:

            正则表达式在处理中会尽可能多的匹配符合条件的字符集

            非贪婪模式:

            尽可能少的匹配,转换的方法:在量词后面加?出现零次或一次(最多出现一次)

4.反向引用的例子:

        把2015-12-25变为25-12-2015

        使用$符,$符在这里匹配的是分组的内容

        正则/(\d{4})-(\d{2})-(\d{2})/

            即$1代表的就是第一个()的内容,$2代表的就是第二个()的内容,$3代表的就是第

            三个()的内容。

        即var str = '2015-12-25';

            var Reg = /(\d{4})-(\d{2})-(\d{2})/

            console.log(str.replace(Reg,'$3-$2-$1'));

         学会正则以后,你会发现处理字符串变得非常的简单。

        上面只是我个人对于正则的一些理解,如果有那些地方出现书写错误,或者还有哪些是我没有提到的,欢迎补充以及提意见。

上一篇下一篇

猜你喜欢

热点阅读