js正则表达式学习和总结(必看篇)

站长资源 2024/11/25 佚名

41 1538 41

DDR爱好者之家 Design By 杰米

（推荐）JS正则知识点专题：https://www.jb51.net/article/139831.htm

最近在做一个小项目时用到了正则匹配，感觉正则挺好用的，所以打算抽时间来小小总结一下。

正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）。模式描述在搜索文本时要匹配的一个或多个字符串。RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。正则表达式是一种查找以及字符串替换操作。

新建正则表达式

方式一：直接量语法

var reg = /pattern/attributes

方式二：创建 RegExp 对象的语法

var reg = new RegExp(pattern, attributes);

参数说明：

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

两者区别在于：
1.采用直接量语法新建的正则表达式对象在代码编译时就会生成，是平常开发中常用的方式；
2.采用构造函数生成的正则对象要在代码运行时生成。

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

正则对象的属性和方法

属性

ignoreCase 返回布尔值，表示RegExp 对象是否具有标志 i
global 返回布尔值，表示RegExp对象是否具有标志g
multiline 返回布尔值，表示RegExp 对象是否具有标志 m。
lastIndex 一个整数，标识开始下一次匹配的字符位置
source 返回正则表达式的源文本（不包括反斜杠）

i 执行对大小写不敏感的匹配

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配
正则表达式作用

通常用于两种任务：

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

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

字符类匹配

[…] 查找方括号之间的任何字符
[^…] 查找任何不在方括号之间的字符
[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 查找换行符

重复字符匹配

{n,m} 匹配前一项至少n次，但不能超过m次
{n,} 匹配前一项n次或更多次
{n} 匹配前一项n次
n？匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0，1}
n+ 匹配前一项1次或多次，等价于{1，}
n* 匹配前一项0次或多次，等价于{0，}
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
"color: #ff00ff">方法

test方法

检索字符串中指定的值。返回 true 或 false。
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

Demo1:

如果正则表达式带有g修饰符，则每一次test方法都从上一次匹配结束的位置开始匹配。

使用了g修饰符的正则表达式，表示要记录每一次搜索的位置，接着使用test方法，每次开始搜索的位置都是上一次匹配的后一个位置。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>test方法</title>
</head>
<body>
 <script type="text/javascript">
  var reg = /abc/g;
  var str = "123abc456abc";
  console.log(reg.lastIndex);//0
  console.log(reg.test(str));//true
  console.log(reg.lastIndex);//6
  console.log(reg.test(str));//true
  console.log(reg.lastIndex);//12
  console.log(reg.test(str));//false
 </script>
</body>
</html>

Demo2:

如果正则表达式是一个空字符串，则会匹配所有的字符串，但需要使用new RegExp()方式

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>test方法</title>
</head>
<body>
 <script type="text/javascript">
  console.log(new RegExp('').test('abc'));//true
  console.log(/''/.test('abc'));//false
  console.log(/''/.test("''"));//true
 </script>
</body>
</html>

exec方法

exec() 方法用于检索字符串中的正则表达式的匹配。

返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

Demo1:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>exec方法</title>
</head>
<body>
 <script type="text/javascript">
 var str = "xyz";
 var reg1 = /x/;
 var reg2 = /a/;
 var res1 = reg1.exec(str);
 var res2 = reg2.exec(str);
 console.log(res1);//["x", index: 0, input: "xyz"]
 console.log(res2);//null
 </script>
</body>
</html>

Demo2:

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>exec方法2</title>
</head>
<body>
 <script type="text/javascript">
 var str = 'abcdabc';
 var reg = /(a)b(c)/;
 var res = reg.exec(str);
 console.log(res);//["abc", "a", "c", index: 0, input: "abcdabc"]
 </script>
</body>
</html>

对于调用exec方法后返回的数组具有以下两个属性：

input 整个原待匹配的字符串
index 整个模式匹配成功的开始位置
支持正则表达式的 String 对象的方法

search方法

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

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

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

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

Demo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>search方法</title>
</head>
<body>
 <script type="text/javascript">
 var str = "abcdcef";
 console.log(str.search(/c/g));//2
  </script>
</body>
</html>

match方法

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

字符串对象的match方法与正则对象的exec方法比较类似：

但是如果正则表达式带有g修饰符，那么match方法与exec方法就有差别了:

可以看到match返回了所有成功匹配的结果，但是exec方法只返回了一个。
Demo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>match方法</title>
</head>
<body>
 <script type="text/javascript">
 var str = "abcd";
 var reg1 = /a/;
 var reg2 = /x/;
 console.log(str.match(reg1));//["a", index: 0, input: "abcd"]
 console.log(str.match(reg2));//null

 var str = "abcdabc";
 var reg = /a/g;
 console.log(str.match(reg));//["a", "a"]
 console.log(reg.exec(str));//["a", index: 0, input: "abcdabc"]
  </script>
</body>
</html>

replace方法

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

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

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

Demo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>replace方法</title>
</head>
<body>
 <script type="text/javascript">
 var str = "xxx";
 console.log(str.replace('x','y'));//yxx
 console.log(str.replace(/x/,'y'));//yxx
 console.log(str.replace(/x/g,'y'));//yyy
  </script>
</body>
</html>

replace方法中特殊字符替换

