正则语法+JavaScript的正则使用

最新推荐文章于 2021-03-15 21:44:53 发布

心凡易乱

最新推荐文章于 2021-03-15 21:44:53 发布

阅读量182

点赞数

分类专栏： JavaScript 正则表达式文章标签： JavaScript正则正则语法 JavaScript使用正则

本文链接：https://blog.csdn.net/qq_38242231/article/details/100169034

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

正则表达式

1 篇文章 0 订阅

订阅专栏

因为前端学习和工作的时候常用到正则,所以总结了一下正则表达式的基础语法和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>