掌握正则表达式与String方法：身份证验证实战与技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46839072/article/details/125346753

一、正则表达式

1、含义

含义：是一个对象，是用来表述字符串结构的语法规则。用于匹配字符串中的字符组合的模式。

2、使用方式

(1)创建正则

a、字面量方式：

let/var 变量名 = /表达式/

let str='123'
let reg1 =/abc/  //使用字面量创建正则
console.log(reg1.test(str))//调用test方法判断str是否符合正则规则

在这里插入图片描述

b、使用RegExp的构造函数

let/var 变量名 = new RegExp(/表达式/)

let str='123'
let reg2 = new RegExp(/123/)//通过RegExp构造方法创建正则
console.log(reg2.test(str))

在这里插入图片描述

(2)调用相关的方法进行正则模式匹配
a、test()方法：检测字符串是否符合正则的规则

正则对象.test(字符串）

返回值：

true:表示符合正则规则
false：表示不符合正则规则

3、模式修饰符

模式修饰符：switch:表示模式修饰符，是可选的，用于进一步对正则表达式进行设置。

修饰符	说明
g	全局匹配
i	忽略大小写
m	多行匹配
u	以Unicode编码执行正则表达式
y	粘性匹配，仅匹配目标字符串中此正则表达式的1astIndex属性指示的索引

4、边界符

边界符	说明
^	表示开头的文本
$	表示结尾的文本

☀️举个例子：

let reg = /^abc$/

console.log('第一个：',reg.test('abc'))
console.log('第二个：',reg.test('aabbcc'))

在这里插入图片描述
由这个例子可以看出，用字面量创建的正则，必须完全一样，才能匹配成功。

5、预定义符

预定义符	说明
.	匹配除了‘\n’之外的任意单个字符
\d	匹配所有0到9之间的任一个数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母、数字和下划线，相当于[a-zA-Z0-9]
\W	除所有字母、数字和下划线以外的字符，相当于[^a-zA-Z0-9]
\s	匹配空格(换行符、制表符、空格)相当于[\t\r\n\v\f]
\S	匹配除空格之外的字符,相当于[^\t\r\n\v\f]

6、特殊转义字符

以’\'开头的字符
在这里插入图片描述

7、范围示例

字符类:是一个字符集，匹配相应字符，它就会找到该匹配项。

在这里插入图片描述

字符范围示例:

在这里插入图片描述

字符组合：

字符组合:如果允许用户输入英文字母(不区分大小写)、数字、短横线-、
下划线_的正则情况。

在这里插入图片描述

字符组合:当中括’[]‘与元字符’^'一起使用时，称为取反符。

在这里插入图片描述
☀️案例展示(用户名验证)：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
    div{
        margin:100px auto;
        width: 400px;
    }
    .success{
        color:green;
    }
    .wrong{
        color:red;
    }
</style>
<body>
    <div>
        用户名：
         <input type="text" class="uname">
        <span></span>
    </div>
    <script>
        let reg=/^[a-aA-Z0-9_-]{6,16}$/  //正则规式
        // 获取页面元素
        let uname = document.querySelector('.uname')
        let span =document.querySelector('span')

        //给uname注册事件，当uname失去焦点时，判断用户输入的信息是否符合正则的规则
        uname.addEventListener('blur',function(){
            let name = uname.value
            if(reg.test(name)){
                span.innerHTML ='输入格式正确'
                span.className='success'
            }else{
                span.innerHTML ='输入格式错误'
                span.className='wrong'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

8、量词符

量词符：用来设定某个模式出现的次数

字符	说明
?	匹配？前面的字符零次或一次。例如hi?t 可匹配的ht和hit
+	匹配+前面的字符一次或多次。例如bre+ad 可匹配范围从bread到bre…ad
*	匹配前面的字符零次或多次。例如rose 可匹配的范围从rse到ro…se
{n}	匹配{}前面的字符n次。例如hit(2)er 只能匹配hitter
{n, }	匹配{}前面的字符最少n次。例如hit{2,}er 可匹配范围从hitter到hitt…er
{n,m}	匹配{}前面的字符最少n次，最多m次。

☀️案例演示：
在这里插入图片描述

9、括号符

(1)改变限定符的范围

例如：
catch|er 表示可以匹配catch或er
cat(ch|er):表示可以匹配catch或cater

(2)分组

例如：
abc{2}:表示c要出现2次，可以匹配abcc
a(bc){2}:表示bc要出现2次，可以匹配abcbc

10、贪婪匹配与懒惰匹配

贪婪匹配：匹配尽可能多的字符。正则表达式默认都是贪婪匹配
懒惰匹配：匹配尽可能少的字符

let str ='webWEBWebwEb'
let reg1=/w.*b/gi //贪婪匹配，gi全局不区分大小写
let reg2=/w.*?b/gi //惰性匹配

console.log('贪婪匹配：',reg1.exec(str))
console.log('惰性匹配：',reg2.exec(str))

在这里插入图片描述

11、正则表达式的优先级

正则表达式优先级顺序是：\ 、()和[ ]、限定符、定位符（^、$)、|

在这里插入图片描述

二、String类中的方法

1、match()方法

match()方法:根据正则匹配出所有符合要求的内容匹配成功后将其保存到数组中，匹配失败则返回false。

案例演示：

在这里插入图片描述

2、search()方法

search()方法: search()方法可以返回指定模式的子串在字符串首次出现的位置，相对于indexOf()方法来说功能更强大。

案例演示：

在这里插入图片描述

3、split()方法

split()方法: split()方法用于根据指定的分隔符将- - 个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符。

案例演示

按照字符串中的"@“和”." 两种分隔符进行分割。

4、replace()方法

replace()方法: replace()方法用于替换字符串，用来操作的参数可以是一个字符串或正则表达式。

案例演示：

在这里插入图片描述

三、案例演示：

①身份证号码验证

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body style="text-align:center;">
    身份证号码：
    <input type="text" id="card">
    <br><br>
    <div></div>
    <script>
        //获取页面元素
        let card = document.querySelector('#card')
        let div =document.querySelector('div')
        card.addEventListener('blur',function(){
            // 定义正则表达式
            // let reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
            let reg =/(^610\d{12}$)|^610\(^\d{14}([0-9]|X)$)/
            // 获取用户输入的身份证号
            let number = this.value
            if(reg.test(number.trim())){//trim()方法去掉首尾空格
                div.innerHTML = '身份证号码正确'
            }else{
                div.innerHTML ='身份证号码错误'
            }
        })
    </script>
</body>
</html>