Demo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>replace中的特殊字符替换</title>
</head>
<body>
 <script type="text/javascript">
 //用子表达式替换：$1和$2
 //正则表达式中()就是一个子表达式，$1对应是第一个表达式的内容，即java，$2为script
 var str = "javascript";
 console.log(str.replace(/(java)(script)/,'$2$1')); //输出：scriptjava 
 //$& 为正则表达式匹配的字符串
 //正则表达式通过直接量java来匹配，匹配结果为java，则 $&的值为java，然后用字符串$&-来替换匹配的字符串
 var str1 = "javascript";
 console.log(str1.replace(/java/,'$&-')); //输出：java-script

 var str2 = "javascript";
 // $`为匹配子串ava的左侧文本，则为j
 console.log(str2.replace(/ava/,"$`")); //输出：jjscript
 // $'为匹配子串ava的右侧文本，则为script
 console.log(str2.replace(/ava/,"$'")); //输出：jscriptscript
 // $$为直接量符号，即插入一个$符号
	console.log(str2.replace(/ava/,"$$"));//输出：j$script
 </script>
</body>
</html>

replace的参数replacement是函数

match 为匹配整个字符串，即：xyz45678%$&^
a1 为第一个子表达式，([^\d]*)，匹配0个或多个非数字的字符，即:xyz
a2 为第二个子表达式,(\d*)，匹配0个或多个的数字，即：45678
a3 为第三个子表达式，([^\w]*)，匹配0个或匹配任何非单词字符。等价于 [^A-Za-z0-9_]，即 %$&^
index为模式匹配出现的位置，从第一个字符已经匹配成功，则位置为0
string为字符串本身，即 xyz45678%$&^

Demo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>replace的参数replacement是函数</title>
</head>
<body>
 <script type="text/javascript">
function replacer(match, a1, a2, a3, index, string) {
 return [a1, a2, a3].join(' ~ ');
}
 var str = 'xyz45678%$&^';
 var reg = /([^\d]*)(\d*)([^\w]*)/
var res = str.replace(reg, replacer); 
console.log(res);//xyz ~ 45678 ~ %$&^
 </script>
</body>
</html>

split方法

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>split方法</title>
</head>
<body>
 <script type="text/javascript">
 var str = 'a,b , c,d';
 var res = str.split(",");//以逗号来分割字符串
 console.log(res);//["a", "b ", " c", "d"]

 var str1 = 'a,b , c,,d';
 var res1 = str1.split(/,*/);//以0或多个逗号来分割字符串
 console.log(res1);//["a", "b", " ", " ", "c", "d"]

 var str2 = 'a, b,c, d';
 var res2 = str2.split(/, */);//以0或对个逗号空格来分割字符串
 console.log(res2);//["a", "b", "c", "d"]

 var str3 = 'a, b,c, d';
 var res3 = str3.split(/, */,2);//以0或对个逗号空格来分割字符串，同时限制返回数组中最多有两项
 console.log(res3);//["a", "b"]
  </script>
</body>
</html>

可以变换正则的匹配规则来分割字符串。

下面正则的匹配规则是以0或多个x来进行分割，如果加上括号则括号匹配的部分也就是分割规则也会作为数组成员返回。

Demo2:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>split方法2</title>
</head>
<body>
 <script type="text/javascript">
 var str = "x@@xx@xx@@";
 var res = str.split(/x*/);//以0或者对个x为分隔符
 console.log(res);//["", "@", "@", "@", "@", "@"]

 var res1 = str.split(/(x*)/);//如果加上括号则括号匹配的部分也就是分割规则也会作为数组成员返回
 console.log(res1);//["", "x", "@", "", "@", "xx", "@", "xx", "@", "", "@"]
  </script>
</body>
</html>

正则表达式的一些应用

1.字符串中出现次数最多的字符

var re = /(\w)\1+/g;
(\w)外面的圆括号表示分组,\1表示重复第一分组中的内容，\1+表示 \w匹配到的字符重复n次，后面的g表示执行全部替换

str.replace的第二个参数是个函数,参数a表示整个匹配到的字符串，b表示第一捕获分组也就是出现重复的单个字符，将a.length 与已经记录过的最多重复num比较，如果a.length 更大，就将它赋值给num,用value记录重复字符 b，这个函数返回的是替换文本，但这里没有返回值，也就是说替换为空，每次替换这个函数都被执行

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>字符串中出现次数最多的字符</title>
</head>
<body>
<script type="text/javascript">
var str = 'mmmmmmmmaaammmmmmmmmbbbbsccc';
function most(str) {
 var arr = str.split('');
 str = arr.sort().join('');//将字符串按单个字符分割，然后排序组合，经过这一步，相同的字符就会排列到一起
 var reg = /(\w)\1+/g;
 var num = 0;
 var value = '';
 str.replace(reg, function (a,b) {
 // console.log(a);
  if (num<a.length) {
   num = a.length;
   value = b;
  }
 });
 return '出现次数最多的字符是' + value + '出现了' + num + '次';
}
console.log(most(str));
 </script>
</body>
</html>

2.从url中提取子域名

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>从url中提取子域名</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>

3.给字符串加千分符

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>给字符串加千分符</title>
</head>
<body>
 <script type="text/javascript">
 var str = "12345678912312";
 function fn(str){
    var reg = /(?=(?!b)(\d{3})+$)/g;
    return str.replace(reg,',');
   }
   var res = fn(str);
   console.log(res);//12,345,678,912,312
 </script>
</body>
</html>

常用的正则表达式

匹配国内电话号码：\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位

以上就是小编为大家带来的js正则表达式学习和总结(必看篇)全部内容了，希望大家多多支持~

js,正则表达式

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“js正则表达式学习和总结(必看篇)”

暂无评论...

js正则表达式学习和总结(必看篇)

（推荐）JS正则知识点专题：https://www.jb51.net/article/139831.htm

匹配URL的正则表达式(推荐)

实用正则表达式匹配和替换大全

评论“js正则表达式学习和总结(必看篇)”

更新日志

友情链接