JavaScript正则表达式_js正则表达式-CSDN博客
JavaScript正则表达式
奋飛
已于 2022-07-22 11:17:41 修改
阅读量8.8k
收藏
39
点赞数
分类专栏：
JavaScript
文章标签：
javascript
正则表达式
正则匹配
RegExp
于 2016-05-08 21:54:46 首次发布
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。
本文链接：
https://blog.csdn.net/ligang2585116/article/details/51348024
版权
专栏收录该内容
66 篇文章
4 订阅
订阅专栏
之前好一段时间，自己很抵触“正则表达式”。一是，对其了解甚浅，不能很完整的掌握；再者，觉得好多需要正则的，要不网上可以找到，要不可以使用其他方式去实现。总之，对于正则毫无心得。
最近，看完了《JavaScript忍者秘籍》这本书，对正则有了全新的认识，自己也尝试了总结了一些，在开发中，让好多事情变得事半功倍。
是一个拆分字符串并查询相关信息的过程。
通常被称为一个模式（pattern），是一个用简单方式描述或者匹配一系列符合某个语法规则的字符串。
一、创建正则表达式
ECMAScript通过
类型来支持正则表达式。
1. 字面量创建正则表达式
var
expression
=
pattern
flags
2. 构造函数创建
new
"pattern"
"flags"
g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
注意
：在开发过程中，如果正则是已知的，则
优先选择字面量语法
；而构造器方式则是用于运行时，通过动态构建字符串来构建正则表达式。
二、RegExp实例属性
RegExp每个实例都具有下列属性，通过这些属性可以取得有关模式的各种信息。
global：布尔值,表示是否设置了g标志.
ignoreCase：布尔值,表示是否设置了i标志.
multiline：布尔值,表示是否设置了m标志.
lastIndex：整数,表示开始搜索下一个匹配项的字符位置,从0算起.
source：正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回.
示例1：
pattern1
\[bc\]at
// 等价于
"\\[bc\\]at"
"i"
console
log
global
//false
ignoreCase
//true
multiline
lastIndex
//0
source
// \[bc\]at
三、RegExp实例方法
1. exec()
exec()
接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回null。
返回的数组虽然是Array的实例，但包含两个额外的属性：index和input。
其中index表示匹配项在字符串的位置，而input表示应用正则表达式的字符串。
：在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串(如果模式中没有捕获组，则该数组只包含一项)。
text
"cat, bat, sat, fat"
.at
matches
exec
index
// 0
// cat
示例2：
pattern2
// 3
// 5
// bat
// 8
2. test()
test()
接受一个字符串参数。在模式与该参数匹配的情况下返回true；否则，返回false。
注意：在只想知道目标字符串与某个模式是否匹配，但不需要知道其文本内容的情况下，使用这个方法非常方便。
示例：
"000-00-0000"
\d{3}-\d{2}-\d{4}
if
test
"The pattern was matched."
示例：不包含“ligang”
reg
^((?!ligang).)*$
"ligang"
// false
"ligangligang"
"li gang"
// true
四、正则表达式进阶
1. 精确匹配
如果一个字符不是特殊字符或者操作符，则表示该字符必须在表达式中出现。
"test"
"testabc"
：要想只允许匹配test，需
/^test$/
2. 匹配一类字符
很多时候，我们不想匹配一个特定的字符，而是想匹配一个有限字符集中的某一个字符。可以通过“[]”来实现。
[abc]
// “a”、“b“、”c“中的任何一个字符
[^abc]
// 除了“a”、“b“、”c“以外的任何一个字符
pattern3
[a-c]
// “a”到”c“之间的的任何一个字符（等价于pattern1）
3. 转义
如果我们需要匹配[、$、^、]等特殊字符，在正则中，使用反斜杠可以对任意字符进行转义，让被转义的字符作为本身进行匹配。
\<a\/\>
// 匹配<a/>
\w+@\w+\.\w+
//简单的邮箱匹配
4. 匹配开始和匹配结束
如果正则表达式第一个字符是“^”，则表示要从字符串的开头进行匹配。如果正则表达式最后一个字符是“$”，则表示必须出现在字符串的结尾。
^test
// 只能匹配以“test”开头的字符串
test$
// 只能匹配以“test”结尾的字符串
// 只能匹配一“L”开头、“G”结尾的字符串
5. 重复出现
a?
// 零次或一次
+
// 一次或多次
// 零次或多次
// 连续出现四次a
// 连续出现四次到7次
// 连续出现四次及以上
补充：
这些重复操作符可以是**
贪婪的
非贪婪的
**。默认情况下是贪婪的。
在操作符后面加一个问号（?），可以让该表达式变成非贪婪的：进行最小限度的匹配。
a+
a+?
"aaa"
// ["aaa"] 匹配所有三个字符
// ["a"] 只匹配一个字符，因为一个a字符就可以满足
6. 预定义字符类
\t 水平制表符
\b 空格
\f 垂直制表符
\r 换页符
\n 回车
7. 分组
使用
“()”
可以进行分组，当正则表达式有一部分用括号进行分组时，它具有双重责任，同时也创建所谓的捕获。
8. 或操纵符（OR）
可以用
“|”
表示或的关系
(lg)+|(ligang)+
// 匹配出现一次或多次的“lg”或“ligang”
9. 反向引用
在反斜杠后面加一个要引用的捕获数量，该数字从
开始。
^([dtn])a\1
// dad tat nan
可以任意一个以“d”、“t”、“n”开头，且后面跟着一个“a”字符，最后跟着和第一个捕获相同的字符。
注意：
[dtn]a[dtn]
// 可以是 dat dan等
上述二者不同！！！
在匹配XML类型的标签元素很有用！
<(\w+)>(.+)<\/\1>
// <a>click me</a>
五、捕获匹配的片段
1. 执行简单的捕获
旧版浏览器声明的透明度规则如下：
filter:alpha(opacity=50);
通过正则获取其透明度的值：
filter
"alpha(opacity=50);"
// opacity= 直到出现“)”
result
match
opacity=([^)]+)
// ["opacity=50", "50"]
100
// 0.5
match返回的数组的第一个索引值总是该匹配的完整结果，然后是每个后续捕获结果。
2. 用全局表达式进行匹配
html
"<div class='test'><b>Hello</b></div>"
<(\w+)([^>]*?)>
// ?为非贪婪模式（上述有提及）
// ["<div class='test'>", "div", " class='test'"]
// ["<div class='test'>", "<b>"]
说明：
示例1为非全局匹配，返回结果同上述“获取其透明度的值”，只是其包含了两个捕获。
示例2为
全局匹配
，
返回全局匹配结果，而不是每个匹配的捕获结果。
3. 捕获的引用
可以引用捕获到的匹配结果的两种方式：一是，自身匹配；二是，替换字符串。
方式一：上述“反向引用”已提及，
/<(\w+)>(.+)<\/\1>/; // <a>click me</a>
方式二：将驼峰变量变为用中划线替换，这在AngularJS等框架中太常见。
如：
ngClick --> ng-click
function
camelCaseToDash
str
// $1即为正则中第一个捕获，同上述的“\1”
return
replace
([A-Z])
"-$1"
toLowerCase
"ngClick"
// "ng-click"
4. 没有捕获的分组
小括号有双重责任：不仅要进行分组操作，还可以指定捕获。
如果正则表达式中存在大量的分组，就会引起很多不必要的捕获。
在开始括号后面加一个
“?:”
可以让其
不进行捕获
((ligang-)+)good
((?:ligang-)+)good
// ["ligang-ligang-good", "ligang-ligang-", "ligang-"]
"ligang-liganggood"
// ["ligang-ligang-good", "ligang-ligang-"]
六、利用函数进行替换
将正则表达式作为replace()方法的第一个参数时，导致在该模式的匹配元素（全局匹配的话，就是多个匹配元素）上进行替换，而不是在固定字符串上进行替换。
"ABCligangDEF"
[A-Z]
'X'
// "XXXligangXXX"
其最大的特性是可以接受一个函数作为替换值，而不是一个固定的字符串。函数的返回值是即将替换的值。
参数列表：
（1）匹配的完整文本
（2）匹配的捕获，一个捕获对应一个参数
（3）匹配字符在源字符串中的索引
（4）源字符串
示例：将横线替换成驼峰
如：ng-click --> ngClick
dashToCamelCase
-(\w)
all
letter
arguments
toUpperCase
'ng-click'
// arguments --> ["-c", "c", 2, "ng-click"]
由于全局正则在每一次成功匹配的时候都会调用这样的替换函数。这种技术甚至可以超越简单的机械替换，并且可以作为
字符串遍历
的一种手段。
示例：压缩查询字符串
如：将foo=1&foo=2&blah=3 --> foo=1,2&blah=3
compress
keys
// 存储
([^=&]+)=([^&]*)
full
key
value
","
""
// 我们不关心源字符串发生替换操作，只利用该函数的副作用
for
in
push
"="
join
"&"
"foo=1&foo=2&blah=3"
// "foo=1,2&blah=3"
《JavaScript高级程序设计》中提供了“提取URL的搜索字符串中的参数”的方法
如：当前浏览器地址为：http://blog.csdn.net/ligang2585116?a=1&b=2
urlArgs
args
query
location
search
substring
pairs
split
<
length
++
pos
indexOf
'='
==
continue
name
decodeURIComponent
// {a: "1", b: "2"}
使用上述方式实现：
enhanceUrlArgs
([^?&=]+)=([^&]+)
：上述获取搜索字符串参数的方法，都不能存在相同的key，如果有相同的key，需要求参照compress()方法进行处理！！
七、利用正则表达式解决常见问题
1. 修剪字符串
示例：修建字符串两头多余的空格
myTrim
// 以空格开头，后续出现零次或多次
// 以一个或多个空格结尾
(^\s\s*)
\s\s*$
// return str.replace(/(^\s+)/, "").replace(/\s+$/, "");
2. 匹配换行符
示例：匹配所有字符，包括换行符
"<b>Hello</b>\n<i>world</i>"
.*
// <b>Hello</b>
[\s\S]*
// <b>Hello</b>\n<i>world</i>
(?:.|\s)
最佳方案：
用于匹配任何不是空白字符的字符，以及匹配任意一个空白字符，联合起来就是匹配所有字符。
3. Unicode
示例：匹配Unicode
"\u674e\u521a"
[\w\u0080-\uFFFF_-]+
// ["李刚"]
4. 转义字符
示例：开发人员可能将元素的id值设置为form:update，我们只能通过转义来支持
// 该正则表达式允许匹配一个单词字符，或者一个反斜杠后面跟随任意字符
^((\w+)|(\\.))+$
"formUpdate"
"form\\:update"
支持正则表达式的字符串方法：
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
优惠劵
关注
点赞
觉得还不错?
一键收藏
打赏
知道了
评论
之前好一段时间，自己很抵触“正则表达式”。一是，对其了解甚浅，不能很完整的掌握；再者，觉得好多需要正则的，要不网上可以找到，要不可以使用其他方式去实现。总之，对于正则毫无心得。最近，看完了《JavaScript忍者秘籍》这本书，对正则有了全新的认识，自己也尝试了总结了一些，在开发中，让好多事情变得事半功倍。正则表达式是一个拆分字符串并查询相关信息的过程。 ...
复制链接
扫一扫
专栏目录
js
-pattern:
设计模式
05-14
这里我也把平时整体的设计模式分享一下。
设计模式是解决一类问题的模板，为软件设计中常见的问题提供解决方案。
是一种弱类型、动态的、基于原型的语言，所以它可以以很简单的方式去实现一些模式。切记不要去套用后台语言的设计模式，这往往会丢失
这门语言的动态性和灵活性。
一些常用的设计模式
单例模式：保证一个对象只有一个实例，第二次创建的实例和第一次创建的完全一样。
工厂模式：提供创建对象的方法。
迭代器模式：为遍历一个数据结构提供方法。
装饰者模式：增强普通对象的功能，按照顺序进行装饰。
策略模式：根据不同命令命中不同算法，可以避免使用多重条件语句。
外观模式：将复杂的子系统功能隐藏在外观之后，提供简单的调用接口。
代理模式：通过包装一个对象以控制对它的访问,ES6中的Proxy就是通过代理扩展对象功能。
中介者模式：对象之间不直接通信，借助中介对象进行通
基础篇
10-27
主要是介绍
的一些基础知识，主要是介绍
的正则书写方法与常用实例，需要的朋友可以参考下
7 条评论
您还未登录，请先
登录
后发表或查看评论
迷你书 (1).pdf
12-28
校验非零的正整数实例
10-20
本文分享了
（^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$）校验非零的正整数实例代码，代码简单易懂，需要的朋友可以看下
如何用
验证身份证号码是否合法
10-23
在用户注册页面有些需求要求的比较严格，需要对身份证验证是否合法，通过此功能严格此系统软件，从而过滤到很多水客。此篇文章主要是讲解如何用
验证身份证号码是否合法,需要的朋友可以参考下
大全
PsArvin的专栏
10-19
9390
weixin_43465508的博客
05-08
8633
是用于匹配字符串中字符组合的模式。在
中，
也是对象。这些模式被用于
RegEx
p 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。下面的页面与表格列出了一个
中可以利用的特殊字符的完整列表和描述。断言（Assertions）表示一个匹配在某些条件下发生。断言包含先行断言、后行断言和条件表达式。字符类（Character Classes）
JS
常用语法总结
fighting ~的博客
11-09
1万+
的简洁明了的常用语法总结
weixin_50698273的博客
05-24
1737
1. 构建
字面量创建
var reg = /
/修饰符；
构造函数创建
var reg = new
p('
','修饰符')
修饰符
​ i: ignoreCase, 匹配忽视大小写
​ m: multiline , 多行匹配
​ g: global , 全局匹配
2.
调用（实例方法）
1. exec
​ 匹配字符串和
的方法，
​ 匹配成功：
​ 返回一个数组[匹配内容,index:匹配的起始位置,.
许诺的博客
03-29
1.
，全称“Regular Expression”，在代码中常简写为
regex
p或RE。
，就是用某种模式去匹配一类字符串的公式。
1. 显式定义（构造函数）
let
变量名 =
p("
模式");
2. 隐式定义(字面量)
let 变量名 =
模式/
常用方法
1.test
正则去匹配字符串，如果匹配成功就返回真，匹配失败返回假
写法：正则.test(字符串)
如：
使用和详细说明和常用表达式
一步一个脚印，踏实努力，向着目标前进
07-06
1399
是一种用于匹配和操作字符串的强大工具。它由一个模式和一些可选的标志组成，可以用来检查字符串是否符合某种模式、查找和替换特定的字符或字符串。
ahln8797的博客
09-08
958
一、校验数字的表达式
1. 数字：^[0-9]*$
2. n位的数字：^\d{n}$
3. 至少n位的数字：^\d{n,}$
4. m-n位的数字：^\d{m,n}$
5. 零和非零开头的数字：^(0|[1-9][0-9]*)$
6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$
7. 带1-2位小数的正数或负数：^(\-)?\d+(\....
常用
热门推荐
阿杰的博客
06-23
2万+
中使用
语法
TING_april的博客
05-20
3248
元字符
就是拥有特动功能的特殊字符，大部分需要加反斜杠进行标识，以便于普通字符进行区别，而少数元字符，需要加反斜杠，以便转译为普通字符使用。
边界量词
例如：
//下面代码演示如何使用边界量词。先定义字符串：
var s = "how are you"
//1) 匹配最后一个单词
var r = /\w+$/;
var a = s.match(r);
//返回数组["you"]
//2) 匹配第一个单词
var r = /^\w+/;
//
中的
前端开发,HTML5,css3,JavaScript,node.js,vue
11-14
4574
正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则创建
创建
有两种方式:1.字面量的形式2.内置构造函数的形式 * 1. 字面量的形式 const reg = / abc / * 2. 内置构造函数的形式 const reg1 = new
p('abc') console . log(reg) // /abc/ console . log(reg1) // /abc/ *1.
——
（超详细）
weixin_52148548的博客
03-10
概念创建
常用方法test()修饰符g：global全文搜索i：ignore case 忽略大小写m：multiple lines 多行搜索其他标志符二级目录三级目录
概念
p 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。
两种方法：字面量方式、构造函
65条最常用
b585683022的博客
09-25
282
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些
整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。
1 数字：^[0-9]*$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头...
及详解
qq_36801250的博客
04-14
1412
定义
(Regular Expression)是一门简单语言的语法规范，是强大、便捷、高效的文本处理工具，它应用在一些方法中，对字符串中的信息实现查找、替换和提取操作。
p对象表示，有两种写法：一种是字面量写法；另一种是构造函数写法。
var expression = /pattern/flags;
g:表示全局(globa...
最新发布
07-27
回答:
是一种用于匹配和操作字符串的强大工具。在
中，可以使用
来查找、替换、分割和验证字符串。引用\[1\]中的例子展示了如何使用
来匹配特定的字符串。通过使用括号和分组，可以在
中指定多个可能的匹配项。引用\[2\]中的例子展示了如何使用分组来匹配"I love
"和"I love Regular Expression"这两个字符串。引用\[3\]中的例子展示了如何使用
来分割字符串。在这个例子中，使用逗号作为分隔符，将字符串"html,css,
"分割成了一个包含三个元素的数组。
#### 引用[.reference_title]
*1* *2* *3* [
详解](https://blog.csdn.net/duyujian706709149/article/details/91884639)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
CSDN认证博客专家
CSDN认证企业博客
码龄13年
前端领域优质创作者
364
原创
4866
周排名
1172
总排名
203万+
访问
等级
积分
粉丝
1677
获赞
527
2545
私信
热门文章
Git撤销&回滚操作
297525
vue computed正确使用方式
119256
八种方式实现跨域请求
79850
HTML防止input回车提交表单
45102
算法--迭代法
44825
分类专栏
Vue
36篇
React
9篇
Thinking
29篇
JavaScript异步编程
6篇
JavaScript设计模式
12篇
你不知道的JavaScript
5篇
ES6
66篇
SVG
3篇
NodeJS
4篇
D3
Git
17篇
JavaScript数据结构&设计模式&算法
24篇
JavaScript高级程序设计
HTTP
HTML5权威指南
HTML5+CSS3
8篇
jQuery
14篇
AngularJS
7篇
前端技术站
57篇
后端开发
18篇
Linux+shell
杂谈
23篇
最新评论
Fiber：React 的性能保障
奋飛:
附：「关于 React Fiber 其他优秀内容」
- https://zh-hans.legacy.reactjs.org/docs/reconciliation.html#learn-react
- https://segmentfault.com/a/1190000018250127
- https://zhuanlan.zhihu.com/p/361383104
- https://juejin.cn/post/7184747220036485177
- https://juejin.cn/post/7165810009140527140?searchId=202404082026592EA4516ECF2493AD4244
对比：React 还是 Vue
了解框架的设计理念同样至关重要，推荐查阅：https://zh-hans.legacy.reactjs.org/docs/design-principles.html
vue2项目中如何使用es2020
是的，需要安装 vue-template-babel-compiler
a158435966:
最后一步没看懂老哥，这个vue-template-babel-compiler需要单独下载吗
欢迎大家一起探讨~~~
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
Hooks：尽享React特性 ，重塑开发体验
2024年
2023年
2022年
11篇
2021年
28篇
2020年
30篇
2019年
27篇
2018年
2017年
44篇
2016年
50篇
2015年
82篇
2014年
目录
评论 
被折叠的 
 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额
3.43
前往充值 >
需支付：
10.00
取消
确定
下一步
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom
发出的红包
打赏作者
你的鼓励将是我创作的最大动力
¥1
¥2
¥4
¥6
¥10
¥20
扫码支付：
获取中
扫码支付
您的余额不足，请更换扫码支付或
充值
实付
使用余额支付
点击重新获取
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值