正则表达式

本文主要是介绍正则表达式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

正则表达式

1、正则表达式的概述

正则表达式(Regular Expression)是一个描述字符模式的对象, 用于对字符串进行匹配, 一般用在有规律
的字符串匹配中;常用于表单验证以及相关的字符串匹配

2、正则对象的声明

（1）使用//来声明（常用的）

var regx = /a/ //表示匹配a
//字符串支持正则的方法 replace split search match
var str = 'abcdef'
console.log(str.match(regx));
regx = /a/i
console.log('ABC'.match(regx));

（2）使用new关键词来声明

//使用new关键词 参数一是匹配的对应的正则表达式 参数二模式
//i表示不区分大小写 g表示全局搜索
var regx1 = new RegExp('a','i')
var str1 = 'ABC'
console.log(str1.match(regx1));

3、模式修饰

g 全局搜索
i 不区分大小写
m 换行模式

4、正则匹配的元字符

（1）[] 表示里面任意的一个元素

var regx = /[abc]///表示a b c 任意一个
    console.log('aaaa'.match(regx));
    console.log('bbb'.match(regx));
    console.log('ccc'.match(regx));
    console.log('dd'.match(regx));

(2)^ 表示开头 $ 表示结尾

 var regx1 = /^[abc][123]$///只匹配 a1 a2 a3 b1 b2 b3 c1 c2 c3
    console.log('abc1'.match(regx1));
    // [a-z]从a到z其中一个 [A-Z]大写的A到大写的Z 所有的字母[A-Za-z] 所有的数字[0-9]
    // 数字字母下划线[A-Za-z0-9_]
    console.log('abcdef'.match(/^[a-z][a-z]$/));//null

(3){} 表示个数

{n} 表示n个
{n,m} 表示n个到m个
{n,} 表示n个到无穷个

 var regx2 = /[a-z]{6}///表示6个小写的字母
    regx2 = /[a-z]{0}///表示0个字母
    regx2 = /[a-z]{1,3}///表示1到3个
    regx2 = /[a-z]{1，}///表示1个到无穷个

（4）+ 表示一个到多个 {1,}

var regx3 = /^[abc]+$/
    console.log('aabbcce'.match(regx3));//null
    console.log(''.match(regx3));//null
    console.log('abbcca'.match(regx3));//匹配

（5）* 表示0个到多个 {0,}

// * 0个到多个 {0，}
    regx3 = /^[123]+[456]+[789]$/
    console.log('123567'.match(regx3));//匹配
    console.log('17867'.match(regx3));//null
    console.log('139'.match(regx3));//匹配
    console.log('12345'.match(regx3));//null

（6）? 表示0个到一个 {0,1}

// ？ 0个到1个{0,1}
    regx3 = /^[1234]?[1234]$/
    console.log('1'.match(regx3));//匹配
    console.log('1234'.match(regx3));//null

（7）. 表示所有的内容（包括中文字符）

 // 表示所有的内容 . （包括中文）
    var regx4 = /^.$/
    console.log('abc'.match);//null
    console.log('h'.match);//匹配
    console.log('哈'.match);//匹配
    regx4 = /^[.]+$/
    console.log('哈'.match(regx4));//null 在[]里面的点识别为. 当前应该匹配多个.
    console.log('.'.match(regx4));//null

（8）表示的元字符

\w 表示对应的字母数字下滑线 \W 就是相反的不是字母数字下滑线
\d 表示数字 \D表示非数字
\s 表示空白字符串（回车制表空格） \S就是相反的不是空白字符

 var regx5 = /^\w[123]{2}\w+$/
    console.log('abc123123'.match(regx5));//null
    console.log('112233'.match(regx5));//匹配
    console.log('a12345'.match(regx5));//匹配
    console.log('a123'.match(regx5));//匹配
    console.log('123'.match(regx5));//null
    console.log('1234'.match(regx5));//匹配

（9）() 分组

 // ()分组
    var regx6 = /^(\w\d\S){3}[0-9]+([123][456])+$/
    console.log('123123123123123456'.match(regx6));//null
    console.log('1231231231231234'.match(regx6));//匹配
    var regx7 =/^[\w]+[123456]+$/
    var regx8 = /^[\w]+(123456)+$/
    console.log('abc1'.match(regx7));//匹配
    console.log('abc1'.match(regx8));//null

