Summary of key points of JS regular expressions

This article mainly shares with you a summary of the key points of JS regular expressions. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

Why do we need regular expressions? In fact, it is because computers are stupid (this is not what I said). For example, 123456@qq.com, when we look at it, it is an email address, but the computer does not recognize it, so we have to use some languages ​​​​that computers understand to formulate rules and tell them. The one that conforms to this rule is a mailbox, so the computer can help us find the corresponding thing. So regular rules are used to set rules to complete some operations we need, such as login verification, searching for specified things, etc. It is redundant to say too much, let’s get to the point.

Define regularity:

 1 var re = new RegExp(“a”);  //RegExp对象。参数就是我们想要制定的规则。有一种情况必须用这种方式，下面会提到。
 2 var re = /a/;   // 简写方法 推荐使用 性能更好  不能为空 不然以为是注释 ，

Regularity Commonly used methods

## 1 test(): Find content that conforms to regular rules in the string. If found, return true, otherwise return false.

# Usage: Regular.test(string)

Example: Determine whether it is a number

var str = '374829348791';var re = /\D/;      //  \D代表非数字if( re.test(str) ){   // 返回true,代表在字符串中找到了非数字。
    alert('不全是数字');
}else{
    alert('全是数字');
}

There are many symbols in regular expressions, which represent different meanings and are used to allow us to define different rules, such as \D above, and the following:

\s : Space

\S : Non-space
\d : Digit
\D: Non-digits
\w: Characters (letters, numbers, underscore_)
\W: Non-characters Example: Is there anything that is not a number? The characters of

(I will talk about some commonly used characters in turn based on examples below, and finally summarize.)

2 search () : Search for regular content in the string, and return the position where it appears (starting from 0, if more than one letter is matched, only the position of the first letter will be returned). If the search fails, - 1

   用法：字符串.search(正则)

   在字符串中查找复合正则的内容。忽略大小写：i——ignore（正则中默认是区分大小写的 如果不区分大小写的话，在正则的最后加标识 i ）

例子：在字符串中找字母b，且不区分大小写

var str = 'abcdef';
var re = /B/i;
//var re = new RegExp('B','i'); 也可以这样写
alert( str.search(re) ); // 1

3  match()  在字符串中搜索复合规则的内容，搜索成功就返回内容，格式为数组，失败就返回null。
     用法： 字符串.match(正则)
     量词：+ 至少出现一次 匹配不确定的次数（匹配就是搜索查找的意思）
    全局匹配：g——global（正则中默认，只要搜索到复合规则的内容就会结束搜索 ）

例子：找出指定格式的所有数字，如下找到 123，54，33，879

var str = 'haj123sdk54hask33dkhalsd879';
var re = /\d+/g;   // 每次匹配至少一个数字  且全局匹配  如果不是全局匹配，当找到数字123，它就会停止了。就只会弹出123.加上全局匹配，就会从开始到结束一直去搜索符合规则的。如果没有加号，匹配的结果就是1，2，3，5，4，3，3，8，7，9并不是我们想要的，有了加号，每次匹配的数字就是至少一个了。
alert( str.match(re) );   // [123，54，33，879]

4 replace() :查找符合正则的字符串，就替换成对应的字符串。返回替换后的内容。

    用法： 字符串.replace(正则,新的字符串/回调函数)（在回调函数中，第一个参数指的是每次匹配成功的字符）

     | : 或的意思 。

   例子：敏感词过滤，比如 我爱北京天安门，天安门上太阳升。------我爱*****，****上太阳升。即北京和天安门变成*号，

一开始我们可能会想到这样的方法：

var str = "我爱北京天安门，天安门上太阳升。";var re = /北京|天安门/g;  //  找到北京 或者天安门 全局匹配var str2 = str.replace(re,'*'); 
alert(str2)  //我爱**，*上太阳升 //这种只是把找到的变成了一个*，并不能几个字就对应几个*。

要想实现几个字对应几个*，我们可以用回调函数实现：

