js正则

   说起js正则表达式，我们或多或少有一些了解。对于新手而言，js正则显得格外复杂但是当你熟悉正则表达式的正确用法，你可能会拍手称赞：怎么会有这么好用的 匹配 / 修改 方法？正则这么


那么接下面就来介绍一下正则表达式及其常用的几种方法。

先来介绍一下什么是js正则

1. 正则又名“规则表达式”
2. 由我们自己去制定“规则”，用来检测字符串是否符合“规则”使用的
3. 我们可以用在正则里代表的特殊的字符或者符号定义一个“规则公式”，然后用我们定义好的“规则公式”去检测某个字符串是否合格。
   
   简单来说，正则就是通过制定某种“规则”，用这种“规则”去搜索、匹配某个字符串是否合乎“规则”的一种方法。而把⼀些字⺟和符号写在 // 中间的东⻄，叫做正则表达式，⽐如 /abcdefg/
   
   通常这种方法被用来进行表单验证或者敏感词过滤。
   

正则的创建

正则可以通过两种方法进行创建

1. 字面量创建
       通过new创建正则
       var eg = new RegExp("hello", "ig"); alert(eg); // /hello/gi
   
       通过省略new创建正则
       var eg = RegExp("hello", "ig"); alert(eg); // /hello/gi
   
        通过正则常量赋值
       var eg = /hello/ig; alert(eg); // /hello/gi
   
2. 构造函数创建
   
       var reg = new RegExp('abcdefg'); console.log(reg); // /abcdefg/
   
   【注】使⽤构造函数⽅式创建的和字⾯量创建的，得到的结果⼀样。
   
   Great！！！现在你创建了属于自己的第一个正则。那么让我们继续，看看比较常用的正则方法吧。
   1. 正则的 test( ) 方法

			格式：正则.test(字符串);
			功能：在字符串中匹配正则是否存在
			返回值：如果存在  返回  true
				   如果不存在  返回  false
	
		var str = "how are you"; //声明一个字符串
		var box = /are/i;	//通过正则常量创建一个正则表达式,忽略大小写
		alert(box.test(str));   // 返回值为true,证明这个正则存在
		

2. 正则的 exec( ) 方法

   		格式： 正则.exec(字符串);
   		功能：在字符串中匹配正则是否存在
   		返回值：如果存在返回一个数组，数组里面存放着匹配的内容
     	          如果不存在，返回  null
               
   	var str =  "how aRe you";   //声明一个字符串
   	var box = /are/i;    //通过正则常量创建一个正则表达式,忽略大小写进行匹配
   	alert(box.exec(str)); //返回值 aRe,但这是一个数组。我们再来验证一下	
   	
   	alert(box.exec(str).length);  //  1  长度为1。证明这是一个数组。 
   	
   

   这就是我们比较常用的关于正则的两个方法，那么除了有这两个正则方法以外，还有没有其他方法呢？答案是肯定的，下面我们再来看看其他关于正则的方法。

   字符串方法___正则可用

   1. 字符串的match ( )方法

   		格式：字符串.match(正则)
           功能：在字符串中匹配这个正则是否存在
           返回值:  如果存在，返回一个数组，数组放着，匹配到的子串
                   如果不存在，返回  null
   
   	var str = "how are Are ARE you";
       var box = /are/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
       alert(arr.length) // 4 长度为 4 的数组
   

   
       介绍完各种正则方法后，可能会产生疑问，在正则表达式后跟着的 i g都是什么意思呢？原来正则除了方法以外，还有代表各种含义的元字符用来进一步修饰说明，让正则更加满足我们的需求。
   
       ok，那么让我们的正经知识不断增加吧~

元字符

   元字符就是在正则表达式中有特殊含义的字符。它们有⼀些特殊功能,可以控制匹配模式的方式。

常用元字符串

限定符

【注】限定符是配合元字符使⽤的

边界符

边界符是限定字符串的开始和结束的

特殊符号

标识符

Now，我们就可以把若⼲符号组合在⼀起使⽤了！


看看常用的邮箱用户名验证(以163邮箱用户名限制为例)

自己编写的一部分关于用户名关于长度、开头、组成的限制。
其中： oUsername为通过ID获取到的<input type="text" id="username">标签，oUsername_span为通过ID获取到的<span id="user_span">标签关于用户名信息的提示

	oUsername.onblur = function(){	//给获取到的这个标签绑定点击事件
                var oValue = oUsername.value;	//获取到输入框里的内容

                if(oValue.length < 6 || oValue.length > 18){ //判断用户名长度
                    oUsername_span.style.color = "red";
                    oUsername_span.innerHTML = "!长度应为6~18个字符";
                }else if(/[^a-zA-Z]/.test(oValue[0])){	//判断用户名首位是否为除了英文字母开头的任意文字
                    oUsername_span.style.color = "red";
                    oUsername_span.innerHTML = "!邮件地址必须以英文字母开头";
                }else if(/\W/.test(oValue)){	//判断用户名内容是否为除了数字、字母、下划线组成的
                    oUsername_span.style.color = "red";
                    oUsername_span.innerHTML = "!邮件地址必须由数字、字母、下划线组成";
                }else{	
                    oUsername_span.style.color = "green";
                    oUsername_span.innerHTML = "√恭喜，该邮箱地址可以注册";
                }


            }

现在是不是感觉特别简单了呢

   其实正则就是不难，唯一缺点就是太简单了，太不语义化。初学不好理解，需要费心去读懂，理解。

下面我们再来看一个例子，关于敏感词过滤。

   敏感词过滤我们并不陌生，像LOL里对于一些脏话，就会进行敏感词过滤。像什么我 * * 你个大 * * ，这种就是对于脏话进行了敏感词过滤，并替换成了 * 号，这是怎么实现的呢，其实很简单。

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

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

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

效果就是这样的（莫得任何侮辱意思，仅为了展示效果）

     OK，关于正则的方法和理解就写这么多吧，以后还想写一些关于H5的其他知识。如果觉得写的还可以，对你有帮助的话，要不点个赞，或者来个互关我们一起学习H5？

     第一次发表文章，还有点小紧张，如果有什么不足之处，还请多多指正。【鞠躬】拜了个拜~
如果你对前端开发的学习有兴趣，可以在B站上，找码农雨飞的免费前端学习视频，代码免费送。
https://www.bilibili.com/video/av77505416