JavaScript高级(8) 正则表达式

正则表达式

  555虽然以前都学过但是忘得差不多了

什么是正则表达式

  正则表达式(Regular Expression) 是用于匹配字符串中字符组合的模式.在JavaScript中,正则表达式也是对象

  正则表达式通常被用来检索.替换那些符合某个模式(规则)的文本,例如验证表单:用户名只能输入英文,字母,下划线,昵称输入框中可以输入中文(匹配).此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等

  其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript正则表达式完成表单验证

特点:

  • 灵活性,逻辑性和功能性非常的强
  • 可以迅速地用极简单的方式达到字符串的复杂控制
  • 实际开发,一般都是直接复制粘贴写好的正则表达式 ,但是要求会使用正则表达式并且根据实际情况修改正则表达式.

创建正则表达式

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

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

2.通过字面量创建 (常用)

var 变量名 = /表达式/

这两种写法都可以,下面的比较常用

图片

  我们现在只是创建了一个正则表达式,但是还需要检验我们的字符是否符合正则表达式的规则.

本文由“壹伴编辑器”提供技术支持

测试正则表达式

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

regexObj.test(str)

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

  正则表达式里面不需要加引号,不管是数字型还是字符型

正则表达式的组成

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

  推荐的正则验证网站:

https://tool.oschina.net/regex

特殊字符有很多很多,现在我们分类学习一下

边界符

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

图片

  我们先来了解一下这个简单的匹配是什么意思

图片

  我们再来看看^和$是怎么使用的:

图片
图片

字符类

  [ ] 表示有一系列字符可供选择,只要匹配其中一个就可以了

图片

  看一个实际开发中比较常用的:

图片

  那假如我们要用户输入26个字母的任意一个呢?难道要将全部都写成[abcdefg…]吗?

  此时我们可以使用范围符[-],在方括号内部使用-就可以表示范围,如[a-z]就表示26个英文字母(当然只是小写字母)

图片

  如果是想要大写+小写,那我们可以使用字符组合 [a-zA-Z]

我们现在再来看看^的另一种作用:

图片

量词符

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

图片

现在一个个试一下,顺便看看区别:

  * 表示>=0

图片

  +表示>=1

图片

  ? 表示 0 || 1

图片

  {n} 表示只能出现n次

图片

  {n, } 表示出现的次数>=n次    注意逗号后面不能加空格!!!

图片

  {n, m} 表示出现的次数 n<=次数<=m

图片

模拟用户名的正则

图片

现在我们做一个验证用户名的案例

图片

    不符合规范应该改为红色(老师打错了应该)

图片
图片
图片
图片

  我们知道,如果是/^abc{3}$/,那就是将c重复三遍,应写成abccc,可是如果我么想要abc重复三遍呢?

  这时候就要用上小括号了,小括号代表优先级的意思.

图片

预定义类

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

图片
图片

现在我们做一个验证座机号码的案例

图片

注意:正则里的或者是”|”,一条竖线!!!两边不能加空格!!!

正则替换 replace

  replace()方法可以实现替换字符串的操作,用来替换的参数可以是一个字符串或是一个正则表达式

  stringObject.replace(regexp/substr,replacement)

  1. 第一个参数:被替换的字符串或者正则表达式
  2. 第二个参数:替换为的字符串
  3. 返回值是一个替换后新的字符串
图片
图片

用这个我们可以做一个敏感词过滤器

图片

  我们将’激情’设置为敏感词,然后将敏感词用**代替

图片

  但是仍然是有问题的,当我们第二次出现’激情’时,会出现这样的情况:

图片

  会发现他只会过滤掉一次

  但其实我们的正则表达式还有一个参数

/表达式/[switch]

  switch(也称为修饰符)按照什么样的模式来匹配,有三种值:

  • g: 全局匹配
  • i: 忽略大小写
  • gi: 全局匹配+忽略大小写

  所以此时只要在正则后面加上一个g即可.

图片
图片

后面就是ES6的一些内容,不过突然换老师了,没有灵魂了….明天继续,今天想做做运动

发表评论

登录后才能评论
网站客服
网站客服
申请收录 侵权处理
分享本页
返回顶部