正则表达式

hcoke

已于 2023-09-01 10:02:49 修改

阅读量202

点赞数

分类专栏：学习笔记文章标签：正则表达式

于 2022-05-06 21:57:31 首次发布

本文链接：https://blog.csdn.net/m0_62962469/article/details/124616437

版权

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

什么是正则表达式：

正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。在JavaScript中正则表达式也是一种对象。

它经常被用来检索、替换那些符合某个模式(规则)的文本，例如验证表单，用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外，正则表达式还用于过滤掉页面中的一些敏感词，或从字符串中获取我们想要的特性部分。

正则表达式特点：

1.灵活性、逻辑性、功能性强。

2.可以讯速地用极简单的方式达到字符串的复杂控制。

3.对于刚接触的人来说，比较晦涩难懂。

4.实际开发，一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并根据实际情况对它进行修改。

正则表达式的创建：

//1.利用regexp对象来创建正则表达式
        var regexp = new RegExp(/123/)
        console.log(regexp);
//2.利用字面量创建正则 表达式
        var rg = /123/

其中，test方法用来检测字符串是否符合正则表达式要求的规范。

符合返回true，反之返回false。

如下：

 var rg = /123/
        console.log(rg.test(123));
        console.log(rg.test('abc'));

正则表达式的组成：

一个正则表达式可以由简单的字符串构成，比如/abc/。也可以是简单和特殊字符的组合，比如/ab*c/。其中，特殊字符也被称为元字符，在正则表达式中是具有特殊意义的特殊符号，比如$ ^ + 等。

边界符：正则表达式中的边界符用来提示字符所处的位置，主要有两个字符。

注意：边界符^ 假如出现在[ ]内部则表示取反与这里的边界符意义不同

字符类：[ ]表示有一系列字符可供选择，只要匹配其中一个就可以了。

如下例子：

 // var rg = /abc/   只要包含abc就可
        // 字符类：[ ]表示有一系列字符可供选择，只要匹配其中一个就可以了。
         var rg = /[abc]/   //只要包含有a 或b 或c 都返回true
        console.log(rg.test('andy'));    //true
        console.log(rg.test('red'));    //false
        console.log(rg.test('box'));  //true
        var rg1 = /^[abc]$/     //只有a 或只有b 或只有c  这三个字母才返回true
        console.log(rg1.test('a'));     //true
        console.log(rg1.test('b'));    //true
        console.log(rg1.test('c'));    //true
        console.log(rg1.test('ab'));   //false
        console.log(rg1.test('abcd'));  //false
        console.log(rg1.test('abc'));    //false
        var reg = /^[a-z]$/   //26个英文字母 任何一个都返回true   -表示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
        var reg1 = /^[a-zA-Z0-9-_]$/   //26个英文字母(大小写均包含) 0-9 和 - _ 其中的任意一个
        console.log(reg1.test('a'));    //true
        console.log(reg1.test('8'));    //true
        console.log(reg1.test('-'));    //true
        console.log(reg1.test('_'));    //true
        console.log(reg1.test('A'));    //true

        var reg2 = /^[^a-zA-Z0-9-_]$/   //在[]内部的^表示取反 这里的含义是 不能包含有所描述的内容中的任何一个 
         console.log(reg1.test('a'));    //false
        console.log(reg1.test('8'));    //false
        console.log(reg1.test('-'));    //false
        console.log(reg1.test('_'));    //false
        console.log(reg1.test('A'));    //false

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

// *相当于 >=0 可以出现0次或多次
        var reg = /^a*$/
        console.log(reg.test(''));   //true
        console.log(reg.test('a'));   //true
        console.log(reg.test('aaaaa'));    //true
        console.log('---------------------');

// + 相当于 >=1   可以出现 1次或多次
        var reg1 = /^a+$/  
        console.log(reg1.test(''));      //false
        console.log(reg1.test('a'));    //true
        console.log(reg1.test('aaaaa'));     //true
        console.log('---------------------');
// ?相当于 1 || 0 可以出现1次或0次
        var reg2 = /^a?$/
        console.log(reg2.test(''));  //true
        console.log(reg2.test('a'));   //true
        console.log(reg2.test('aaaaa'));    //false
