因为前端学习和工作的时候常用到正则,所以总结了一下正则表达式的基础语法和JavaScript怎么去使用正则

一、作用

正则的作用

1）对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证

2）网络爬虫(一个网站到另一个网站的页面上去获取对方的相关信息)

3）内容替换、获取

最最最常用：表单验证(js最初的作用就是表单验证)

应用场景:

手机号替换：替换前：12345678910 替换后 123****8910

敏感词替换：

原字符串：发达国家中国在钓鱼岛进行军事演习

替换后：发达国家**在***进行军事演习

二、正则表达式语法

正则字符类

元字符	说明
[a-z]	匹配a-z任意一个字符
[A-Z]	匹配A-Z任意一个字符
[a-zA-Z]	匹配26个英文字母（大小写）
[0-9]	匹配一个数字
[0-9a-zA-Z_]	匹配一个字符可以是数字和字母
[^0-9]	匹配非数字
[^a-zA-Z]	匹配非字母

多学一招：如果需要取反在第一个“[”后面添加“^”符号即可

常用字符类

元字符	说明
\d	匹配数字，相当于：[0-9]
\D	匹配非数字,相当于:[^0-9]
\w	匹配数字、字母、下划线，相当于：[0-9a-zA-Z_]
\W	匹配非数字、字母、下划线，相当于：[^0-9a-zA-Z_]
\s	匹配空白字符串（空格）
\S	匹配非空白字符串
.	匹配所有字符

重复字符

元字符	说明
*	指重复0到多次
+	指重复1到多次,至少出现一次 , 如:/a+/
？	指重复0到1次,最多一次
{n}	指匹配n次 , 如：{8} 匹配8次 /a{8}/
{n, m}	指匹配n到m次，如：{1,8} 匹配1~8次 /a{1,8}/
{n, }	指匹配至少n次，如：{1，} 匹配至少1次 /a{1,}/

常用定位符

元字符	说明
^	限定行首数据
$	限定行尾数据

正则表达式修饰符

元字符	说明
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

三、JavaScript正则的创建

字面量创建

语法：var regexp = /正则表达式/修饰符;

注意: //不需要加引号

例: var reg = /hello/;

直接实例化

语法：var regexp = new RegExp（“正则表达式”，修饰符）;

例:var reg = new RegExp('hello')

以对象的方式创建:需要加单双引号,但是不要加/ /

那么问题来了:

/一二三四五/ 是不是正则表达式？

我的答案是正则

原因：只要写在 '/' 和 '/' 之间的内容就是正则表达式

RegExp对象方法(直接使用正则调用)

test()方法

判断正则表达式是否匹配成功

成功返回true，失败返回false

例: 下述古诗中是否含有“乘风破浪”？

<script>var str = '乘风破浪会有时 直挂云帆济沧海';var obj = /乘风破浪/;var ret = obj.test(str);document.write(ret);    //true
</script>

exec方法

匹配符合正则表达式条件的数据

成功返回数组,失败返回null

例:匹配如下字符串中的js？

<script>var str = 'js乘风破浪js会有时,js直挂云帆济js沧海';var obj = /js/;var row = obj.exec(str)document.write(row);   //只输出一个js
</script>

匹配全部:

<script>var str = 'js乘风破浪js会有时,js直挂云帆济js沧海';var obj = /js/g;var row;while (row = obj.exec(str)){document.write(row); //输出全部的js}
</script>

留心：需要增加修饰符g表示全局匹配，否则出现死循环

正则的字符串调用函数

在 JavaScript 中，正则表达式最常用于用于的几个字符串方法 : search()、match() 和 replace()。

search() 方法

语法：字符串对象.search(待查找的字符串|正则表达式)

作用：用于搜索字符串中指定的元素

返回：返回符合条件的第一个元素下标，没找到返回-1

例:使用正则搜索字符串中"乘风"

<script>var str = 'js乘风破浪js会有时,js直挂云帆济js沧海';var res = str.search(/乘风/);document.write(res);    //输出2(位置)
</script>

match()方法

语法：字符串对象.match(待匹配的字符串|正则表达式)

作用：匹配符合条件的内容

返回：返回一个数组

例1: 在字符串中查找 "js":

<script>var str = 'js乘风破浪js会有时,js直挂云帆济js沧海';var res = str.match(/js/g);document.write(res); //输出js,js,js,js
</script>

replace() 方法

语法：字符串对象.replace(待匹配的字符串|正则表达式，替换的内容)

作用：用于替换字符串中的数据

返回：返回新的字符串（替换后的字符串）

例:将表单输入字符串中的敏感字符'小日本',有则替换成**

<body><input type="text" placeholder="请输入文字" id="txt" value="" /><br /><input type="button" value="检测" id="btn" /><br /></body><script>var chk = document.getElementById('btn');chk.onclick = function () {var txt = document.getElementById('txt').value;var reg = /小日本/g;    // 加g替换所有的敏感词console.log(txt.replace(reg, '**'));}
</script>

四、常用检测方式

1.中文检测

unicode编码中文监测：/^[\u2E80-\u9FFF]+$/

2.用户名检测

正则：/^[a-z0-9_-]{3,16}$/

3.邮箱检测

/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

可以多次出现 (字母数字下划线.-)@可以出现多个(数字字母.-).2到6位字母或.

/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/

可以有多个(字母数字)可有多个可无(.多个(字母数字))@可以多个(数字字母可有1次可无(-数字字母))可以有多个(1或2个.多个字母)

4.URL检测

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/

5.HTML标签检测

/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/

<多个(字母)可多个或0个(除了<的所有字符) />

<多个(字母)可多个或0个(除了<的所有字符)>多个任意字符 </重复第一部分的多个字母>

6.自定义的html标签

/<[^<>]+>/g

总结：

前端往往有大量的表单数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果：邮箱，手机号，身份证号等（使用熟练的情况下）。

任何程序都可以不用正则表达式写出来，但根据懒人原则，怎么做不言而喻。

正则语法+JavaScript的正则使用相关推荐

JavaScript RegExp 正则对象
文章目录 JavaScript RegExp 正则对象 RegExp 对象修饰符 test() exec() 方括号元字符量词 RegExp 对象方法支持正则表达式的 String 对象的方法 ...
[js点滴]JavaScript基础正则详解03
匹配输入字符串的开始位置.要匹配 "^" 字符本身,请使用 "/^" $ 匹配输入字符串的结尾位置.要匹配 "$" 字符本身,请使用 &qu ...
JavaScript 通过正则测试页面是否出现连续的重复字符
在上班的路上,从群里看到有个测试朋友问有没有查看页面上是否有重叠字的工具.从字面意思看,我理解为样式问题导致文字出现堆叠. 他正在对一本上百页的一本说明书进行最后的矫正,检查是否有两个相同的字符连续出 ...
js 正则中冒号代表什么_JS正则表达式一条龙讲解(从原理和语法到JS正则)
正则啊,就像一座灯塔,当你在字符串的海洋不知所措的时候,总能给你一点思路:正则啊,就像一台验钞机,在你不知道用户提交的钞票真假的时候,总能帮你一眼识别:正则啊,就像一个手电筒,在你需要找什么玩意的时候 ...
[Language-regex]正则语法整理——符号篇
正则表达式的匹配先后顺序: 1.模式单元 2.重复匹配 ? * + {} 3.边界限定 ^ $ b B 4.模式选择 | 正则符号Javascript 与php基本相同,参考一下JS的说明文档. 字符 ...
php 只能输入中英文,JavaScript基于正则实现控制输入框中只能输入中文、数字和英文的方法...
这篇文章主要介绍了JavaScript控制输入框中只能输入中文.数字和英文的方法,基于正则验证实现字符输入限制功能,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了Javascript控制输 ...
神奇的JavaScript之正则
今朝在技术群里,碰到有人问这样一个问题:使用正则去掉字符串中相邻的重复字符,比如字符串"ddssssaaaadkslsls",去除相邻重复字符后,结果为"dsadksls ...
JavaScript常用正则判断(待续...)
JavaScript正则判断只能有英文符号只能有英文.数字.英文字符只能有中文只能有英文符号 <script>// 只能有英文符号let reg = /^[\x21-\x2f\x3 ...
10、正则表达式（笔试题、语法规则、正则对象方法、正则实例属性、支持正则表达式的String对象的方法、贪婪匹配与非贪婪匹配）
正则表达式目录 10.1 语法规则 10.1.1 创建方法 1.直接量 2.构造方法RegExp() 10.1.2 三个属性i,g,m 10.1.3 方括号 10.1.4 元字符 10.1.5 量词 ...

正则语法+JavaScript的正则使用