var str = "我爱北京天安门，天安门上太阳升。";var re = /北京|天安门/g;  //  找到北京 或者天安门 全局匹配var str2 = str.replace(re,function(str){
              alert(str); //用来测试：函数的第一个参数代表每次搜索到的符合正则的字符，所以第一次str指的是北京 第二次str是天安门 第三次str是天安门
            var result = '';            for(var i=0;i<str.length alert><p class="cnblogs_code_toolbar" style="margin:5px 0px 0px;padding:0px;"><br></p>
<p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Microsoft YaHei';">replace是一个很有用的方法，经常会用到。</span></p>
<p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Microsoft YaHei';"><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(255,0,0);">正则中的字符</span></span></span></p>
<p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Microsoft YaHei';"><span style="margin:0px;padding:0px;">()：，小括号，叫做分组符。就相当于数学里面的括号。如下：</span></span></p>
<pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">var str = '2013-6-7';
var re1 = /\d-+/g;  // 全局匹配数字，横杠，横杠数量至少为1，匹配结果为：  3- 6-
var re1 = /(\d-）+/g;  // 全局匹配数字，横杠，数字和横杠整体数量至少为1   3-6-
var re2  = /(\d+)(-)/g;   //  全局匹配至少一个数字，匹配一个横杠 匹配结果：2013- 6-

同时，正则中的每一个带小括号的项，都叫做这个正则的子项。子项在某些时候非常的有用，比如我们来看一个栗子。

例子：让2013-6-7 变成 2013.6.7

<span style="margin:0px;padding:0px;font-family:'Microsoft YaHei';line-height:1.8;"><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,0,255);font-family:'Courier New';">var</span> str = '2013-6-7'<span style="margin:0px;padding:0px;line-height:1.8;font-family:'Courier New';">;</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,0,255);font-family:'Courier New';">var</span> re = /(\d+)(-)/<span style="margin:0px;padding:0px;line-height:1.8;font-family:'Courier New';">g;

str </span>= str.replace(re,<span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,0,255);font-family:'Courier New';">function</span>($0,$1,$2<span style="margin:0px;padding:0px;line-height:1.8;font-family:'Courier New';">){    
       </span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">replace()中如果有子项，<br>      //第一个参数：$0（匹配成功后的整体结果  2013-  6-）,</span>
         <span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';"> 第二个参数 : $1(匹配成功的第一个分组，这里指的是\d   2013, 6)</span>
        <span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">第三个参数 : $1(匹配成功的第二个分组，这里指的是-    - - )   </span>
    <span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,0,255);font-family:'Courier New';">return</span> $1 + '.';  <span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">分别返回2013.   6.</span><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Courier New';">    });

alert( str );   </span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">2013.6.7</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">整个过程就是利用子项把2013- 6- 分别替换成了2013. 6.  最终</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">弹出2013.6.7</span></span>

match方法也会返回自己的子项，如下：

var str = 'abc';var re = /(a)(b)(c)/;

alert( str.match(re) );  //[abc,a,b,c]( 返回的是匹配结果 以及每个子项  当match不加g的时候才可以获取到子项的集合)

补充：exec()方法：和match方法一样，搜索符合规则的内容，并返回内容，格式为数组。

                      用法：正则.exec(字符串)；

属性：input(代表要匹配的字符串)  

栗子：不是全局匹配的情况：

 var testStr = "now test001 test002";   
 var re = /test(\d+)/; //只匹配一次     
 var r = "";   
 var r = re.exec(testStr)
  alert(r);// test001  001 返回匹配结果，以及子项
  alert(r.length); //2   返回内容的长度
  alert(r.input); //now test001 test002    代表每次匹配成功的字符串 
  alert(r[0]);   //test001   
  alert(r[1]);  //001    代表每次匹配成功字符串中的第一个子项 (\d+) 
  alert(r.index );   //  4   每次匹配成功的字符串中的第一个字符的位置

全局匹配：如果是全局匹配，可以通过while循环 找到每次匹配到的字符串，以及子项。每次匹配都接着上次的位置开始匹配

 var testStr = "now test001 test002";   
 var re = /test(\d+)/g;    
 var r = "";   

