为什么要使用正则表达式

正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验,搜索,替换。在javascript中类似这样
  1. /^1\d{10}$/

复制代码

上面的这个简单的正则用来匹配手机号
 
至于说正则表达式到底有什么意义,借由《精通正则表达式》里面的一句话来概括好了。
 
​“如果罗列计算机软件领域的伟大发明,我相信绝对不会超过二十项,在这个名单当中,当然应该包括分组交换网络,Web,Lisp,哈希算法,UNIX,编译技术,关系模型,面向对象,XML这些大名鼎鼎的家伙,而正则表达式也绝对不应该被漏掉。
 
​对很多实际工作而言,正则表达式简直是灵丹妙药,能够成百倍的提高开发效率和程序质量。”

正则表达式的生成

在javascript中生成正则表达式的方式有两种
  • 调用RegExp对象的构造函数
    1. var reg = new RegExp('^[a-z]+[0-9][align=left][font=微软雅黑][size=3][color=#000000][backcolor=white]其中第一个参数是匹配模式,第二个参数是可选参数(g, i, m),分别用于指定全局匹配、区分大小写的匹配和多行匹配。这种方式会在正则表达式运行时编译(runtime compilation)。如果你知道正则表达式模式将会改变,或者你事先不知道什么模式,而是从另一个来源获取,如用户输入,这些情况都可以使用构造函数。[/backcolor][/color][/size][/font][/align]
    2. [*][align=left][font=微软雅黑][size=3][color=#000000][backcolor=white]使用正则表达式字面值,将匹配模式封闭在两个斜杠中[/backcolor][/color][/size][/font][/align][code]var reg = /^[a-z]+[0-9]$/gi

    复制代码

    当表达式被赋值时,字面量形式提供正则表达式的编译(compilation),当正则表达式保持为常量时一般使用字面量方式。例如当你在循环中使用字面量构造一个正则表达式时,正则表达式不会在每一次迭代中都被重新编译(recompiled)

正则表达式的组成

正则表达式的文字模板是有很多不同类型的字符组成的,包括:
元字符,转义字符,限定符,字符组,或结构,括号分组
元字符
字符
含义
. 匹配除了换行符(n)以外的所有字符
w 匹配字母,数字,或者汉字
W 匹配除了字母,数字,汉字以外的其他字符
d 匹配数字
D 匹配除了数字以外的其他字符
s 匹配任意的空白符(f, n, r, t, v)
S 匹配空白符以外的任意字符
b 匹配单词的开始或者结束
B 匹配单词的非开始或者结束
^ 匹配行首
$ 匹配行尾
 
转义字符
* + ? | { [ ( ) ] }^ $ . # 和 空白 这些字符都是需要转义的。例如我们要匹配{。
  1. \{

复制代码

 
限定符
字符
含义
* 匹配零次至多次
+ 匹配一次至多次
匹配零次或一次
{2,} 至少匹配两次
{10} 匹配10次
{{2, 8}} 至少匹配两次之多匹配八次
 
字符组[]
中括号字符组用来匹配括号内的字符之一
  1. 'fasfagxfasdfyfasfz'.split(/[xyz]/) //["fasfag", "fasdf", "fasf", ""]

复制代码

还有一种排除性字符组
  1. 'xaxbycz'.split(/[^xyz]/)   //["x", "x", "y", "z"]

复制代码

或结构 |
例如c|d匹配或者d
  1. /c|d/.test('af') // false
  2. /c|d/.test('ad') // true

复制代码

 
括号分组
(cd){1,} 可以匹配cdcd..等, 其中cd便是一个分组。
  1. /(cd){1,}$/.test('cdcd') //true

复制代码

贪婪模式和非贪婪模式

默认情况下,所有的限定词都是贪婪模式,表示尽可能多的去捕获字符。而在限定词后增加“?”,则是非贪婪模式,表示尽可能少的去捕获字符。
  1. 'ccccccd'.match(/c+/) //["ccccc"], 贪婪模式, 捕获所有
  2. 'ccccccd'.match(/c+?/) //["c"], 非贪婪模式, 只捕获到第一

复制代码

捕获分组

在实际应用中我们很有可能需要获取到匹配的字符串,例如我们要将字符串"万里碧空飘着朵朵白云"替换成"万里碧空没有一朵白云"
  1. "万里碧空飘着朵朵白云".replace(/(万里碧空)飘着朵朵白云/, '$1没有一朵白云')

复制代码

捕获性分组会创建反向引用,js中可以通过 $+number 或者 "反斜杠"+number" 表示法进行引用。
 
注意:
反斜杠+number这种引用可以在正则表达式中使用,可用于匹配不同位置的相同子串,例如:
  1. 'www.bai.bai.com'.replace(/([a-z]+)\.\1/, '$1') // www.bai.com

复制代码

非捕获性分组
非捕获性分组,通常由一对括号加上”?:”加上子表达式组成,非捕获性分组不会创建反向引用,就好像没有括号一样。捕获性分组和无捕获性分组在搜索效率方面也没什么不同,没有哪一个比另一个更快。
  1. /^(?:\d+)/

复制代码

正则表达式的方法

test
检索字符串中的指定子串,返回布尔值
  1. /^\d[a-zA-Z]{3}$/.test('1aac') // true

复制代码

exec
返回一个数组,数组中的第一个条目是第一个匹配
  1. /^\d[a-zA-Z]{3}$/.exec('1aac') // ["1aac"]

复制代码

String可以使用正则表达式的方法

search
返回子串的开始位置
  1. 'a12b2334c34'.search(/\d{4}/) // 4

复制代码

match
返回匹配到的子串
  1. 'a12b2334c34'.match(/\d{4}/) // ["2334"]

复制代码

replace
替换匹配到的子串
  1. 'a12b2334c34'.replace(/\d{4}/, 'cccc') // "a12bccccc34"

复制代码

split
将字符串分割成数组
  1. 'a12b2334c34'.split(/\d{4}/)  // ["a12b", "c34"]

复制代码

断言

正向先行断言 (?=exp)
代表字符串中的一个位置,紧接该位置之后的字符序列能够匹配 exp
  1. /f(?=234)/.test('123abcf234acd') //true

复制代码

负向先行断言(?!exp)
代表字符串中的一个位置,紧接该位置之后的字符序列不能匹配 exp
  1. /f(?!234)/.test('123abcf234acd') //false

复制代码

常用的正则表达式

Email 地址:
  1. ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

复制代码

URl验证
  1. [a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

复制代码

密码验证
  1. (?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,16}$

复制代码

邮编验证
  1. [1-9]d{5}(?!d)

复制代码

手机号码验证
  1. ^1\d{10}$

复制代码

汉字验证
  1. ^[\u4e00-\u9fa5]{0,}$

复制代码

javascript 正则表达式总结的更多相关文章

  1. JavaScript正则表达式,你真的知道?

    一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...

  2. 【JS】javascript 正则表达式 大全 总结

    javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...

  3. 理清JavaScript正则表达式--上篇

    在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...

  4. 理清JavaScript正则表达式--下篇

    紧接:"理清JavaScript正则表达式--上篇". 正则在String类中的应用 类String支持四种利用正则表达式的方法.分别是search.replace.match和s ...

  5. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  6. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  7. Python自动化 【第十八篇】:JavaScript 正则表达式及Django初识

    本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  8. JavaScript正则表达式下——相关方法

    上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...

  9. JavaScript 正则表达式上——基本语法

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

  10. 正则表达式入门教程&&经典Javascript正则表达式(share)

    前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...

随机推荐

  1. bzoj1009 GT考试 (kmp+矩阵优化dp)

    设f[i][j]是到第i位 已经匹配上了j位的状态数 然后通过枚举下一位放0~9,可以用kmp处理出一个转移的矩阵 然后就可以矩阵快速幂了 #include<bits/stdc++.h> ...

  2. loj6157 A ^ BProblem (并查集)

    设s[x][i]表示从根到x的异或和在第i位上的值(0/1),(a,b,i)表示a到b的异或和在第i位上的值那么就有(a,b,i)=(s[a][i]^s[b][i]^s[lca][i]^s[lca][ ...

  3. IncDec Sequence(差分)

    题意:给定一个序列,可以对一个区间进行加1或减1的操作,问最少需要多少次可以将序列的值一样. Solution 我们将序列差分,得到一个差分数组. 对于每一个区间操作,我们可以把它转化为在查分数组上某 ...

  4. Bootloader升级方式一————擦、写flash在RAM中运行

    在汽车ECU软件运行中,软件代码运行安全性是第一,在代码中尽可能的不要固化有flash_erase.flash_write操作存在,主要是防止当出现异常情况时,程序跑飞,误调用erase.write对 ...

  5. Learn to securely share files on the blockchain with IPFS!

    https://medium.com/@mycoralhealth/learn-to-securely-share-files-on-the-blockchain-with-ipfs-219ee47d ...

  6. Vue -- 双向过滤器去除html标签

    <div id="box"> <input type="text" v-model="msg | filterHtml"& ...

  7. HEOI2013 Segment

    传说中的“李超树”. 大意:给你若干线段,试求横坐标x上的最上方一条线段的编号.无则输出零. 解:用线段树维护. 插入的时候保存自己这个区间上可能成为最大值的线段,被抛弃的则看情况下放. 查询时从最底 ...

  8. zabbix自动发现

    zabbix3.4 Discovery自动发现教程 Zabbix 创建发现规则创建发现规则配置 ---- 自动发现 ---- 创建发现规则 看一个例子 这样发现规则就没有问题了,下面让主机自动加入到某 ...

  9. bzoj2434 阿狸的打字机

    题目链接 思路 可以发现,其实题目中所描述的操作,就是在\(AC\)自动机上走的过程.输出就是打上标记.删除就是返回父亲节点. 然后看询问.每次询问字符串\(x\)在字符串中\(y\)出现的次数.其实 ...

  10. vue 本地存储数据 sessionStorage

    在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, fun ...