JavaScript正则表达式:正则表达式中的特殊字符
创始人
2024-03-15 08:41:25
0

正则表达式的组成

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

特殊字符非常多,可以参考:

MDN:正则表达式 - JavaScript | MDN (mozilla.org)

jQuery 手册:正则表达式部分

正则测试工具: 在线正则表达式测试

这里我们把元字符划分几类学习 。

边界

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

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

字符类

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

1. []  方括号   (就是或者的意思)

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

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

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

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

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

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

   /[^abc]/.test('andy')     // false

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

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

外边是边界符是开头的意思 里面是取反的意思

上面正则表达式的意思为一个字符不能是大小写字母数字_- 

4. 字符组合

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

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

 量词符

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

 

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

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

?  相当于 1 || 0

 {3} 就是重复3次 

 {3, }  大于等于3

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

用户名验证

功能需求:

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

案例:用户名验证分析

分析:

1.用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.

2.首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/

3.当表单失去焦点就开始验证.

4.如果符合正则规范, 则让后面的span标签添加 right 类.

5.如果不符合正则规范, 则让后面的span标签添加 wrong 类.

Document
 请输入用户名
括号总结 1.大括号  量词符.   里面表示重复次数 2.中括号 字符集合。匹配方括号中的任意字符.(多选一) 3.小括号 表示优先级

var reg = /^abc{3}$/; // 它只是让c重复三次   abccc

如果想要abc重复,那就需要使用() 例如 var reg = /^(abc){3}$/; // 它是让abcc重复三次 

可以在线测试: 菜鸟工具 - 不止于工具

 预定义类

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

 发现菜鸟的正则表达式测试并不好用,下面的是新的测试工具

在线正则表达式测试 (oschina.net)

 分析:

1.手机号码:  /^1[3|4|5|7|8][0-9]{9}$/ 2.QQ: [1-9][0-9]{4,} (腾讯QQ号从10000开始) 3.昵称是中文:     ^[\u4e00-\u9fa5]{2,8}$

window.onload = function() {var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式var regqq = /^[1-9]\d{4,}$/; // 10000var regnc = /^[\u4e00-\u9fa5]{2,8}$/;var regmsg = /^\d{6}$/;var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;var tel = document.querySelector('#tel');var qq = document.querySelector('#qq');var nc = document.querySelector('#nc');var msg = document.querySelector('#msg');var pwd = document.querySelector('#pwd');var surepwd = document.querySelector('#surepwd');regexp(tel, regtel); // 手机号码regexp(qq, regqq); // qq号码regexp(nc, regnc); // 昵称regexp(msg, regmsg); // 短信验证regexp(pwd, regpwd); // 密码框// 表单验证的函数function regexp(ele, reg) {ele.onblur = function() {if (reg.test(this.value)) {// console.log('正确的');this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = ' 恭喜您输入正确';} else {// console.log('不正确');this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = ' 格式不正确,请从新输入 ';}}};surepwd.onblur = function() {if (this.value == pwd.value) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = ' 恭喜您输入正确';} else {this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = ' 两次密码输入不一致';}}}

 

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...