保安日记：JavaScript学习第二十篇之javascript正则表达式-优快云博客

本文链接：https://blog.youkuaiyun.com/Zhuo_De/article/details/109409876

本文详细介绍了JavaScript中的正则表达式基础知识，包括如何创建正则、特殊字符（如边界符和字符类）、量词的使用以及实际案例中的用户名验证。掌握这些概念有助于过滤敏感词、提取信息和验证用户输入格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正则表达式(Regular Expression)

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式(规则)的文本，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

创建正则表达式

----正则表达式里面不需要加引号，不论数字型还是字符串型

<script>   
// 1. 利用 RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);

// 2. 利用字面量创建 正则表达式
        var rg = /123/;
// 3.test 方法用来检测字符串是否符合正则表达式要求的规范
        console.log(rg.test(123)); //true
        console.log(rg.test('abc'));//false
    </script>

正则表达式的特殊字符

边界符----提示字符所处的位置

边界	说明
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)
	/^xxx$/表示精确匹配

<script>
        // 边界符 ^ $ 
        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/; //以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
    </script>

字符类[ ]----所有可供选择的字符都放在方括号内

 <script>
//var rg = /abc/;  只要包含abc就可以 
// 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
        var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
        console.log(rg.test('andy'));
        console.log(rg.test('baby'));        
        var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
        console.log(rg1.test('a'));  //true
        console.log(rg1.test('b'));  //true
        console.log(rg1.test('abc'));  //false
        console.log('------------------');

        var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
        console.log(reg.test('a'));//t
        console.log(reg.test('z'));//t
        console.log(reg.test(1));  //f
        console.log(reg.test('A'));//f
        // 字符组合
        var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)、数字、- 和 _任何一个字母返回 true  
        console.log(reg1.test('a'));//t
        console.log(reg1.test('B'));//t
        console.log(reg1.test(8));//t
        console.log(reg1.test('-'));//t
        console.log(reg1.test('!'));//f
        console.log('----------------');
        // 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a'));//f
        console.log(reg2.test('B'));//f
        console.log(reg2.test('!'));//t
    </script>

量词符----设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

 <script>
      //简单理解: 就是让下面的a这个字符重复多少次
      var reg = /^a$/;
       //* 相当于 >= 0 可以出现0次或者很多次
      var reg = /^a*$/;
      console.log(reg.test(''));//t
      console.log(reg.test('aaaa'));//t

      //+ 相当于 >= 1 可以出现1次或者很多次
      var reg = /^a+$/;
      console.log(reg.test('')); // false
      console.log(reg.test('a')); // true
      console.log(reg.test('aaaa')); // true

      //    ?  相当于 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('aaa')); // true
       //{3, }  大于等于3
        var reg = /^a{3,}$/;
      console.log(reg.test("a")); // false
      console.log(reg.test("aaaa")); // true
      console.log(reg.test("aaa")); // true
      //  {3,6}  大于等于3 并且 小于等于6
      var reg = /^a{3,6}$/;
      console.log(reg.test("a")); // false
      console.log(reg.test("aaaa")); // true
      console.log(reg.test("aaa")); // true
      console.log(reg.test("aaaaaaa")); // false
	
	 var reg1 = /^[^a-zA-Z0-9_-]$/; //只能多选一 两个字符就报错
	 var reg2 = /^[^a-zA-Z0-9_-]{6,16}$/; //字符数量限制在6,16
    </script>

案例一----用户名验证
<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)) {
                console.log('正确的');
                span.className = 'right';
                span.innerHTML = '用户名格式输入正确';
            } else {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

括号总结

<script>
        // 中括号 字符集合.匹配方括号中的任意字符. 
         var reg = /^[abc]$/;
        // a 也可以 b 也可以 c 可以  a ||b || c
        // 大括号  量词符. 里面表示重复次数
         var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
         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'));
    </script>

预定义类

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

正则表达式中的替换

替换 replace（参数一，参数二），返回值是一个替换完毕的新字符串

参数一----被替换的字符串或者正则表达式

参数二----替换为的字符串

<script>
        // 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>