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.属性
ignoreCase 返回布尔值,表示RegExp 对象是否具有标志 i
global 返回布尔值,表示RegExp对象是否具有标志g
multiline 返回布尔值,表示RegExp 对象是否具有标志 m。
lastIndex 一个整数,标识开始下一次匹配的字符位置
source 返回正则表达式的源文本(不包括反斜杠)
i 执行对大小写不敏感的匹配
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配
正则表达式作用
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次或更多次 | |
匹配前一项n次 | |
n? | 匹配前一项0次或者1次,也就是说前一项是可选的,等价于 |
n+ | 匹配前一项1次或多次,等价于 |
n* | 匹配前一项0次或多次,等价于 |
n$ | 匹配任何结尾为 n 的字符串 |
^n | 匹配任何开头为 n 的字符串 |
?=n | 匹配任何其后紧接指定字符串 n 的字符串 |
?!n | 匹配任何其后没有紧接指定字符串 n 的字符串 |
2.3.3匹配特定数字
正则表达式 | 用途 |
---|---|
`[1]\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)| 正则表达式 | 用途 | | ------------------------------------------- | ------------------------------ | | 匹配浮点数 | |
[2]\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匹配特定字符串
正则表达式 | 用途 |
---|---|
[3]+$ | 匹配由26个英文字母组成的字符串 |
[4]+$ | 匹配由26个英文字母的大写组成的字符串 |
[5]+$ | 匹配由26个英文字母的小写组成的字符串 |
[6]+$ | 匹配由数字和26个英文字母组成的字符串 |
^\w+$ | 匹配由数字、26个英文字母或者下划线组成的字符串 |
3方法
3.1 test方法
检索字符串中指定的值。返回 true 或 false。 检索字符串中指定的值。返回 true 或 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<body>
<script type="text/javascript">
var reg = /123/g;
var str = 'hello123hello123';
console.log(reg.test(str));//true
console.log(reg.lastIndex);//8
console.log(reg.test(str));//true
console.log(reg.lastIndex);//16
console.log(reg.test(str));//false
console.log(reg.lastIndex);//0
</script>
</body>
</html>
//使用了g修饰符的正则表达式,表示要记录每一次搜索的位置,接着使用test方法,每次开始搜索的位置都是上一次匹配的后一个位置。
3.2 exec方法
方法用于检索字符串中的正则表达式的匹配。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exec</title>
</head>
<body>
<script type="text/javascript">
var str='abc';
var reg1 = /x/;
var reg2 = /a/;
console.log(reg1.exec(str));//null
console.log(reg2.exec(str));//array["a", index: 0, input: "xyz"]
</script>
</body>
</html>
如果正则表达式包含圆括号,则返回的数组会包括多个元素。首先是整个匹配成功的结果,后面是圆括号里匹配成功的结果,如果有多个圆括号,他们的匹配成功的结果都会成为数组元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exec</title>
</head>
<body>
<script type="text/javascript">
var str='abcdabc';
var reg1 = /(a)b(c)/;
console.log(reg1.exec(str));//["abc", "a", "c", index: 0, input: "abcdabc", groups: undefined]
</script>
</body>
</html>
3.3 search方法
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。
返回值: stringObject 中第一个与 regexp 相匹配的子串的起始位置。
注释:如果没有找到任何匹配的子串,则返回 -1。
search() 方法不执行全局匹配,它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>search</title>
</head>
<body>
<script type="text/javascript">
var str='abcdefgh';
console.log(str.search('h'))//7
</script>
</body>
</html>
3.4match方法
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
字符串对象的match方法与正则对象的exec方法比较类似:但是如果正则表达式带有g修饰符,那么match方法与exec方法就有差别了:可以看到match返回了所有成功匹配的结果,但是exec方法只返回了一个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>match</title>
</head>
<body>
<script type="text/javascript">
var str = "abcd";
var reg1 = /a/;
var reg2 = /x/;
console.log(str.match(reg1));//a
console.log(str.match(reg2));//null
var str2 = "abcabc";
var reg3 = /a/g;
console.log(str2.match(reg3));//['a','a']
</script>
</body>
</html>
3.5 replace方法
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replace</title>
</head>
<body>
<script type="text/javascript">
var str = "aaa";
console.log(str.replace('a', 'f'));//fbcdaa
</script>
</body>
</html>
3.6 split方法
split(‘字符串的分割正则','返回数组的最大成员数');返回分割后各部分组成的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>split</title>
</head>
<body>
<script type="text/javascript">
var str = "a,b,c,d,e,f";
var res = str.split(",");//以逗号来分割字符串
console.log(res);//["a", "b", "c", "d", "e", "f"]
var str2 = "a, b ,c,d";
var res2 = str2.split(/, */);//以0或对个逗号空格来分割字符串
console.log(res2);//["a", "b ", "c", "d"]
</script>
</body>
</html>
3.7示例:
- 从URL中提取子域名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>split</title>
</head>
<body>
<script type="text/javascript">
var url = "http://www.abc.com";
var reg = /[^.]+/;//匹配除了.之外的其他字符
var res = reg.exec(url)[0].substr(7);
console.log(reg.exec(url));//["http://www", index: 0, input: "http://www.abc.com"]
console.log(res);//www
</script>
</body>
</html>
4.常用正则匹配
匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7}
如 0511-4405222 或 021-87888822
匹配QQ号:[1-9][0-9]{4,}
从10000开始
邮政编码:[1-9]\d{5}(?!\d)
邮政编码为6位数字
匹配身份证:/^(\d{14}|\d{17})(\d|[xX])$/
匹配规则:身份证号码有15位或者18位,其中最后一位可能是X,其他全是数字
匹配ip地址:\d+.\d+.\d+.\d+
匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 表单验证时很实用
匹配中文字符: /[\u4E00-\u9FA5\uf900-\ufa2d]/
使用 Unicode,必须使用\u开头,接着是字符编码的四位16进制表现形式
匹配Email地址:
/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(.[a-zA-Z_0-9-])+$/
邮箱的规则是: 由3部分组成
由1个或者多个字母数字下划线和杠 + @ + 1个或者多个字母数字下划线和杠 + . + 1个或者多个字母数字下划线和杠
匹配网址URL:[a-zA-z]+://[^\s]*
判断字符串是不是由数字组成: /^\d*$/
限制文本框只能输入数字和小数点(二位小数点):
/^\d*.?\d{0,2}$/
说明:开头有0个或者多个数字,(?表示匹配前一项0次或者多次)中间有0个或者1个小数点,小数点后面有0个或者最多2个数字
用户名正则: /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/
匹配规则:只能是中文,英文,数字,下划线,4-16个字符
匹配中文字符正则:/[\u4E00-\u9FA5\uf900-\ufa2d]/
\w是 匹配英文,数字,下划线
匹配英文地址:/^[a-zA-Z][.a-zA-Z\s,0-9]*?[a-zA-Z]+/匹配规则:包含点,字母,空格,逗号,数字,但是开头和结尾必须为字母分析:开头必须为字母可以这样写/[a−zA−Z]/结尾必须为字母可以这样写:/[a−zA−Z]+/
中间包含点,字母,空格,逗号,数字的正则:/[.a-zA-Z\s,0-9]*?/
外面的*号是0个或者多个,后面的问号? 代表可有可无;有就匹配,没有就不匹配;
匹配价格:/^\d*(.\d{0,2})?$/
匹配规则: 开头有0个或者多个数字,中间可能有一个小数点,后面有可能有0-2位小数
单词的首字母大写:/\b(\w)|\s(\w)/g
验证日期格式:/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/
日期格式有2种 第一种是yyyy-mm-dd 或 yyyy/mm/dd
分析:月和天数可以有1位或者2位
此文源于: https://www.jb51.net/article/97901.htm