Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
0bf24f1c
Commit
0bf24f1c
authored
Oct 31, 2022
by
zhangshun
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
正则表达式提交
parent
98ca562a
Pipeline
#17028
failed with stage
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
225 additions
and
0 deletions
+225
-0
JavaScript中的正则表达式.md
source/_posts/JavaScript中的正则表达式.md
+225
-0
No files found.
source/_posts/JavaScript中的正则表达式.md
0 → 100644
View file @
0bf24f1c
---
title
:
JavaScript中的正则表达式(-)
date
:
2022/10/31 15:50:00
author
:
张顺
---
## 什么是正则表达式?它有什么作用?
又称规则表达式,(
`Regular Expression`
,在代码中常简写为
`regex、regexp或RE`
),是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"),是计算机科学的一个概念。
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式(规则)的文本。
### 如何使用正则表达式
#### 定义表达式
-
##### 普通方式
let reg=/表达式/修饰符(可选)
修饰符
g:代表可以进行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
例如
var reg=/a
*
b/;
var reg=/abc+f/g;
-
##### 构造函数方式
let reg=new RegExp(“表达式”,”附加参数”);
例如
var reg=new RegExp(“a*b”);
var reg=new RegExp(“abc+f”,”g”);
-
##### 两者区别
-
普通方式中的表达式必须是一个常量字符串,
-
构造函数中的表达式可以是常量字符串,也可以是一个js变量,
-
例如根据用户的输入来作为表达式参数等等:var reg=new RegExp(动态变量,”g”);
#### 表达式操作
-
test(str) 判断字符串str是否匹配表达式,返回一个布尔值。
例如
let regx=/123/;
let flag=regx.test('123sdsd');
匹配123sdsd中是否包含123,
结果 flag 返回 true
- exec(str) 返回str中与表达式相匹配的第一个字符串,而且以数组的形式表现.
例如
var str="the name 123 and 456";
var reg=/\d/g;
reg.lastIndex=15;
在全局模式下可以使用lastIndex属性设置在字符串中查找指定字符时开始的位置。
console.log(reg.exec(str)); ['4', index: 17, input: 'the name 123 and 456', groups: undefined]
如果有多个合适的匹配,则第一次执行exec返回一个第一个匹配,此时继续执行exec,则依次返回第二个第三个匹配。
例如:
var regx=/user\d/g;
var rs=regx.exec('ddduser1dsfuser2dd');
var rs1=regx.exec('ddduser1dsfuser2dd');
console.log(rs) ['user1', index: 3, input: 'ddduser1dsfuser2dd', groups: undefined]
console.log(rs1)['user2', index: 11, input: 'ddduser1dsfuser2dd', groups: undefined]
当然注意regx中的g参数是必须的,否则无论exec执行多少次,都返回第一个匹配。后面还有相关内容涉及到对此想象的解释
- match(expr) 返回与expr相匹配的一个字符串数组,如果没有加参数g,则返回第一个匹配,加入参数g则返回所有的匹配
var regx=/user\d/g;
var str='user13userddduser345';
var rs=str.match(regx);
console.log(rs) ['user1', 'user3']
- search(expr),返回字符串中与expr相匹配的第一个匹配的index值。
var regx=/user
\d
/g;
var str='user13userddduser345';
var rs=str.search(regx);
console.log(rs) 0
-
replace(expr,str),将字符串中匹配expr的部分替换为str。另外在replace方法 中,str中可以含有一种变量符号$,格式为$n,代表匹配中被记住的第n的匹配字符串(注意小括号可以记忆匹配)。
例子:
var regx=/user
\d
/g;
var str='user13userddduser345';
var rs=str.replace(regx,'00');
console.log(rs) 003userddd0045
例子2:
var regx=/u(se)r\d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”$1”);
console.log(rs) se3userdddse45
对于replace(expr,str)方法还要特别注意一点,如果expr是一个表达式对象则会进行全局替换(此时表达式必须附加参数g,否则也只是替换第一个匹配),如果expr是一个字符串对象,则只会替换第一个匹配的部分,例如:
var regx='user'
var str='user13userddduser345';
var rs=str.replace(regx,'00');
console.log(rs)
- split(expr),将字符串以匹配expr的部分做分割,返回一个数组,而且表达式是否附加参数g都没有关系,结果是一样的。
var regx=/user\d/g;
var str='user13userddduser345';
var rs=str.split(regx);
console.log(rs) ['', '3userddd', '45']
#### 正则表达式模式
方括号查询范围内符合的内容
| 正则表达式模式 | 说明 |
| ---- | ---- |
|
[
abc
]
| 查找方括号之间的任何字符。 |
|
[
0-9
]
| 查找任何从 0 至 9 的数字。 |
|
`(x|y)`
| 查找任何以
`|`
分隔的选项。 |
元字符是拥有特殊含义的字符
| 元字符 | 说明 |
| ---- | ---- |
|
\d
| 查找数字。|
|
\D
| 查找非数字字符 |
|
\s
| 查找空白字符。|
|
\S
| 查找非空白字符 |
|
\b
| 匹配单词边界 |
|
\B
| 匹配非单词边界 |
量词:
| 元字符 | 说明 |
| ---- | ---- |
| ^ | 匹配开头,在多行检测中,会匹配一行的开头|
| $ | 匹配结尾,在多行检测中,会匹配一行的结尾|
| n+ | 匹配任何包含至少一个 n 的字符串。|
| n
*
| 匹配任何包含零个或多个 n 的字符串。|
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{x} | 匹配包含 x 个 n 的序列的字符串|
| n{x,y} | 匹配包含最少 x 个、最多 y 个 n 的序列的字符串 |
| n{x,} | 匹配包含至少 x 个 n 的序列的字符串 |
var s = "how are you"
var r = /
\w
+$/;
var a = s.match(r); //返回数组
[
"you"
]
var r = /^
\w
+/;
var a = s.match(r); //返回数组
[
"how"
]
var r = /
\w
+/g;
var a = s.match(r); //返回数组
[
"how","are","you"
]
### 常用一些表达式
手机号校验
```
js
//手机号校验
const
phoneReg
=
/^
[
1
][
3,4,5,6,7,8,9
][
0-9
]{9}
$/
//身份证的校验
const
sfzReg
=
/^
[
1-9
]\d{5}(
18|19|
([
23
]\d))\d{2}((
0
[
1-9
])
|
(
10|11|12
))(([
0-2
][
1-9
])
|10|20|30|31
)\d{3}[
0-9Xx
]
$/
//邮箱的校验
const
emailReg
=
/^
([
A-Za-z0-9_
\-\.])
+
\@([
A-Za-z0-9_
\-\.])
+
\.([
A-Za-z
]{2,4})
$/
//URL的校验
const
urlReg
=
/^
((
https
?
|ftp|file
)
:
\/\/)?([\d
a-z
\.
-
]
+
)\.([
a-z
\.]{2,6})([\/\w
\.
-
]
*
)
*
\/?
$/
//IPv4的校验
const
ipv4Reg
=
/^
(?:(?:
25
[
0-5
]
|2
[
0-4
][
0-9
]
|
[
01
]?[
0-9
][
0-9
]?)\.){3}(?:
25
[
0-5
]
|2
[
0-4
][
0-9
]
|
[
01
]?[
0-9
][
0-9
]?)
$/
//16进制颜色的校验
const
color16Reg
=
/^#
?([
a-fA-F0-9
]{6}
|
[
a-fA-F0-9
]{3})
$/
//日期 YYYY-MM-DD
const
dateReg
=
/^
\d{4}(\-)\d{1,2}\1\d{1,2}
$/
//日期 YYYY-MM-DD hh:mm:ss
const
dateReg
=
/^
(\d{1,4})(
-|
\/)(\d{1,2})\2(\d{1,2})
(\d{1,2})
:
(\d{1,2})
:
(\d{1,2})
$/
//整数的校验
const
intReg
=
/^
[
-+
]?\d
*$/
//小数的校验
const
floatReg
=
/^
[
-
\+]?\d
+
(\.\d
+
)?
$/
//保留n位小数
function
checkFloat
(
n
)
{
return
new
RegExp
(
`^([1-9]+[\d]*(.[0-9]{1,
${
n
}
})?)$`
)
}
// 保留2位小数
const
floatReg
=
checkFloat
(
2
)
const
floatNum1
=
1234.5
console
.
log
(
floatReg
.
test
(
floatNum1
))
// true
//邮政编号的校验
const
postalNoReg
=
/^
\d{6}
$/
//QQ号的校验5-11位数字
const
qqReg
=
/^
[
1-9
][
0-9
]{4,10}
$/
//微信号的校验 说明:6至20位,以字母开头,字母,数字,减号,下划线
const
wxReg
=
/^
[
a-zA-Z
]([
-_a-zA-Z0-9
]{5,19})
+$/
//车牌号的校验
const
carNoReg
=
/^
[
京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z
]{1}[
A-Z
]{1}[
A-Z0-9
]{4}[
A-Z0-9挂学警港澳
]{1}
$/
//只含字母的字符串
const
letterReg
=
/^
[
a-zA-Z
]
+$/
//包含中文的字符串
const
cnReg
=
/
[\u
4E00-
\u
9FA5
]
/
//密码强度的校验 说明:密码中必须包含字母、数字、特称字符,至少8个字符,最多30个字符
const
passwordReg
=
/
(?=
.*
[
0-9
])(?=
.*
[
a-zA-Z
])(?=
.*
[^
a-zA-Z0-9
])
.
{8,30}
/
//字符串长度n的校验
function
checkStrLength
(
n
)
{
return
new
RegExp
(
`^.{
${
n
}
}$`
)
}
// 校验长度为3的字符串
const
lengthReg
=
checkStrLength
(
3
)
const
str1
=
'hhh'
console
.
log
(
lengthReg
.
test
(
str1
))
// true
//文件拓展名的校验
function
checkFileName
(
arr
)
{
arr
=
arr
.
map
(
name
=>
`.
${
name
}
`
).
join
(
'|'
)
return
new
RegExp
(
`(
${
arr
}
)$`
)
}
const
filenameReg
=
checkFileName
([
'jpg'
,
'png'
,
'txt'
])
//匹配img和src
const
imgReg
=
/<img.*
?
src=
[\"
|
\']?(
.*
?)[\"
|
\']?\s
.*
?
>/ig
const
htmlStr
=
'<div></div><img src="sunshine.png" /><img src="sunshine111.png" />'
console
.
log
(
imgReg
.
exec
(
htmlStr
))
```
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment