资讯专栏INFORMATION COLUMN

浅谈正则表达式

lookSomeone / 428人阅读

摘要:浅谈正则表达式正则表达式是对字符串进行查找替换和提取等操作的工具。参数参数是一个字符串,制订了正则表达式的模式和其他正则表达式参数是一个可选的字符串,包含属性,分别用于指定全局匹配区分大小写的匹配和多行匹配。

浅谈正则表达式

</>复制代码

  1. 正则表达式是对字符串进行查找替换和提取等操作的工具。有两种写法:

直接量语法

</>复制代码

  1. /pattern/attribues

RegExp对象语法

</>复制代码

  1. new RegExp(pattern,attributes);

举个例子,比如我们要在一段字符串中查找所以数字,如下:

</>复制代码

  1. var str = "1 23 sda 34 adl34 7655 87 a 90 0";
  2. console.log(str.match(/d+/g))
  3. // ["1", "23", "34", "34", "7655", "87", "90", "0"]

只需要这么简单的一段代码就能在控制台打印出我们需要的结果了。如果用一般的写法,我们可能需要遍历字符串,还要对字符串的内容进行判断,就要写一大段代码,而利用正则表达式,我们可以很轻松的达成我们的需要。

再举个例子,我们要对"35621237.61"这串数字添加千分位分隔符:

</>复制代码

  1. var a = "35621237.61";
  2. var reg=/(?=(d{3})+(.|$))/g;
  3. console.log(a.replace(reg,","))
  4. //35,621,237.61

就这样就搞定了!

不过正则表达式有个缺点,就是符号太多,有时候看上去一脸懵逼,为了了解正则表达式,我们现在来看看正则表达式的各种属性,以利用这个强大的工具。

参数

参数 pattern 是一个字符串,制订了正则表达式的模式和其他正则表达式

参数 attributes 是一个可选的字符串,包含属性"g"、"i"、"m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。

修饰符

</>复制代码

  1. i 执行对大小写不敏感的匹配
  2. g 全局匹配,即查找所有匹配
  3. m 执行多行匹配
方括号

方括号用于查找某个范围内的字符

</>复制代码

  1. [abc] 查找方括号之间的任何字符
  2. [^abc] 查找任何不在方括号之间的字符
  3. [0-9] 查找任何从 09 的数字
  4. [a-z] 查找任何从小写 a 到小写 z 的字符
  5. [A-Z] 查找任何从大写 A 到大写 Z 的字符
  6. [adgk] 查找给定集合内的任何字符
元字符

即特殊符号

</>复制代码

  1. . 查找单个字符,除了换行和行结束符
  2. w 查找单词字符
  3. W 查找非单词字符
  4. d 查找数字
  5. D 查找非数字字符
  6. s 查找空白字符
  7. S 查找非空白字符
  8.  匹配单词边
  9. B 匹配非单词边界
  10. 查找 NUL 字符
  11. 查找换行符
  12. f 查找换页符
  13. 查找回车符
  14. 查找制表符
  15. v 查找垂直制表符
  16. xxx 查找以八进制数 xxx 规定的字符
  17. xdd 查找以十六进制数 dd 规定的字符
  18. uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符
量词

</>复制代码

  1. n+ 匹配任何包含至少一个 n 的字符串
  2. n* 匹配任何包含零个或多个 n 的字符串
  3. n? 匹配任何包含零个或一个 n 的字符串
  4. n{X} 匹配包含 X 个 n 的序列的字符串
  5. n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串
  6. n{X,} 匹配包含至少 X 个 n 的序列的字符串
  7. n$ 匹配任何结尾为 n 的字符串
  8. ^n 匹配任何开头为 n 的字符串
  9. ?=n 匹配任何其后紧接指定字符串 n 的字符串
  10. ?!n 匹配任何其后没有紧接指定字符串 n 的字符串
贪婪匹配

顾名思义,即正则表达式一般趋向于最大长度匹配。但有时候我们不需要令他匹配太多,这就需要执行“非贪婪匹配”。

非贪婪匹配,就是匹配到结果就好.

</>复制代码

  1. var a="123 34 4445 99486 90";
  2. var reg=/d{3,}/g;
  3. console.log(a.match(reg))
  4. //["123", "4445", "99486"]

在上面的例子中,我们要查找3个及3个以上的数字,我们匹配到的结果就是["123", "4445", "99486"]。那如何启用非贪婪匹配呢,只需要在量词后面加个“?”就好了。

</>复制代码

  1. var a="123 34 4445 99486 90";
  2. var reg=/d{3,}?/g;
  3. console.log(a.match(reg))
  4. //["123", "444", "994"]

</>复制代码

  1. ? 也是一个量词,在上面的属性表中我们知道了,他的意思就是匹配另个或一个字符串。

分支、分组、引用 分支

</>复制代码

  1. var a = "Hello my name is pureview";
  2. var reg=/name|pureview/;
  3. sondole.log(a.match(reg));
  4. // ["name", "pureview"]

如上,我们想匹配name,又想匹配pureview两个单词,可以使用特殊符号"|",这样就即可以找到name,也可以找到pureview了

分组与调用

</>复制代码

  1. var a=`
  2. abc
  3. 2017-08-22
  4. test/07/ss
  5. 2018/09/121
  6. 2019/11/02
  7. 11232/33/44225
  8. 11234-123-45`;
  9. var reg=/d{4}[-/]d{2}(-|/)d{2}[^0-9]/g;
  10. console.log(a.match(reg));
  11. //["2017-08-22", "2018/09/12"]

如上,我们要从上面的字符串中找到正确的日期。先来解释一下这串正则表达式:

