正则表达式

最新推荐文章于 2024-09-08 13:15:25 发布

小C好好干饭

最新推荐文章于 2024-09-08 13:15:25 发布

阅读量194

点赞数

分类专栏： Vue 文章标签：正则表达式

本文链接：https://blog.csdn.net/qq_44408913/article/details/117919286

版权

Vue 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

一、如何使用正则

(1)exec()方法

// 获取首次匹配结果
var str = 'AbC123abc456';
var reg = /abc/i;
reg.exec(str);//匹配结果:["AbC",index:0,input:"AbC123abc456"]

(2)match()方法

var str = "It's is the shorthand of it is";
var reg1 = /it/gi;
str.match(reg1); // 匹配结果：（2）["It","it"]
var reg2 = /^it/gi;
str.match(reg2); // 匹配结果：["It"] 匹配了第一个it
var reg3 = /s/gi;
str.match(reg3); // 匹配结果：（4）["s","s","s","s"]
var reg4 = /s$/gi;
str.match(reg4); // 匹配结果：["s"] 匹配了最后一个s

二、模式修饰符

修饰符	描述
i	忽略大小写匹配
g	全局匹配
m	多行匹配
s	特殊字符圆点.中包含换行符\n
u	以Unicode编码执行正则表达式
y	粘性匹配，仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引

三、字符类别

字符	含义
.	匹配除“\n"外的任何单个字符
\d	匹配任意一个阿拉伯数字（0~9）
\f	匹配一个换行符（form-feed）
\D	匹配任意一个非阿拉伯数字字符
\s	匹配一个空白符，包括空格、制表符、换页符、换行符等
\w	匹配任意一个字母（大小写）、数字和下划线
\b	匹配单词分界符。如“\log"可以匹配”best grade“，结果为”g"
\t	匹配一个水平制表符（tab）
\n	匹配一个换行符（linefeed)
\xhh	匹配ISO-8859-1值为hh(2个16进制数字)的字符，如“\x61"表示”a"
\S	匹配一个非空白符
\W	匹配任意一个非“字母（大小写）、数字和下划线”的字符
\B	非单词分界符。如“\Bade”可以匹配"best grade",结果为“ade"
\r	匹配一个回车符（carriage return)
\v	匹配一个垂直制表符（vertical tab）
\uhhhh	匹配Unicode值为hhhh（四个16进制数字）的字符，如"\u597d"表示“好”

四、字符集合

pattern	说明
[cat]	匹配字符集合中的任意一个字符c、a、t
[^cat]	匹配除c、a、t以外的字符
[B-Z]	匹配字母B~Z范围内的字符
[^a-z]	匹配字母a~z范围外的字符
[a-zA-Z0-9]	匹配大小写字母和0~9范围内的字符
[\u4e00-\u9fa5]	匹配任意一个中文字符

五、限定符

字符	说明
?	匹配前面的字符零次或一次
+	匹配前面的字符一次或多次
*	匹配前面的字符零次或多次
{n}	匹配前面的字符n次
{n,}	匹配前面的字符至少n次
{n,m}	匹配前面的字符n~m次

六、贪婪与懒惰匹配

'webWEBWebwEb'

字符	意义	结果
/w.*b/gi	贪婪匹配，尽可能多的匹配	‘webWEBWebwEb’
/w.*?b/gi	懒惰匹配，尽可能少的匹配	‘web’

七、括号运算符

1.作用

（1）改变限定符作用范围

1.改变作用范围前
正则表达式：catch|er
可匹配的结果：catch、er

2.改变作用范围后
正则表达式：cat(ch|er)
可匹配的结果：catch、cater

（2）分组

1.分组前
正则表达式：abc{2}
可匹配的结果：abcc

2.分组后
正则表达式：a(bc){2}
可匹配的结果：abcbc

2.捕获与非捕获

案例判断年份月份

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form action="" id="form">
        年份<input id="year" type="text"><span id="yearmsg"></span><br />
        月份<input id="match" type="text"><span id="matchmsg"></span><br />
        <input type="submit" value="查询">
    </form>
    <script>
        var form = document.querySelector('#form')
        var year = document.querySelector('#year');
        var match = document.querySelector('#match');
        var yearmsg = document.querySelector('#yearmsg');
        var matchmsg = document.querySelector('#matchmsg');
        
        form.onsubmit = function () {
            return checkYear(year) && checkMonth(match);
        };

        function checkYear(obj) {
            if (!obj.value.match(/^\d{4}$/)) {
                obj.style.borderColor = 'red'
                yearmsg.innerHTML = '输入错误,年份应该是4位数字'
                return false;
            }
            yearmsg.innerHTML = '';
            return true;
        };

        function checkMonth(obj) {
            console.log('m');
            if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
                obj.style.borderColor = 'red'
                matchmsg.innerHTML = '输入错误,年份应该是4位数字'
                console.log('m');
                return false;
            }
            matchmsg.innerHTML = '';
            return true;
        };
    </script>
</body>

</html>