js正则

最新推荐文章于 2024-04-05 11:49:32 发布

潇梦颜

最新推荐文章于 2024-04-05 11:49:32 发布

阅读量9.1k

点赞数 28

文章标签： js 正则表达式 javascript 字符串

本文链接：https://blog.csdn.net/weixin_42216520/article/details/104446628

版权

关于正则，我相信很多小伙伴跟我一样，在接触的时候信心满满，等学完之后会有点醉，（其实还是练得不够多）那么接下来随小编一起来复习一下这个傲娇的正则。

正则：也叫做规则，让计算机能够读懂人类的规则。有什么规则呢？
在这里插入图片描述
下面小编带大家重新认识认识正则：

正则啊，就像一台验钞机，在你不知道用户提交的钞票真假的时候，总能帮你一眼识别 !
在这里插入图片描述

1、什么是正则，有什么用呢？

正则：也叫做规则，让计算机能够读懂人类的规则；

前端哪些地方用到正则? 常用的有表单验证，或者敏感词过滤；

2、他有什么规则呢？

正则也是一个系统对象，跟数组、json一样，也有个写法规则

简写 var re=//; //只写两斜杠，浏览器会认为是注释，所以尽量不要给他为空，注意两斜杠之间不要有引号

全称 var re=new RegExp(); //Reg是正则的简写，Exp是表达式的简写。

注：大部分情况用简写，只有一种情况用全称写法：正则需要传参的时候；全称写法用到\时，需要两个\，否则是转义字符。
接下来正式介绍一下正则

一、新建正则的两种方法：

方式一：直接量语法 

           1、通过new创建正则：var box = new RegExp("hello", "ig");

            2、省略new创建正则:var box = RegExp("hello", "ig");

            3、正则常量赋值:   var box = /hello/ig;

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

var reg = new RegExp(pattern, attributes);

参数说明：

    参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
    参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

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

三、正则的方法和修饰符

js正则中只有两种方法：test和exec

1、test方法(重点记忆)

                格式：正则.test(字符串);

                功能：在字符串中匹配正则是否存在

                返回值：如果存在返回true； 如果不存在就返回false


            var str = "how aRe you";
            var box = /are/i;

             alert(box.test(str));

2、exec 方法

                格式：正则.exec(字符串)

                功能：在字符串中匹配正则是否存在

                返回值：如果存在返回一个数组，数组里面存放着匹配的内容

                       如果不存在，返回null

              var str = "how aRe you";

                var box = /are/i;

                alert(box.exec(str).length);

3、js正则修饰符
修饰符(没有先后顺序)
i 忽略大小写
g 全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m 换行匹配

是不是还想知道更多呢，小编带大家接着往下看~~~
在这里插入图片描述

四、正则的字符串函数

字符串方法正则可用哦
1.match
格式：字符串.match(正则)
功能：在字符串中匹配这个正则是否存在
返回值：如果存在，返回一个数组，数组放着，匹配到的子串
如果不存在，返回null

           var str = "how are Are ARE you";
            var box = /arex/ig;
            alert(str.match(box)); //are,Are,ARE

          2. search
                格式：字符串.search(正则)
                功能：在字符串中，查找正则表达式，第一次出现的位置
                返回值：如果查找到，返回，查找到的下标
                       查找不到，返回-1

            var str = "how ARE are you";
            var box = /are/i;
            alert(str.search(box)); //4

           3. replace
                格式：字符串.replace(正则, newStr);
                功能：在字符串中找到正则，并且将他替换成新字符串。
                返回值：替换成功的新字符串
         ***注：此方法在编程生活中较为常用哦***


            var str = "how are Are ARE you";
            var box = /are/ig;
            var newStr = str.replace(box, "two");
            alert(newStr); //how two two two you

           4. split
                格式：字符串.split(正则)
                功能：使用正则对字符串进行字符串分割
                返回值：分割完的子串组成的数组。


            var str = "how are Are ARE you";
            var box = /are/i;
            var arr = str.split(box);
            alert(arr); //how , , , you

五、元字符

那么什么是元字符呢？ 在这里插入图片描述

通俗的意义来说呢，元字符即在正则表达式中有特殊含义的字符。
元字符又分为四大类，下面我们分类详细讲解一下。
1.单个数字和字符的元字符(常用)
. 匹配单个的任意字符
[范围] 匹配单个范围内的字符
[0-9] 匹配单个数字0-9
[a-zA-Z0-9_] 匹配单个的数字、字母下划线
[^范围] 匹配任意一个除括号范围内的字符
[^0-9] 匹配任意一个非数字字符
\w 匹配单个的数字、字母下划线等价于 [a-zA-Z0-9_]
\W 匹配单个非数字、字母下划线
\d 匹配单个数字等价于 [0-9]
\D 匹配单个非数字等价于 [^0-9]

如：
/\d{2, 4}/ //匹配2到4间的数字.

/\w{3} \d?/ //匹配三个单字字符和一个任意的数字.
匹配特定字符串

