JavaScript正则表达式

1.创建正则表达式

1.1方法1：直接量语法

  • 语法：var reg = /pattern/attributes
  • 解释：参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

1.2 方法2：创建RegExp对象的语法

  • 语法：var reg = new RegExp(pattern,attributes)
  • 解释：参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

1.3 区别：

1.采用直接量语法新建的正则表达式对象在代码编译时就会生成，是平常开发中常用的方式；

2.采用构造函数生成的正则对象要在代码运行时生成。

1.4正则表达式使用

1.正则对象的方法是指这样使用的： RegExp对象.方法(字符串)

2.字符串对象的方法是这样使用：字符串.方法(RegExp对象)

2.正则对象的属性

2.1.属性

  1. ignoreCase 返回布尔值，表示RegExp 对象是否具有标志 i
  2. global 返回布尔值，表示RegExp对象是否具有标志g
  3. multiline 返回布尔值，表示RegExp 对象是否具有标志 m。
  4. lastIndex 一个整数，标识开始下一次匹配的字符位置
  5. source 返回正则表达式的源文本（不包括反斜杠）
  6. i 执行对大小写不敏感的匹配
  7. g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
  8. m 执行多行匹配
  9. 正则表达式作用

2.2.应用

2.2.1 验证

  • 用于验证时，通常需要在前后分别加上^和$，以匹配整个待验证字符串；

2.2.2 搜索替换

  • 搜索/替换时是否加上此限定则根据搜索的要求而定，此外，也有可能要在前后加上\b而不是^和$

2.3.匹配类型

2.3.1字符匹配

正则表达式 用途
[…] 查找方括号之间的任何字符
[^…] 查找任何不在方括号之间的字符
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
. 查找单个字符，除了换行和行结束符
\w 查找单词字符，等价于[a-zA-Z0-9]
\W 查找非单词字符，等价于[^a-zA-Z0-9]
\s 查找空白字符
\S 查找非空白字符
\d 查找数字，等价于[0-9]
\D 查找非数字字符，等价于[^0-9]
\b 匹配单词边界
\r 查找回车符
\t 查找制表符
\0 查找 NULL 字符
\n 查找换行符

2.3.2重复字符匹配

正则表达式 用途
{n,m} 匹配前一项至少n次，但不能超过m次
{n,} 匹配前一项n次或更多次
{n} 匹配前一项n次
n？ 匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0，1}
n+ 匹配前一项1次或多次，等价于{1，}
n* 匹配前一项0次或多次，等价于{0，}
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
?=n 匹配任何其后紧接指定字符串 n 的字符串
?!n 匹配任何其后没有紧接指定字符串 n 的字符串

2.3.3匹配特定数字

正则表达式 用途
^[1-9]\d*$ 匹配正整数
^-[1-9]\d*$ 匹配负整数
^-?[0-9]\d*$ 匹配整数
^[1-9]\d*|0$ 0$匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$ 匹配非正整数（负整数 + 0）
^[1-9]\d*.\d*|0.\d*[1-9]\d*$ 匹配正浮点数
^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 匹配负浮点数
^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$ 匹配浮点数
^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$ 匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$ 匹配非正浮点数（负浮点数 + 0）

2.3.4匹配特定字符串

正则表达式 用途
[1]+$ 匹配由26个英文字母组成的字符串
[2]+$ 匹配由26个英文字母的大写组成的字符串
[3]+$ 匹配由26个英文字母的小写组成的字符串
[4]+$ 匹配由数字和26个英文字母组成的字符串
^\w+$ 匹配由数字、26个英文字母或者下划线组成的字符串

3方法

3.1 test方法

​ 检索字符串中指定的值。返回 true 或 false。 检索字符串中指定的值。返回 true 或 false。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>text</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var reg = /123/g;
  10.         var str = 'hello123hello123';
  11.         console.log(reg.test(str));//true
  12.         console.log(reg.lastIndex);//8
  13.         console.log(reg.test(str));//true
  14.         console.log(reg.lastIndex);//16
  15.         console.log(reg.test(str));//false
  16.         console.log(reg.lastIndex);//0
  18.     </script>
  19. </body>
  20. </html>
  21. //使用了g修饰符的正则表达式，表示要记录每一次搜索的位置，接着使用test方法，每次开始搜索的位置都是上一次匹配的后一个位置。

3.2 exec方法

​ 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>exec</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var str='abc';
  10.         var reg1 = /x/;
  11.         var reg2 = /a/;
  12.         console.log(reg1.exec(str));//null
  13.         console.log(reg2.exec(str));//array["a", index: 0, input: "xyz"]
  15.     </script>
  16. </body>
  17. </html>

