正则表达式

最新推荐文章于 2022-09-28 11:47:21 发布

蘇！

最新推荐文章于 2022-09-28 11:47:21 发布

阅读量274

点赞数

文章标签： javascript 前端正则表达式

本文链接：https://blog.csdn.net/m0_70698588/article/details/126263396

版权

文章目录

1、正则表达式的概述

正则表达式是用于匹配字符串中字符组合的模式

作用：1、常用来检索、替换符合某个模式（规则）的文本，例如验证表单2、常用于过滤页面内容中的一些敏感词（替换），或从字符串中提取我们想要的特定部分。

2、正则表达式在javascript中的使用

（1）通过RegExp对象的构造函数创建

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

 var regexp = new RegExp(/123/)
        console.log(regexp)

（2）通过字面量创建正则表达式

regexObj.text(str)
1、regexObj是写的正则表达式
2、 str是要测试的文本

test（）正则对象方法，用于检测字符串是否符合该规则，该对象会返回true 或 false 其参数是测试字符串

    var rg =/123/
        console.log(rg.test(123)) //true
        console.log(rg.test('123')) //false

3、正则表达式中的特殊字符

（1）边界符

边界符
^ 表示匹配行首的文本（以谁开始）
$表示匹配行尾的文本（以谁结束）

 var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
        // /abc/ 只要包含有abc这个字符串返回的都是true
        console.log(rg.test('abc'));
        console.log(rg.test('abcd'));
        console.log(rg.test('aabcd'));
        console.log('---------------------------');
        var reg = /^abc/;
        console.log(reg.test('abc')); // true
        console.log(reg.test('abcd')); // true
        console.log(reg.test('aabcd')); // false
        console.log('---------------------------');
        var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
        console.log(reg1.test('abc')); // true
        console.log(reg1.test('abcd')); // false
        console.log(reg1.test('aabcd')); // false
        console.log(reg1.test('abcabc')); // false

（2）字符类

字符类:
[] 表示有一系列字符可供选择，只要匹配其中一个就可以了
[^] 方括号内部取反符

//var rg = /abc/;  只要包含abc就可以 
        var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
        console.log(rg.test('andy'));
        console.log(rg.test('baby'));
        console.log(rg.test('color'));
        console.log(rg.test('red'));
        var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
        console.log(rg1.test('aa'));
        console.log(rg1.test('a'));   true
        console.log(rg1.test('b'));   true
        console.log(rg1.test('c'));   true
        console.log(rg1.test('abc'));  false
        console.log('------------------');
        
26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
        var reg = /^[a-z]$/; 
        console.log(reg.test('a'));true
        console.log(reg.test('z'));true
        console.log(reg.test(1));false
        console.log(reg.test('A'));false
        // 字符组合
        26个英文字母(大写和小写都可以)任何一个字母返回 true  
        var reg1 = /^[a-zA-Z0-9_-]$/; 
        console.log(reg1.test('a'));
        console.log(reg1.test('B'));
        console.log(reg1.test(8));
        console.log(reg1.test('-'));
        console.log(reg1.test('_'));
        console.log(reg1.test('!'));
        console.log('----------------');
         如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a'));
        console.log(reg2.test('B'));
        console.log(reg2.test(8));
        console.log(reg2.test('-'));
        console.log(reg2.test('_'));
        console.log(reg2.test('!'));

（3）量词类

量词符: 用来设定某个模式出现的次数
简单理解: 就是让下面的a这个字符重复多少次

*相当于 >= 0 可以出现0次或者很多次

var reg = /^a*$/;
        console.log(reg.test(''));  true
        console.log(reg.test('a'));   true
        console.log(reg.test('aaaa'));   true

+号相当于 >= 1 可以出现1次或者很多次

var reg = /^a+$/;
        console.log(reg.test('')); false
        console.log(reg.test('a'));   true
        console.log(reg.test('aaaa'));   true