（10）| 或者

// | 或者
    var regx9 = /^a|b$/
    console.log('a'.match(regx9));
    console.log('b'.match(regx9));

（11）匹配？ * + .等元字符转移\

 // 匹配？ * + .等元字符 转移\
    var regx10 = /^[?]$/
    console.log('?'.match(regx10));
    var regx10 = /^[*]$/
    console.log('*'.match(regx10));
    // 用转义字符来
    var regx10 = /^\*$/
    console.log('*'.match(regx10));
    var regx10 = /^\.$/
    console.log('.'.match(regx10));

5、正则的检测方法

（1）test 测试返回一个boolean类型值（是否匹配）

var regx = /\w/
console.log(regx.test('abc')) //true

（2）exec 执行返回给你一个对应的匹配的数组（如果有就返回一个数组）

var regx = /\d/
console.log(regx.exec('123')) //[1,2,3]

6、字符串支持正则的四个方法

split 切割
replace 替换
search 查找
macth 匹配

7、案例

（1）找出下面字符串中的bag,beg,big,bog, 忽略大小写, 并将其改为bug: ( I am a Big man, I have so mach bag, so veryone call me beg man, bog bog bog, I hate you! )

var str = 'I am a Big man, I have so mach bag, so veryone call me  beg man,  bog bog bog, I hate you!'
    var reg = /(bag|beg|big|bog)/gi
    console.log(str.replace(reg,'bug'));

（2）假设有一个多字符的片断重复出现，把"really"、"really really "，以及任意数量连续出现的"really"字符串换成一个简单的"very ” ( Billy tried really hard Sally tried really really hard Timmy tried really really really hard Johnny tried really really really really hard )

var str ='Billy tried really hard Sally tried really really hard Timmy tried really really really hard Johnny tried really really really really hard'
        var reg1 = /(really)+/gi
        console.log(str.replace(reg1,'very'));

（3）有以下表单, 验证用户名, 密码, 手机号用户名只包含数字,字母,下划线, 且长度不小于6位密码长度在8到16位手机号要合法保存到cookie中

<style>
    .box {
        width: 350px;
        height: 350px;
        background-color: #ccddff;
        margin: auto;
    }

    .boy {
        width: 300px;
        height: 300px;
        background-color: #aabbcc;
        position: relative;
        left: 5px;
        top: 5px;
        padding-top: 10px;
    }

    p {
        font-weight: bold;
        text-indent: 14px;
    }

    span {
        display: inline-block;
        width: 280px;
        height: 30px;
        background-color: #ffebcd;
        position: absolute;
        left: 14px;
        border-radius: 10px;
        display: none;
        text-align: center;
        font-size: 12px;
        line-height: 30px;
    }
</style>
<body>

<div class="box">
    <div class="boy">
        <p>注册</p>
        <form action="">
            &nbsp; 用户名: <input type="text" id="username"> <br> <br>
            &nbsp; 密 &nbsp;&nbsp;码: <input type="password" id="password"><br> <br>
            &nbsp; 手机号: <input type="text" id="phone"><br><br>
            &nbsp; <button type="submit" id="sub">提交</button>
            &nbsp; <button type="reset">重置</button>
            <br>
            <span></span>
        </form>

    </div>
