正则表达式的基本使用-CSDN博客

本文链接：https://blog.csdn.net/qq_42022647/article/details/115918113

JS正则表达式

正则表达式的创建

new regExp()
let reg=new regExp()
字面量创建
let reg=/“正则表达式”/
正则测试用方法:test()
reg.test(“待测字符串”)，其返回一个布尔类型

正则元字符

\d: 匹配数字0-9
\D: 匹配飞数字
\w: 匹配单词字符（英文字母数字和下划线）
\ W: 匹配非单词字符
\ s: 匹配不可见字符
\ S: 匹配可见字符
.: 点，匹配所有字符，.表示点
[ ]: 占用一个字母位置，表示匹配可以出现的字符
^: 在中括号内表示非，在中括号外表示以……开始
$: 表示以……结束
*: 出现0次以上
+: 出现1次以上
?: 出现0或1次
{ }: 表示出现的次数

常用正则校验

<script>
        //座机校验
        let reg = /^0\d{2,3}-\d{7,8}$/

        //校验名字
        let name = /^[\u4e00-\u9fa5]{3,4}$/

        //校验qq号
        let qq = /^[1-9]\d{4,10}$/

        //手机号校验
        let phone = /^1[3-9]\d{9}$/

        //邮箱校验
        let mail = /^\w{1,}@\w{1,}(\.[a-zA-Z]{2,}){1,2}$/
        let mail = /^\w+@\w+(\.[a-zA-Z]{2,}){1,2}$/
    </script>

正则进阶

正则的提取可以从字符串中提取符合规则的内容
reg.exec()
正则的替换字符串的方法，但是支持正则
str.replace()
let str=‘你真是个sb啊，sb’
str=str.replace(‘sb’,’****’)
//可以使用正则强化
str=str.replace(/s.?b/g,’**’)
//正则后面可以跟g，（global）将全部替换

正则综合案例

<body>
    <div>
        <div>
            <input type="text" placeholder="请输入你的用户名" name="username">
            <span class="span1"></span>
        </div>
        <div>
            <input type="text" placeholder="请输入你昵称" name="nickname">
            <span class="span2"></span>
        </div>
        <div>
            <input type="text" placeholder="请输入你的邮箱" name="usermail">
            <span class="span3"></span>
        </div>
        <div>
            <input type="text" placeholder="请输入你的手机号" name="usermobile">
            <span class="span4"></span>
        </div>

    </div>
    <script>
        //定义一个数组用于存放正则表达式和显示的错误信息
        let arr = [{
            reg: /^[a-zA-Z0-9]{5,12}$/,
            message: '用户格式错误'
        }, {
            reg: /^[\u4e00-\u9fa5]{2,5}$/,
            message: '昵称必须式2-5位的中文'
        }, {
            reg: /^\w+@\w+(\.[a-zA-Z]{2,}){1,2}$/,
            message: '邮箱格式错误'
        }, {
            reg: /^1[3-9]\d{9}$/,
            message: '手机格式错误'
        }]

        //获取标签
        let inputs = Array.from(document.querySelectorAll('input[type=text]'))
        let spans = document.querySelectorAll('span')

        //循环添加Input的响应事件
        for (let i = 0; i < spans.length; i++) {
            inputs[i].addEventListener('change', e => {
                //将正则表达式从数组中取出来
                //测试输入框中的值并赋值给result
                let result = arr[i].reg.test(inputs[i].value)
                if (result === true) {
                    spans[i].innerText = '√'
                    spans[i].style.color = 'green'
                } else {
                    spans[i].innerText = arr[i].message
                    spans[i].style.display = 'inline-block'
                    spans[i].style.color = 'red'
                }

            })
        }
    </script>
</body>