Résumé des points clés des expressions régulières JS-js tutoriel-php.cn

Cet article partage principalement avec vous un résumé des points clés des expressions régulières JS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

Pourquoi avons-nous besoin d'expressions régulières ? En fait, c'est parce que les ordinateurs sont stupides (ce n'est pas ce que j'ai dit). Par exemple, 123456@qq.com, quand on le regarde, c'est une adresse email, mais l'ordinateur ne la reconnaît pas, donc on a. utiliser certains langages que les ordinateurs comprennent pour formuler des règles et leur dire. Celui qui se conforme à cette règle est une boîte aux lettres, donc l'ordinateur peut nous aider à trouver la chose correspondante. Ainsi, les règles régulières sont utilisées pour définir des règles permettant d'effectuer certaines opérations dont nous avons besoin, telles que la vérification de la connexion, la recherche d'éléments spécifiés, etc. Il est redondant d'en dire trop, passons directement au sujet.

Définir régulier :

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

Copier après la connexion

Méthodes régulières couramment utilisées

1 test() : recherche le contenu conforme aux règles régulières dans la chaîne et renvoie true s'il est trouvé , Sinon, renvoie false.

Utilisation : Regular.test(string)

Exemple : Déterminer s'il s'agit d'un nombre

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

Copier après la connexion

Il existe de nombreux symboles dans les expressions régulières, qui représentent différentes significations et sont utilisés pour nous permettre de définir différentes règles, comme D ci-dessus, et les suivants :

s : espaces
S : non-espaces
d : nombres
D : non-chiffres
w : caractères (lettres, chiffres, trait de soulignement_)
W : non-caractères Exemple : Y a-t-il des caractères qui ne sont pas des nombres

(Je vais parler tour à tour de certains caractères couramment utilisés en me basant sur des exemples ci-dessous, et enfin résumer.)

2 search() : recherche le contenu normal dans la chaîne et renvoie la position où il apparaît (en commençant à 0, si plus d'une lettre correspond, seule la position de la première lettre sera renvoyée si la). la recherche échoue, -1

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

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

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

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

Copier après la connexion

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

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

Copier après la connexion

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]

Copier après la connexion

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

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

| : 或的意思。

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

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

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

Copier après la connexion

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

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;i++){
                result += &#39;*&#39;;
            }              
            return result; //所以搜索到了几个字就返回几个*         });
alert(str2)  //我爱*****，***上太阳升         //整个过程就是，找到北京，替换成了两个*，找到天安门替换成了3个*，找到天安门替换成3个*。

Copier après la connexion

replace是一个很有用的方法，经常会用到。

正则中的字符

()：，小括号，叫做分组符。就相当于数学里面的括号。如下：

var str = &#39;2013-6-7&#39;;
var re1 = /\d-+/g;  // 全局匹配数字，横杠，横杠数量至少为1，匹配结果为：  3- 6-
var re1 = /(\d-）+/g;  // 全局匹配数字，横杠，数字和横杠整体数量至少为1   3-6-
var re2  = /(\d+)(-)/g;   //  全局匹配至少一个数字，匹配一个横杠 匹配结果：2013- 6-

Copier après la connexion

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

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

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

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

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

Copier après la connexion

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

var str = &#39;abc&#39;;var re = /(a)(b)(c)/;

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

Copier après la connexion

补充：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   每次匹配成功的字符串中的第一个字符的位置

Copier après la connexion

全局匹配：如果是全局匹配，可以通过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}

Copier après la connexion

[] ：表示某个集合中的任意一个，比如 [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 = /<[\w\W]+>/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>

Copier après la connexion

转义字符

\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

Copier après la connexion

例子：写一个用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;i++){ 
          if(elems[i].className==classname){ 
             results.push(elems[i]);
           }
        }       return results;  
    }
}

Copier après la connexion

其实这是存在问题的，比如它如果一个标签里面有两个class,或者存在相同名字的class,比如

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;i++){            if( re.test(aEle[i].className) ){
                arr.push( aEle[i] );
            }
        }        
        return arr;
    }    
        
}

Copier après la connexion