正则表达式

一个爱编程的00后

已于 2022-07-31 02:11:01 修改

阅读量889

点赞数

分类专栏： javascript 文章标签： python 开发语言 javascript 前端正则表达式

于 2022-07-31 02:09:23 首次发布

本文链接：https://blog.csdn.net/qq_57193827/article/details/126069760

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

正则目的：实现字符的查找或检测，做一些表单验证，看用户输入是否正确,进行匹配

正则是什么: 用于匹配字符串的一种模式

1.3.2、边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

一、正则表达式

1.1、什么是正则表达式

> 表单验证: 用户表单只能输入英文字母，数字，下划线，昵称输入框中可以输入中文 (匹配)

> 比如用户名： /^[a-z0-9_-]{3,16}$/

> 过滤页面内容中的一些敏感词（替换）

> 从字符串中获取我们想要的特定部分（提取）

1.2、语法

举例：

比如查找下面文本是否包含字符串 ‘前端’

1.3 元字符(特殊字符)

比如一般让用户只能输入26个英文字母，那我们编写估计就是从 abcdefg....开始

但是，换成元字符写法 : [a-z]

1.3.1、相关参考文档

MDN查询：正则MDN

正则测试工具: 正则在线测试工具

1.3.2、边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

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

如果 $ 和 ^ 这两个一起用则是 精确匹配


    <script>
        console.log(/哈/.test('哈哈'));  // 返回true
        console.log(/哈/.test('二哈'));  // 返回true

        // ^  开头  必须以哈开头
        console.log(/^哈/.test('二哈'));  // false
        console.log(/^哈/.test('哈哈'));  // true

        // $ 结尾   必须以哈结尾
        console.log(/哈$/.test('哈儿'));  // false
        console.log(/哈$/.test('二哈'));  // true
        
        // ^ $ 合用   精确匹配 
        console.log(/^哈$/.test('哈哈'));  //false
        // 只有这样为true   
        console.log(/^哈$/.test('哈'));  //true 精确匹配
    </script>

1.3.3、量词（重复次数）

设定某个模式出现的次数

注意: 逗号的左右两侧不要出现空格！

以下为重点

    <script>
        // a只能出现三次 >3 <3都不行
        console.log(/^a{3}$/.test('')); // f
        console.log(/^a{3}$/.test('aa')); // f
        console.log(/^a{3}$/.test('aaa')); // t
        console.log(/^a{3}$/.test('aaaa')); // f
 
        console.log('.................');
        // {n,} 只能出现>=n 的次数
        console.log(/^a{3,}$/.test('')); // f
        console.log(/^a{3,}$/.test('aa')); // f
        console.log(/^a{3,}$/.test('aaa')); // t
        console.log(/^a{3,}$/.test('aaaa')); // t

        console.log('.................');
        // {n,m} 只能出现  >=n && <= m   的次数
        console.log(/^a{3,6}$/.test('')); // f
        console.log(/^a{3,6}$/.test('aa')); // f
        console.log(/^a{3,6}$/.test('aaa')); // t
        console.log(/^a{3,6}$/.test('aaaaaa')); // t
        console.log(/^a{3,6}$/.test('aaaaaaa')); // f
    </script>

1.3.4、字符类（[a-z]）

【】匹配字符集合 -- 在括号里面的任意字符

后面的字符只要包含abc中任意一个字符都返回true

    <script>
        // 包含 a b c中任何一个
        console.log(/[abc]/.test('abc')); // t
        console.log(/[abc]/.test(''));    // f
        console.log(/[abc]/.test('die')); // f
    </script>

【】里面加上 - 连字符

使用 - 连字符表示一个范围

console.log(/^[a-z]$/.test('c'));   // 返回true  包含a-z中任意一个都行

    <script>
        // 包含 a b c中任何一个
        console.log(/[abc]/.test('abc')); // t
        console.log(/[abc]/.test(''));    // f
        console.log(/[abc]/.test('die')); // f
        console.log('-----------');
        console.log(/^[abc]$/.test('a')); // t
        console.log(/^[abc]$/.test('b')); // t
        console.log(/^[abc]$/.test('c')); // t

        // 只有这三种返回真
        console.log(/^[abc]$/.test('abc')); // f
        console.log('------------');

        // 26个英文字母 选 其中一个
        console.log(/^[a-z]$/.test('abc'));
        console.log(/^[a-z]$/.test('a')); // t
        console.log(/^[a-z]$/.test('A')); // f

        // 有大小写限制
        console.log('------------');
        // 大小写不限
        console.log(/^[a-zA-Z]$/.test('a')); // t
        console.log(/^[a-zA-Z]$/.test('A')); // t
        
        // 可以小写 可以大写 可以出现数字
        console.log('------------');
        console.log(/^[a-zA-Z0-9]$/.test('A'));
        console.log(/^[a-zA-Z0-9]$/.test('a'));
        console.log(/^[a-zA-Z0-9]$/.test('4'));
    </script>

【a-zA-Z0-9-_】表示大小写英文字母数字0-9 并且支持 输入 - （连字符）和 _ (下划线)

输入要求: > = 10000

量词{4，}只针对于前面一个字符

        // 格式
        console.log(/^[1-9][0-9]{4,}$/.test('10000')); // t
        console.log(/^[1-9][0-9]{4,}$/.test('1000')); // f
        console.log(/^[1-9][0-9]{4,}$/.test('100000')); // t

用户表单验证

要求：

<body>
    <input type="text">
    <span></span>
    <script>
        // 要求用户名由 英文字母、数字、下划线、短横线组成
        // 并且用户名长度为 6 ~ 16 位
        // 表单验证格式: /^[a-zA-Z0-9_-]{6,16}$/
        let input = document.querySelector('input')
        let span = document.querySelector('span')
        let ra = /^[a-zA-Z0-9-_]{6,16}$/

        // 失去焦点  blur
        input.addEventListener('blur',function () {
            if(ra.test(input.value)){
                span.innerHTML = `输入有效`
                // 先清楚
                span.classList.remove('error')
                span.classList.add('right')
            }else{
                span.innerHTML = `用户名长度为 6 ~ 16 位`
                span.classList.remove('right')
                span.classList.add('error')
            }
        })
        console.log(/^[a-zA-Z0-9_-]{6,16}$/.test('aaaaa_-'));
    </script>
</body>

1.3.5、字符类中输入中文处理

需要用户只能输入中文

语法:

let ra = /^[\u4e00-\u9fa5]{2,8}$/

昵称：2-8位的中文名字都返回true

1.3.6、字符类扩展

(1) 在【】里面加上 ^ 取反符号表示 除 ...之外

/ ^[ ] / 这样是开头

(2) . 匹配除换行符之外的任何单个字符

1.3.7、字符类的一些预定义

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

    <script>
        // 日期格式的简写写法
        console.log(/^\d{4}-\d{1,2}-\d{1,2}/.test('2022-10-29'));
        console.log(/^\d{4}-\d{1,2}-\d{1,2}/.test('2022-10-'));
        console.log(/^\d{4}-\d{1,2}-\d{1,2}/.test('2022-10-29 10:00AM'));
    </script>