//匹配两次 每次匹配都接着上一次的位置开始匹配，一直匹配到最后r就为false,就停止匹配了 匹配到test001 test002  while(r = re.exec(testStr)){
    alert(r);//返回每次匹配成功的字符串，以及子项，分别弹出 ：test001 001,test002  002
    alert(r.input); //分别弹出：   now test001 test002    now test001 test002  
    alert(r[0]);   //代表每次匹配成功的字符串  分别弹出：  test001     test002
    alert(r[1]);  //代表每次匹配成功字符串中的第一个子项 (\d+)  分别弹出：001   002
    alert(r.index );   // 每次匹配成功的字符串中的第一个字符的位置，分别弹出：4  12
    alert(r.length); //分别弹出：2   2}

 

[] ： 表示某个集合中的任意一个，比如 [abc] 整体代表一个字符 匹配 a b c 中的任意一个，也可以是范围，[0-9] 范围必须从小到大 。

[^a] 整体代表一个字符   ：^写在[]里面的话，就代表排除的意思

例子：匹配HTML标签 比如

hahahah

找出标签

<span style="margin:0px;padding:0px;font-family:'Microsoft YaHei';line-height:1.8;"><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,0,255);font-family:'Courier New';">var</span> re = /]+>/g; <span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">匹配左括号 中间至少一个非右括号的内容(因为标签里面还有属性等一些东西)，然后匹配右括号</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,0,255);font-family:'Courier New';">var</span> re = //g; <span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">//</span><span style="margin:0px;padding:0px;line-height:1.8;color:rgb(0,128,0);font-family:'Courier New';">匹配左括号 中间至少一个字符或者非字符的内容，然后匹配右括号<br>// 其实就是找到左括号，然后中间可以有至少一个内容，一直到找到右括号就代表是一个标签。</span></span>

转义字符

\s : 空格
\S : 非空格
\d : 数字
\D : 非数字
\w : 字符 ( 字母 ，数字，下划线_ )
\W : 非字符
.（点）——任意字符
\. : 真正的点
\b : 独立的部分 （ 起始，结束，空格 ）
\B : 非独立的部分

关于最后两个来看个栗子：

var str = 'onetwo';
var str2 ="one two";var re = /one\b/;  // e后面必须是独立的 可以是起始，空格，或结束alert( re.test(str) ); //falsealert( re.test(str2) );//true

例子：写一个用class名获取节点的函数：