​ 如果正则表达式包含圆括号，则返回的数组会包括多个元素。首先是整个匹配成功的结果，后面是圆括号里匹配成功的结果，如果有多个圆括号，他们的匹配成功的结果都会成为数组元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>exec</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var str='abcdabc';
  10.         var reg1 = /(a)b(c)/;
  11.         console.log(reg1.exec(str));//["abc", "a", "c", index: 0, input: "abcdabc", groups: undefined]
  12.     </script>
  13. </body>
  14. </html>

3.3 search方法

​ search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

​ 返回值： stringObject 中第一个与 regexp 相匹配的子串的起始位置。

​ 注释：如果没有找到任何匹配的子串，则返回 -1。

​ search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>search</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var str='abcdefgh';
  10.         console.log(str.search('h'))//7
  11.     </script>
  12. </body>
  13. </html>

3.4match方法

​ match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

​ 字符串对象的match方法与正则对象的exec方法比较类似：但是如果正则表达式带有g修饰符，那么match方法与exec方法就有差别了:可以看到match返回了所有成功匹配的结果，但是exec方法只返回了一个。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>match</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var str = "abcd";
  10.         var reg1 = /a/;
  11.         var reg2 = /x/;
  12.         console.log(str.match(reg1));//a
  13.         console.log(str.match(reg2));//null
  15.         var str2 = "abcabc";
  16.         var reg3 = /a/g;
  17.         console.log(str2.match(reg3));//['a','a']
  18.     </script>
  19. </body>
  20. </html>

3.5 replace方法

​ replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

返回值：一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

​ 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>replace</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var str = "aaa";
  10.         console.log(str.replace('a', 'f'));//fbcdaa
  11.     </script>
  12. </body>
  13. </html>

3.6 split方法