</>复制代码

  1. d{4} 匹配4位数字
  2. [-/] 匹配-或者/连接符
  3. d{2} 匹配2位数字
  4. (-|/) 匹配-或者/连接符。因为/是特殊符号,所以需要进行修饰
  5. [^0-9] 以非数字结尾

正确的日期已经匹配到,现在我们把年-月-日格式的日期替换成月-日-年格式的,我们只需要对正则表达式进行分组,然后再调用就好了,代码如下:

</>复制代码

  1. var reg=/(d{4})[-/](d{2})(-|/)(d{2})[^0-9]/g;
  2. var b=a.match(reg);
  3. var c = b.join(",");
  4. console.log(c.replace(reg,"$2-$4-$1"));
  5. //08-22-2017,11-02-2019

</>复制代码

  1. 对正则表达式进行分组只需要把相应的代码用括号括起来就好了。对分组的调用也很简单,用$加对应的组别调用就好,在上面的正则表达式中,(-|/)其实也被认为是一个组,所以在调用日期的是,就是$4了。那么有没有办法忽略无谓的分组呢。其实可以的。

</>复制代码

  1. var reg=/(d{4})[-/](d{2})(?:-|/)(d{2})[^0-9]/g;
  2. var b=a.match(reg);
  3. var c = b.join(",");
  4. console.log(c.replace(reg,"$2-$3-$1"));
  5. //08-22-2017,11-02-2019

如上,只需在要忽略的分组里加一个?:就OK了

正则表达式对象属性

</>复制代码

  1. global 正则表达式对象是否具有标志 g
  2. ignoreCase 正则表达式对象是否具有标志 i
  3. lastIndex 一个整数,标示开始下一次匹配的字符位置
  4. multiline 正则表达式对象是否具有标志 m
  5. source 正则表达式的源文本
正则表达式对象方法

</>复制代码

  1. compile 编译正则表达式
  2. test 检索字符串中指定的值。返回 truefalse
  3. exec 检索字符串中指定的值。返回找到的值,并确定其位置
支持正则表达式的字符串对象方法

</>复制代码

  1. search 检索与正则表达式相匹配的值
  2. match 找到一个或多个正则表达式的匹配
  3. replace 替换与正则表达式匹配的子串
  4. split 把字符串分割为字符串数组

注意,如果字符串内有特殊字符,如""、".",在查找这些符号的时候,要在符号前加""转码

</>复制代码

  1. 小知识:在字符串内,要想打印”“,那代码里要写两个反斜杠”“

正则表达式的书写练习

</>复制代码

  1. 当使用正则表达式的时候,一般会对字符串进行拆解,翻译然后进行拼接

手机号

比如,要验证表单里的手机号格式是否正确:

17631638693

首先,手机号均以"1"开头,手机号的前三位是手机号的各种特殊字段,比如150,134,176,189等。手机号的第二位是特殊的,后面的数字就是普通的数字了。正则表达式就可以这样写:

</>复制代码

  1. var num="17631638693";
  2. var reg=/1[34578]d{9}/;
  3. //"1"是固定的,[34578]代表特殊字段,剩下的为普通数字
  4. console.log(reg.test(num));
  5. //true
QQ号

再比如QQ号,QQ号都是以"1"开头的数字,最少有5位

</>复制代码

  1. var qq="87629900";
  2. var reg=/[1-9][0-9]{4,}/;
  3. //[1-9]表示第一位为从1开始的任意数字,剩下的表示至少4位以上的任意数字;
  4. console.log(reg.test(qq));
  5. //true
邮箱

邮箱的正则表达式

</>复制代码

  1. var email="exp@exp.com";
  2. var reg=/w+@[a-zA-Z0-9]+.[a-z]+/
  3. //邮箱的名字可能是字母,或者数字,也可能出现下划线等,且至少有1个字符,所以用特殊字符"w+"就可以匹配。邮箱服务商的名字可能是字母,数字,但是不会有下划线,邮箱服务商的名字长度至少一个字符,所以用[a-zA-Z0-9]+表示。域名就是普通的字母了,且至少一位。注意在".com"中的那个点,是个特殊字符,需要用反斜杠修饰
  4. console.log(reg.test(email))
  5. //ture
网址

网址的表达式可能会复杂些

比如http://www.baidu.com。我们来分析一下,前缀"http"是固定的,根据协议不同,还会有"https",后面的都是非空字符了,但是网址有结构,包含万维网,即"www" , 网站名,和域名,都要分别进行匹配

</>复制代码

  1. var url="https://www.baidu.com/"
  2. var reg=/^http[s]?://[a-z]+.w+.[a-z]+[^s]*$/
  3. // "?"是特殊字符,表示01,即可有可无
  4. console.log(reg.test(url))
  5. //true
END

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84878.html

相关文章

  • 【前端早读会】每天记录前端学习的过程

    摘要:在这里使用学而思网校的录像设备,记录前端工程师每天学习的内容商城小程序分享人王聪视频插件开发分享人魏媛视频原理分享人李佳晓视频讲座优化实战分享人江芊视频文件操作分享人张凯视频一次性学会正则表达式分享人贺杰视频浅谈 在这里使用学而思网校的录像设备,记录前端工程师每天学习的内容: 2019-8-22 商城小程序codereview 分享人:王聪 视频:https://lecture.xue...

    tylin 评论0 收藏0
  • 2018 浅谈前端面试那些事

    摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...

    LiuRhoRamen 评论0 收藏0
  • 2018 浅谈前端面试那些事

    摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...

    stormgens 评论0 收藏0
  • 2018 浅谈前端面试那些事

    摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...

    Hujiawei 评论0 收藏0
  • 优秀博文收藏(不定期更新)

    摘要:我的书签我的书签谨慎导入,小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧,让你少写不必要的,代码更优雅一劳永 我的书签 我的书签(谨慎导入,小心覆盖) 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

    sunsmell 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<