</div>
<script>

    // 3, 有以下表单, 验证用户名, 密码, 手机号
    // 用户名只包含数字, 字母, 下划线, 且长度不小于6位
    // 密码长度在8到16位
    // 手机号要合法
    // 保存到cookie中


    // 1.获取页面表单元素
    // 2.input 绑定事件监听 失去光标事件
    // 3.用户名只包含数字字母下划线 且长度不能少于六位
    // ==> /\w{6,}/ 满足 用户名合法 否则 用户名只包含数字,字母,下划线,
    // 3.用户名只包含数字字母下划线 且长度不能少于六位
    // ==> /\w{6,}/ 满足 用户名合法 否则 用户名只包含数字,字母,下划线,
    // 4.密码长度在8到16位 
    // ==> /\w{8,16}/
    // 5.手机号码要合法
    // ==>/^[1][3-9][0-9]{8}/
    // 6.点击提交时,将获取到的值提保存到cookie中 submit事件


    // 1.获取页面表单元素
    var form = document.forms[0]
    var username = document.getElementById('username')
    var password = document.getElementById('password')
    var phone = document.getElementById('phone')
    var span = document.querySelector("span")
    var nameReg = /\w{6,}/
    var pawReg = /\d{8,16}/
    var telReg = /^[1][3-9][0-9]{8}/
    var flag = false;

    username.onblur = function () {
        if (!nameReg.test(username.value)) {
            // console.log(this.value);
            // console.log((nameReg.test(this.value)));
            flag = false;
            this.focus()
            span.style.display = "block"
            span.innerHTML = `
            用户名只包含数字字母下划线 且长度不能少于六位
            `

        } else {
            flag = true;
            span.style.display = "block"
            span.innerHTML = `
                用户可注册
            `
        }

    }
    password.onblur = function () {
        // 4.密码长度在8到16位 
        // ==> /\w{8,16}/
        if (!pawReg.test(password.value)) {
            span.style.display = "block"
            flag = false;
            this.focus()
            span.innerHTML = `
            密码长度在8到16位
            `

        } else {
            flag = true;
            span.style.display = "none"
        }

    }
    phone.onblur = function () {
        // 5.手机号码要合法
        // ==>/^[1][3-9][0-9]{8}/

        if (!telReg.test(phone.value)) {
            flag = false;
            this.focus()
            span.style.display = "block"
            span.innerHTML = `
            手机号码不合法
            `

        } else {
            flag = true;
            span.style.display = "none"

        }
    }
    document.getElementById('sub').onclick = function () {
        if (flag) {
            //先去获取对应的cookie
            var users = getCookie('users') == '' ? [] : JSON.parse(getCookie('users'))
            //创建一个对象
            var user = { username: username.value, password: password.value, phone: phone.value }
            //将用户添加到cookie中
            users.push(user)
            //存入cookie
            setCookie('users', JSON.stringify(users))
            console.log(getCookie('users'));
        }

    }
</script>
</body>

这篇关于正则表达式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

正则表达式

正则表达式

1、正则表达式的概述

2、正则对象的声明

（1）使用//来声明（常用的）

（2）使用new关键词来声明

3、模式修饰

g 全局搜索

i 不区分大小写

m 换行模式

4、正则匹配的元字符

（1）[] 表示里面任意的一个元素

(2)^ 表示开头 $ 表示结尾

(3){} 表示个数

（4）+ 表示一个到多个 {1,}

（5）* 表示0个到多个 {0,}

（6）? 表示0个到一个 {0,1}

（7）. 表示所有的内容（包括中文字符）

（8）表示的元字符

（9）() 分组

（10）| 或者

（11）匹配？ * + .等元字符 转移\

5、正则的检测方法

（1）test 测试 返回一个boolean类型值（是否匹配）

（2）exec 执行 返回给你一个对应的匹配的数组（如果有就返回一个数组）

6、字符串支持正则的四个方法

split 切割

replace 替换

search 查找

macth 匹配

7、案例

（1） 找出下面字符串中的bag,beg,big,bog, 忽略大小写, 并将其改为bug: ( I am a Big man, I have so mach bag, so veryone call me beg man, bog bog bog, I hate you! )

（3）有以下表单, 验证用户名, 密码, 手机号 用户名只包含数字,字母,下划线, 且长度不小于6位 密码长度在8到16位 手机号要合法 保存到cookie中

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯

（11）匹配？ * + .等元字符转移\

（1）test 测试返回一个boolean类型值（是否匹配）

（2）exec 执行返回给你一个对应的匹配的数组（如果有就返回一个数组）

（1）找出下面字符串中的bag,beg,big,bog, 忽略大小写, 并将其改为bug: ( I am a Big man, I have so mach bag, so veryone call me beg man, bog bog bog, I hate you! )

（3）有以下表单, 验证用户名, 密码, 手机号用户名只包含数字,字母,下划线, 且长度不小于6位密码长度在8到16位手机号要合法保存到cookie中