ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

正则表达式

2022-08-10 20:31:29  阅读：149  来源： 互联网

标签：console log 正则表达式 var 匹配 match really


正则表达式

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>

 

标签：console,log,正则表达式,var,匹配,match,really
来源： https://www.cnblogs.com/lym-2022/p/16573778.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有