//  {3}    就是重复3次
        var reg3 = /^a{3}$/    
        console.log(reg3.test(''));   //false
        console.log(reg3.test('a'));   //false
        console.log(reg3.test('aaa'));   //true
        console.log('---------------------');
//  {3,}   大于等于3次
        var reg4 = /^a{3,}$/
        console.log(reg4.test(''));     //false
        console.log(reg4.test('a'));     //false
        console.log(reg4.test('aaa'));    //true
        console.log(reg4.test('aaaaaa'));  //true
        console.log('---------------------');
        
// {3,15}  >=3 && <=16 次
        var reg5 = /^a{3,16}$/
        console.log(reg5.test(''));     //false
        console.log(reg5.test('a'));    //false
        console.log(reg5.test('aaa'));   //true 
        console.log(reg5.test('aaaaaa'));   //true
        console.log(reg5.test('aaaaaaaaaaaaaaaaaaaaaaaaa'));  //false

将量词与字符结合组成完整的用户名表单的正则表达式

 // 量词： 用来设定某个模式出现的次数。
        var reg = /^[a-zA-Z0-9-_]{6,15}$/        //{6,15}的左侧不能有空格
        console.log(reg.test('andy123'));    //true
        console.log(reg.test('007-_AZC'));    //true
        console.log(reg.test('andy123456!'));     //false
        console.log(reg.test('andy1234678921521010'));    //false

正则表达式中的括号总结：

1.大括号、量词符里边表示重复次数。

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

3.小括号表示优先级。

这里有相关小括号的例子：

var reg = /^abc{3}$/     //他只是让c重复3次
        console.log(reg.test('abccc'));   //true
        console.log(reg.test('abc'));   //true
        console.log(reg.test('abcabc'));    //false
        console.log('-------------------------------');
        var reg1 = /^(abc){3}$/     
        console.log(reg1.test('abccc'));    //false
        console.log(reg1.test('abc'));      //false
        console.log(reg1.test('abcabcabc'));       //true

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

利用预定义类进行座机号码验证：

//座机号码验证   两种格式 010-12345678    0530-1234567
        var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/      //  | 在正则表达式中是或的意思

正则表达式中的替换：

replace替换：

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

语法格式：

stringObject.replace(regexp/substr,replacement)

var str = 'andy和baby'
        var newStr = str.replace('andy','baby')
        console.log(newStr);

它将andy替换成了baby ，不会影响原来的字符串，而是返回一个新的字符串。

正则表达式参数：

/表达式/[switch]

switch也称为修饰符(按照什么样的模式来匹配)，有三种值：

g:全局匹配； g是global的意思

i:忽略大小写；

gi:全局匹配+忽略大小写。

例子：将textarea中的内容在按下按钮后替换我们规定的字符为**。并显示在div里。

<!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>
    <style>
        div {
            background-color: #ccc;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10" class="text"></textarea><button>提交</button>
    <div></div>
    <script>
        // var str = 'andy和baby'
        // var newStr = str.replace('andy','baby')
        // console.log(newStr);
        // console.log(str);
        var text =document.querySelector('.text')
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|gay/g,'**')
        }
    </script>
</body>
</html>

利用正则表达式进行表单验证：

<!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>
    <style>
        .right {
           color: greenyellow;
        }
        .wrong {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" class="uname"/>
    <span>请输入用户名</span>
    <script>
        // 量词： 用来设定某个模式出现的次数。
        var reg = /^[a-zA-Z0-9-_]{6,15}$/        //{6,15}的中间不能有空格
        var uname = document.querySelector('.uname')
        var span = document.querySelector('span')
        uname.onblur = function() {
            if(reg.test(this.value)) {
                span.innerHTML = '用户名格式输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '用户名格式输入有误，请重新输入'
                uname.value = ''
                span.className = 'wrong'
            }
        }

    </script>
</body>
</html>

输入正确时：

输入有误时：

正则表达式在线测试：

菜鸟工具 - 不止于工具。

hcoke

关注

0
点赞
踩
0

收藏

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

什么是正则表达式：正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。在JavaScript中正则表达式也是一种对象。它经常被用来检索、替换那些符合某个模式(规则)的文本，例如验证表单，用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外，正则表达式还用于过滤掉页面中的一些敏感词，或从字符
复制链接

扫一扫