正则表达式的组成

一个正则表达式可以由简单的字符构成,比如 /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 类.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>span {color: #aaa;font-size: 14px;}.right {color: green;}.wrong {color: red;}</style>
</head><body><input type="text" class="uname"> <span>请输入用户名</span><script>var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1var 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{span.className='wrong'span.innerHTML='用户名格式输入不正确'}}</script>
</body></html>

括号总结
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 = '<i class="success_icon"></i> 恭喜您输入正确';} else {// console.log('不正确');this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确,请从新输入 ';}}};surepwd.onblur = function() {if (this.value == pwd.value) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';} else {this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 两次密码输入不一致';}}}

JavaScript正则表达式:正则表达式中的特殊字符相关推荐

  1. php运算符百分号,T-SQL 转义select … like中的特殊字符(百分号)

    众所周知,T-SQL中LIKE运算符使用%符号表示通配符.很多时候可能需要查询包含有%的数据,比如需要查询字段coupon中含有5%的数据.那么如何使用已经有百分号(%)符号的LIKE搜索字符串呢? ...

  2. 正则表达式中的特殊字符一览

    正则表达式中的特殊字符一览 〓简介〓 字符意义:对于字符,通常表示按字面意义,指出接着的字符为特殊字符,不作解释. 例如:/b/匹配字符'b',通过在b 前面加一个反斜杠,也就是/b/,则该字符变成特 ...

  3. js 正则表达式中的特殊字符

    字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界. -或- 对 ...

  4. java js 正则表达式_如何在JavaScript与Java中使用正则表达式

    如何在JavaScript与Java中使用正则表达式 发布时间:2021-02-11 13:16:01 来源:亿速云 阅读:69 作者:Leah 如何在JavaScript与Java中使用正则表达式? ...

  5. ES6/05/正则表达式简介,正则表达式如何使用,正则表达式中的特殊字符(边界符,量词符),预定义类,正则表达式中的替换

    正则表达式 目标:1,说出正则表达式的作用 2,能使用一些简单的正则表达式 3,使用正则表达式对表单进行验证 4,使用正则表达式替换内容 正则表达式简介 正则表达式(Regular Expressio ...

  6. 正则表达式中的特殊字符

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

  7. java正则表达式替换特殊字符_使用正则表达式替换报表名称中的特殊字符(推荐)...

    正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表通常被用来检索.替换那些符合某个模式(规则)的文 ...

  8. javascript的正则表达式

    正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个 ...

  9. javascript 之---正则表达式

    正则表达式是一个描述字符模式的对象. JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法.在JavaScript中,正则表达式是 ...

  10. 【JavaScript】正则表达式 1

    正则表达式,也不是第一次与它见面了.在我们学习ASP.NET视频的时候,验证控件的那个实例中,就有提到过它.那个时候,都是在控件的属性中自己设置的,用的原理就是正则表达式,当时得感觉就是方便,强大,给 ...

最新文章

  1. [J2ME] Signing a midlet suite的讨论稿[Update]
  2. ES6常用知识总结(20%的知识占80%的份额)
  3. linux帆软内存设置,修改FineReport配置参数
  4. 【NOIP2016提高A组模拟10.15】算循环
  5. JSPs only permit GET POST or HEAD的解决方案(REST风格)
  6. 一个不错的linux学习资料下载的网址
  7. 微信小程序中集成有赞UI自定义Tabbar组件
  8. 数据治理:携程度假的数据治理实践
  9. 招投标工作中投标书编制的流程是怎样的?
  10. 火狐浏览器打印网页不全_火狐浏览器网页显示不全
  11. ubuntu14上nvidia 1080和 titan xp 驱动安装踩的坑
  12. 有 3 只老鼠,8 瓶水,其中一瓶有毒,喝到有毒的水之后,老鼠一周后会准时死亡。...
  13. 高德地图 AMap.Driving
  14. 2020年个人年终工作总结报告及2021年工作计划怎么利用敬业签历史记录 利用云便签备忘录及待办事项的任务清单有效解决2020年终总结报告的撰写
  15. Android recyclerview上拉加载更多
  16. UltraEdit mac版破解方法
  17. 【大学物理·恒定电流的磁场】磁感应强度
  18. MySQL每秒50w+的写入,如何实现?
  19. 都市鸿蒙珠认主,都市之我能穿越洪荒
  20. (转)活灵活现用Git-技巧篇

热门文章

  1. structural induction
  2. 【Cocos2d-X-2.1.4游戏引擎】发布第一个游戏
  3. Ai脑洞丨诗版的《星球大战Ⅷ-最后的绝地武士》
  4. MySQL自增id不连续问题
  5. css展开与收缩动画
  6. PonyCar体验感受
  7. 湖南电网计算机一批分数线,电网批分数线
  8. css 日历图标实现
  9. eXo Platform开始从门户转向Web OS
  10. Win10 磁盘管理、分盘、扩展压缩