2.空白字符
\s 匹配任意单个的空白字符
\S 匹配任意单个非空白字符

3.重复字符 x（任意的单个字符）
x? 匹配0个或者1个x
x+ 匹配至少一个x字符
x* 匹配任意个x字符
**x{m,n}**匹配至少m个，最多n个x字符，包括n
x{n} 必须匹配n个x字符
(xyz)+ 小括号括起来的部分是当做单个字符处理
4.锚字符
^ 行首匹配必须以这个正则开头
$ 行尾匹配必须以这个正则结尾

var re=/^\s+|\s+$/g;
str.replace(re,"");

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

【注】
如果需要在正则表达式中用元字符本来的字符含义，必须经过转义。
. 代表字符.的意思
* 代表字符*的意思

好了，那么到了这里呢，基本概念及语法大家已经可以清楚的了解到了，接下来呢，带大家进行实战演习~
在这里插入图片描述
牛刀小试一哈，先来写一个简单的邮政编码的验证

 			var box = /^[1-9]\d{5}$/;
            alert(box.test("100000"));
            alert(box.test("518000"));
            //判断输入以数字1-9开头，结尾以数字5位数结尾的，
            //6位邮政编码的验证

下面加大一点难度，实现一个敏感词过滤的一个效果
在我们的生活当中，不乏一些不文明的现象，不光在生活中，我们作为程序猿在网络上也要杜绝这种现象的发生哦，这样才能有一个好的网络风气，那需要我们怎么做呢？

 <style>
            #txt{width: 400px; height: 300px; border: 1px solid black;}
     </style>
     <script>
            window.onload = function(){
                var oTxt = document.getElementById("txt1");
                var oBtn = document.getElementById("btn1");
                var oTt = document.getElementById("txt");

                //设置敏感词
                var arr = [/tmd/ig, /w靠/ig, /wc/ig];

                
                //添加点击的事件驱动函数
                oBtn.onclick = function(){
                    var oValue = oTxt.value;
                //通过循环将数组里的每一个正则元素进行忽略大小写，全局匹配
                    for(var i = 0; i < arr.length; i++){
                        oValue = oValue.replace(arr[i], "*"); //找出文本中符合判断敏感词条件的文本，进行替换成 “*”
                    }
                   
                    oTt.innerHTML = oValue;	//敏感词被替换成 * 后重新被赋值到文本框中
                }
            }
        </script>
        <body>
	        <textarea name="" id="txt1" cols="30" rows="10"></textarea>
	        <button id = "btn1" >发布</button>
	        <div id = "txt"></div>
    	</body>

在这里插入图片描述

效果图如上

小伙伴们有没有感觉到小小的成就感呢？
在这里插入图片描述

最后再安利几个常用的表单验证的例子

1.用户名验证

//用户名正则，4到16位（字母，数字，下划线，减号）
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("caixukun"));

2.密码强度验证

//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("=="+pPattern.test("caixukunn#"));

3.整数正则

//正整数正则
var posPattern = /^\d+$/;
//负整数正则
var negPattern = /^-\d+$/;
//整数正则
var intPattern = /^-?\d+$/;
//输出 true
console.log(posPattern.test("42"));
//输出 true
console.log(negPattern.test("-42"));
//输出 true
console.log(intPattern.test("-42"));

4.Email正则

//Email正则
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test(<a href="mailto:99154507@qq.com" rel="external nofollow">99154507@qq.com</a>));

5.手机号正则验证

//手机号正则
var mPattern = /^1[34578]\d{9}$/; 
//输出 true
console.log(mPattern.test("18503623666"));

6.身份证正则验证

//身份证号（18位）正则
var sfz = /^[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]$/;
//输出 true
console.log(sfz.test("37113519880605371X"));

7.qq号正则验证

//QQ号正则，5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("927184040"));

8.微信号正则验证

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//输出 true
console.log(wxPattern.test("caixukun_com"));

9.中文正则验证

//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("肖战"));

好啦，本次小编为大家整理的关于JS正则的相关知识就总结到这里，初次露面，还望大家多多指教，走过路过不要忘记 ~ 留下你宝贵的关注哦，梦颜先行谢过小哥哥小姐姐们~~

在这里插入图片描述

潇梦颜

关注

28
点赞
踩
24

收藏

觉得还不错? 一键收藏
2
评论
js正则

关于正则，我相信很多小伙伴跟我一样，在接触的时候信心满满，等学完之后会有点醉，（其实还是练得不够多）那么接下来随小编一起来复习一下这个傲娇的正则。正则：也叫做规则，让计算机能够读懂人类的规则。有什么规则？下面小编带大家重新认识认识正则：正则啊，就像一台验钞机，在你不知道用户提交的钞票真假的时候，总能帮你一眼识别 ! 1、什么是正则，有什么用呢？正则：也叫做规则，让计算机能够读懂人类的规...
复制链接

扫一扫