​ split(‘字符串的分割正则','返回数组的最大成员数')；返回分割后各部分组成的数组

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>split</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         var str = "a,b,c,d,e,f";
  10.         var res = str.split(",");//以逗号来分割字符串
  11.         console.log(res);//["a", "b", "c", "d", "e", "f"]
  12.         var str2 =  "a, b ,c,d";
  13.         var res2 = str2.split(/, */);//以0或对个逗号空格来分割字符串
  14.         console.log(res2);//["a", "b ", "c", "d"]
  15.     </script>
  16. </body>
  17. </html>

3.7示例：

  • 从URL中提取子域名
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>split</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.           var url = "http://www.abc.com";
  10.           var reg = /[^.]+/;//匹配除了.之外的其他字符
  11.           var res = reg.exec(url)[0].substr(7);
  12.           console.log(reg.exec(url));//["http://www", index: 0, input: "http://www.abc.com"]
  13.           console.log(res);//www
  14.     </script>
  15. </body>
  16. </html>

4.常用正则匹配

  1. 匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
  3. 如 0511-4405222 或 021-87888822
  5. 匹配QQ号：[1-9][0-9]{4,}
  7. 从10000开始
  9. 邮政编码：[1-9]\d{5}(?!\d)
  11. 邮政编码为6位数字
  13. 匹配身份证：/^(\d{14}|\d{17})(\d|[xX])$/
  15. 匹配规则：身份证号码有15位或者18位，其中最后一位可能是X，其他全是数字
  17. 匹配ip地址：\d+.\d+.\d+.\d+
  19. 匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 表单验证时很实用
  21. 匹配中文字符： /[\u4E00-\u9FA5\uf900-\ufa2d]/
  23. 使用 Unicode，必须使用\u开头，接着是字符编码的四位16进制表现形式
  25. 匹配Email地址：
  27. /^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(.[a-zA-Z_0-9-])+$/
  29. 邮箱的规则是: 由3部分组成
  31. 由1个或者多个字母数字下划线和杠 + @ + 1个或者多个字母数字下划线和杠 + . + 1个或者多个字母数字下划线和杠
  33. 匹配网址URL：[a-zA-z]+://[^\s]*
  35. 判断字符串是不是由数字组成: /^\d*$/
  37. 限制文本框只能输入数字和小数点(二位小数点):
  39. /^\d*.?\d{0,2}$/
  41. 说明：开头有0个或者多个数字，(?表示匹配前一项0次或者多次)中间有0个或者1个小数点，小数点后面有0个或者最多2个数字
  43. 用户名正则: /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/
  45. 匹配规则：只能是中文，英文，数字，下划线，4-16个字符
  47. 匹配中文字符正则：/[\u4E00-\u9FA5\uf900-\ufa2d]/
  49. \w是 匹配英文，数字，下划线
  51. 匹配英文地址:/^[a-zA-Z][.a-zA-Z\s,0-9]*?[a-zA-Z]+/匹配规则：包含点，字母，空格，逗号，数字，但是开头和结尾必须为字母分析：开头必须为字母可以这样写/[a−zA−Z]/结尾必须为字母可以这样写：/[a−zA−Z]+/
  53. 中间包含点，字母，空格，逗号，数字的正则：/[.a-zA-Z\s,0-9]*?/
  55. 外面的*号是0个或者多个，后面的问号? 代表可有可无;有就匹配，没有就不匹配;
  57. 匹配价格:/^\d*(.\d{0,2})?$/
  59. 匹配规则: 开头有0个或者多个数字，中间可能有一个小数点，后面有可能有0-2位小数
  61. 单词的首字母大写:/\b(\w)|\s(\w)/g
  63. 验证日期格式:/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/
  65. 日期格式有2种 第一种是yyyy-mm-dd 或 yyyy/mm/dd
  67. 分析:月和天数可以有1位或者2位

此文源于： https://www.jb51.net/article/97901.htm

  1. A-Za-z ↩︎

  2. A-Z ↩︎

  3. a-z ↩︎

  4. A-Za-z0-9 ↩︎

web前端篇：JavaScript正则表达式的更多相关文章

  1. web前端分享JavaScript到底是什么？特点有哪些？

    web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...

  2. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  3. 好程序员web前端分享javascript关联数组用法总结

    好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...

  4. Python web前端 05 JavaScript

    Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...

  5. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  6. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  7. 1+x 证书 Web 前端开发 JavaScript 专项练习

    官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/

  8. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  9. web前端篇：JavaScript基础篇（易懂小白上手快）-1

    目录 详细内容: 0.JavaScript的引入 1.第一个JavaScript 2.变量 3.变量的类型 4.数组 5.条件语句 6.三元运算符 7.循环 8.函数 9.对象(object): 10 ...

随机推荐

  1. innodb的锁和高并发

    1 innodb的锁 1.1 s锁,即读锁,即share锁 1.2 x锁,即写锁,排他锁 1.3 s锁和x锁之间的关系 多个读锁可以共存,但是读锁不可以和写锁共存.写锁和写锁不可以共存. 1.4 间隙 ...

  2. Jquey模糊选择

    Jquey模糊选择   属性字头选择器(Attribute Contains Prefix Selector): jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=va ...

  3. 使用酷Q SDK开发QQ机器人

    酷Q SDK下载地址:https://github.com/CoolQ/cqsdk-vc 打开工程,编辑appmain.cpp 将“私聊消息”处的代码 更改为 CQEVENT(int32_t, __e ...

  4. react-native填坑--react-navigation

    Navigator已经被React Native废弃了.也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到.不过既然官方推荐的是re ...

  5. 【智能无线小车系列十】通过USB摄像头实现网络监控功能

    如果仅有静态图像可能还不足以满足我们的需求,我们可能会需要用到实时的监控功能.这里介绍一款小应用:motion.motion的功能可强大了,不仅可以将监控的画面通过视频传输,实时展现,更为强大的是,m ...

  6. javascript中获取class

    js中没有获取class的办法,找了一些封装好的方法,这里整理一下 (1)先进行封装 //封装getClass function getClass(tagName,className) //获得标签名 ...

  7. Java GET和POST请求

    从表面来看GET和POST请求: GET请求是在url后直接附上请求体,url和请求体之间用"?"分割,不同参数之间用"&"分隔,%XX中的XX为该符号 ...

  8. ICE协议下NAT穿越的实现（STUN&TURN）

    正文: 一. 首先来简单讲讲什么是NAT? 原来这是因为IPV4引起的,我们上网很可能会处在一个NAT设备(无线路由器之类)之后.NAT设备会在IP封包通过设备时修改源/目的IP地址. 对于家用路由器 ...

  9. 模仿yui将css和js打包，加速网页速度

    如果你有机会用firebug看看自己网站的网络请求,你会发现请求数量之多超乎你的想象.为减少这个数量,有许多技术方案.比如yui的combo,会将所有需要的js混合成一个文件下载,现代web服务器好像 ...

  10. AndroidManifest中的Intent-filter标签

    经过测试,intent-filter标签中的: 1. <action android:name="android.intent.action.MAIN" /> 代表这是 ...