正则表达式

最新推荐文章于 2025-03-20 16:05:48 发布

s_kzn

最新推荐文章于 2025-03-20 16:05:48 发布

阅读量2.8k

点赞数 4

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

本文链接：https://blog.youkuaiyun.com/m0_61700036/article/details/121996075

版权

本文介绍了正则表达式的基本概念、特点和创建方法，并详细讲解了正则表达式的特殊字符，包括模式修饰符、边界符、字符类、预定义符等。同时，通过实例演示了如何进行用户名验证，强调了在前端和后端开发中正则表达式的重要性。

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

一、正则表达式简介

1、什么是正则表达式

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。

在 JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。

此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

2、正则表达式特点

灵活性、逻辑性和功能性非常的强。
可以迅速地用极简单的方式达到字符串的复杂控制。
对于刚接触的人来说，比较晦涩难懂。比如： ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/

3、正则表达式的创建和测试

在 JavaScript 中，可以通过两种方式创建一个正则表达式。

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

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

（2）通过字面量创建

var 变量名 = /表达式/;

// 注释中间放表达式就是正则字面量

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

regexObj.test(str)

regexObj 是写的正则表达式
str 我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范.

二、正则表达式的特殊字符

1、正则表达式的组成

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如

/ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、

+ 等。

2、模式修饰符

模式符	说明
g	用于在目标字符串中实现全局匹配
i	忽略大小写
m	实现多行匹配
u	以Unicode编码执行正则表达式
y	粘性匹配，仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引

3、边界符

边界符：正则表达式中的边界符（位置符）用来提示字符所处的位置

边界符	说明
^	表示匹配行首的文本
$	表示匹配行尾的文本

如果 ^ 和 $ 在一起，表示必须是精确匹配。

4、字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内

1. [] 方括号

/[abc]/.test('andy') // true

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

2. [-] 方括号内部范围符-

/^[a-z]$/.test(c') // true

方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。

3. [^] 方括号内部取反符^

方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

注意和边界符 ^ 区别，边界符写到方括号外面。

4. 字符组合

/[a-z1-9]/.test('andy') // true

方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

5、预定义符

字符	说明
.	匹配除“\n”外的任何单个字符
\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]
\f	匹配一个换页符（form-feed）
\b	匹配单词分界符。如“\bg”可以匹配“best grade”，结果为“g”
\B	非单词分界符。如“\Bade”可以匹配“best grade”，结果为“ade”
\t	匹配一个水平制表符（tab）
\n	匹配一个换行符（linefeed）
\xhh	匹配ISO-8859-1值为hh（2个16进制数字）的字符，如“\x61”表示“a”
\r	匹配一个回车符（carriage return）
\v	匹配一个垂直制表符（vertical tab）
\uhhhh	匹配Unicode 值为 hhhh （4个16进制数字）的字符，如“\u597d”表示“好”

6、用户名验证

功能需求:

如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色
如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色

分析:

用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.
首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/
当表单失去焦点就开始验证.
如果符合正则规范, 则让后面的span标签添加 right 类.
如果不符合正则规范, 则让后面的span标签添加 false类.

//  html 结构
.right{
    color: green;
}
.false{
    color: red;
}

<input type="text" class="uname"> 
    <span>请输入用户名</span>

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