我们之前可能见过这样的函数：

    function getByClass(parent,classname){ 
    if(parent.getElementsByClassName){ 
                return parent.getElementsByClassName(classname);
    }    else{        var results = new Array();//用来存储所有取到的class为box的元素
        var elems = parent.getElementsByTagName("*");        for(var i =0;i<elems.length><p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Microsoft YaHei';">其实这是存在问题的，比如它如果一个标签里面有两个class,或者存在相同名字的class,比如<p class="box1 box1">,</p>
<p class="box1 box2>它就没办法获取到了，我们可以用正则来解决这个问题。</span></p><pre style=" margin-bottom:0px new>function getByClass(parent,classname){    if(parent.getElementsByClassName){ 
       return parent.getElementsByClassName(classname);
    }else{        var arr = [];        var aEle = parent.getElementsByTagName('*');        
        //var re = /\bclassname\b/;  //不能这样写，当正则需要用到参数时候，一定要用全称的写法，简写方式会把classname当做一个字符串去匹配。
        var re = new RegExp('\\b'+classname+'\\b');  // 匹配的时候，classname前面必须是起始或者空格，后面也是。 默认匹配成功就停止，所以就算有重复的也不会再匹配进去了。
        //需要注意的是，全称的方式声明正则的时候，参数是字符串类型的，所以我们用的时候，需要保证这些特殊的字符在字符串内也能输出才行。\b本身是特殊字符，在字符串中无法输出，所以要加反斜杠转义才行。  

        for(var i=0;i<aele.length><p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Microsoft YaHei';"><span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;line-height:1.5;">\a 表示重复的某个子项 比如：</span></span></span></p>
<p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.5;font-family:'Microsoft YaHei';">\1 重复的第一个子项</span></p>
<p style="margin:10px auto;"><span style="margin:0px;padding:0px;line-height:1.8;font-family:'Microsoft YaHei';">\2 重复的第二个子项</span></p>
<pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">/ (a) (b) (c) \1/-----匹配 abca
/ (a) (b) (c) \2/------匹配 abcb

例子（面试题中经常问到）：找重复项最多的字符个数

split():字符串中的方法，把字符串转成数组。

sort():数组中的排序方法，按照ACALL码进行排序。

join():数组中的方法，把数组转换为字符串

var str = 'assssjdssskssalsssdkjsssdss';
var arr = str.split(''); //把字符串转换为数组
str = arr.sort().join(''); //首先进行排序，这样结果会把相同的字符放在一起，然后再转换为字符串
//alert(str);  // aaddjjkklsssssssssssssssss

 var value = ''; 
 var index = 0; 
var re = /(\w)\1+/g;  //匹配字符，且重复这个字符，重复次数至少一次。
str.replace(re,function($0,$1){ 
   //alert($0);   代表每次匹配成功的结果 : aa dd jj kk l sssssssssssssssss
   //alert($1);  代表每次匹配成功的第一个子项，也就是\w:  a d j k l S
 if(index<pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;">量词：代表出现的次数

{n,m}：至少出现n次，最多m次

{n,} :至少n次

* :任意次 相当于{0,}

？ ：零次或一次 相当于{0,1}

+ ：一次或任意次相当于 {1,}

{n}： 正好n次

例子：判断是不是QQ号

//^ : 放在正则的最开始位置，就代表起始的意思，注意  /[^a] /   和   /^[a]/是不一样的，前者是排除的意思，后者是代表首位。
//$ : 正则的最后位置 , 就代表结束的意思

     //首先想QQ号的规则 
      1 首位不能是0 
      2 必须是 5-12位的数字   
    var aInput = document.getElementsByTagName('input');    var re = /^[1-9]\d{4,11}$/;    //123456abc为了防止出现这样的情况，所以必须限制最后
    //首位是0-9，接着是4-11位的数字类型。aInput[1].onclick = function(){    if( re.test(aInput[0].value) ){
        alert('是QQ号');
    }else{
        alert('不是QQ号');
    }
};

例子：去掉前后空格（面试题经常出现）

var str = '  hello  ';

alert( '('+trim(str)+')' );//为了看出区别所以加的括号。 (hello)
function trim(str){   
    var re = /^\s+|\s+$/g; // |代表或者   \s代表空格  +至少一个    前面有至少一个空格 或者后面有至少一个空格 且全局匹配
  return str.replace(re,''); //把空格替换成空
  }

常用的一些表单校验

匹配中文：[\u4e00-\u9fa5] //中文ACALL码的范围
行首行尾空格：^\s*|\s*$ //首行出现任意个空格或者尾行出现任意个空格（任意表示也可以没有空格）
Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$  
      //起始至少为一个字符(\w字母，数字或者下划线)，然后匹配@,接着为任意个字母或者数字，\.代表真正的点，.后面为至少一个的字符（a-z）,同时这个(比如.com)整体为一个子项作为结束，可以出现1-3次。因为有的邮箱是这样的.cn.net。（xxxx.@qq.com xxxx.@163.com xxxx.@16.cn.net ）
      网址：[a-zA-z]+://[^\s]*   http://......
  //匹配不分大小写的任意字母，接着是//,后面是非空格的任意字符
  
  邮政编码：[1-9]\d{5}  //起始数字不能为0，然后是5个数字
  身份证：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

为了方便且不冲突，我们可以用json的格式 建立自己的空间，如下：

/*
var re = {email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,number : /\d+/};
re.email
*/

The above is the detailed content of Summary of key points of JS regular expressions. For more information, please follow other related articles on the PHP Chinese website!