? 相当于 1 || 0 (1或者0）

var reg = /^a?$/;
        console.log(reg.test('')); true
        console.log(reg.test('a'));   true
        console.log(reg.test('aaaa'));  false

{3 } 就是重复3次

var reg = /^a{3}$/;
        console.log(reg.test(''));  false
        console.log(reg.test('a')); false
        \ console.log(reg.test('aaaa'));  false
         console.log(reg.test('aaa'));  true

{3, } 大于等于3

var reg = /^a{3,}$/;
        console.log(reg.test('')); false
        console.log(reg.test('a')); false
        console.log(reg.test('aaaa'));  true
        console.log(reg.test('aaa'));  true

{3,16} 大于等于3 并且小于等于16

 var reg = /^a{3,6}$/;
        console.log(reg.test(''));  false
        console.log(reg.test('a')); false
        console.log(reg.test('aaaa')); true
        console.log(reg.test('aaa'));  true
        console.log(reg.test('aaaaaaa')); false

（4）案例–用户名表单验证（简单）

案例（要求）：
1、如果用户名输入合法，则后面的提示信息为：用户名合法，并且颜色为绿
2、如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红

 <style>
        .right{
            color: aquamarine;
        }
        .wrong{
            color: red;
        }
    </style>
    <body>
    <input type='text' class="uname"> <span>请输入用户名</span>

    <script>
        var reg = /^[a-zA-Z0-9_-]{6,16}$/
        var uname = document.querySelector('.uname')
        var span = document.querySelector('span')
        uname.onblur = function () {
            if (reg.test(this.value)) {
                span.className = 'right'
                span.innerHTML = '用户名输入正确'
            } else {
                span.className = 'wrong'
                span.innerHTML = '用户名输入错误'
            }
        }


    </script>
</body>

（5）括号总结以及正则验证工具

中括号字符集合.匹配方括号中的任意字符.

var reg = /^[abc]$/;
        a 也可以 b 也可以 c 可以  a ||b || c

大括号量词符. 里面表示重复次数

它只是让c重复三次   abccc
        var reg = /^abc{3}$/; 
           
        console.log(reg.test('abc'));
        console.log(reg.test('abcabcabc'));
        console.log(reg.test('abccc'));

小括号表示优先级

var reg = /^(abc){3}$/;    它是让abcc重复三次
        console.log(reg.test('abc'));
        console.log(reg.test('abcabcabc'));
        console.log(reg.test('abccc'));

可以在线测试：https://c.runoob.com/

（6）预定类

预定类是指某些常见模式的简写方式

预定类	说明
\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]

       // \d相当于[0-9]
       var reg1 = /\d/;
       console.log(reg1.test("a")); // false
       console.log(reg1.test("1")); // false
       console.log(reg1.test("230")); // true
 
       // \D相当于[^0-9]
       var reg2 = /\D/;
       console.log(reg2.test("a")); // true
       console.log(reg2.test("1")); // false
       console.log(reg2.test("!")); // true
 
       // ......以此类推

验证座机号码，分两种格式：010-12345678或0530-1234567

       // 验证座机号码，分两种格式：010-12345678 或 0530-1234567
       var tell = /\d{3,4}-\d{7,8}/;
       console.log(tell.test("010-23563568")); // true
       console.log(tell.test("01-23563568")); // false
       console.log(tell.test("0207-2356356")); // true

验证手机号码：

       // 验证手机号码：13292041391  一共11位
       // 第一位只能是1 第二位不能是0、1、2 第三位之后可以是任意数字9位
       var tell = /^1[3-9][0-9]{9}$/;
       console.log(tell.test(13832128221)); // true
       console.log(tell.test(155333733210)); // false

4、正则表达式中的替换

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串回事一个正则表达式

 <style>
        textarea {
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <textarea name="" id="message"></textarea> <button>提交</button>
    <div></div>
    <script>
        // 替换 replace
        // var str = 'andy和red';
        // // var newStr = str.replace('andy', 'baby');
        // var newStr = str.replace(/andy/, 'baby');
        // console.log(newStr);
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|gay/g, '**');
        }
    </script>

蘇！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

文章目录1、正则表达式的概述2、正则表达式在javascript中的使用（1）通过RegExp对象的构造函数创建（2）通过字面量创建正则表达式3、正则表达式中的特殊字符（1）边界符（2）字符类（3）量词类（4）案例--用户名表单验证（简单）（5）括号总结以及正则验证工具（6）预定类4、正则表达式中的替换1、正则表达式的概述正则表达式是用于匹配字符串中字符组合的模式作用：1、常用来检索、替换符合某个模式（规则）的文本，例如验证表单2、常用于过滤页面内容中的一些敏感词（替换），或从字符串中提取我们想要的
复制链接

扫一扫