十分钟掌握正则表达式！1_初识正则表达式

男娘i 2022-09-04 09:45 152阅读 0赞

### javascript正则表达式 ###

*  1、什么是正则表达式？
 *   *  1.1、语法：
     *  1.2、正则表达式的创建
     *  1.3、常用正则表达式
     *  1.4、正则表达式 - 运算符优先级
 *  2、正则的方法
 *   *  2.1、test() 方法用于检测一个字符串是否匹配某个模式
     *  2.2、exec()接受一个参数，即要应用模式的字符串——不加全局模式g与正则exec()相同
     *  2.3、match()——不加全局模式g与正则exec()相同，加了后则不同
     *  2.4、search()返回第一个匹配正则的结果在字符串中首次出现的位置,没有匹配到，返回-1
     *  2.5、replace() 替换
     *  2.6、split() 分割

# 1、什么是正则表达式？ #

正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
    正则表达式可以是一个简单的字符，或一个更复杂的模式。可用于所有文本搜索和文本替换的操作。

## 1.1、语法： ##

var  expression = / pattern / [flags] ;
    /* 参数： 1. 模式（pattern）部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。 2. 每个正则表达式都可带有一或多个标志（flags），用以标明正则表达式的行为，正则表达式支持下列 3 个标志： g： 表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止； i ： 表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写； m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。 2.1 如果多个标志同时使用时，则写成：gmi 。 */

## 1.2、正则表达式的创建 ##

// 1. 使用直接字面量创建
    var  exp1 = /(^\s+)|(\s+$)/g;
    
    //2. 使用RegExp对象创建
    var  exp2 = new  RegExp( '(^\\s+)|(\\s+$)' , 'g' );
    
    //3. exp1 和 exp2 是两个完全等价的正则表达式，需要注意的是，传递给 RegExp 构造函数的两个参数都是字符串，不能把正则表达式字面量传递给 RegExp 构造函数。

与其他语言中的正则表达式类似，模式中使用的所有元字符都必须转义。正则表达式中的元字符包括：

( [ { \ ^ $ | ) ? * + .——————————共12个，注意：]、}不需要转义

## 1.3、常用正则表达式 ##

用户名	          /^[a-z0-9_-]{3,16}$/
    
    密码	           /^[a-z0-9_-]{6,18}$/
    
    十六进制值	     /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
    
    电子邮箱	      /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
    				/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
    
    URL	             /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
    
    IP 地址	        /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
    /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
    
    HTML 标签	    	/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
    
    Unicode编码中的汉字范围	        /^[\u2E80-\u9FFF]+$/

## 1.4、正则表达式 - 运算符优先级 ##

正则表达式从左到右进行计算，并遵循优先级顺序，这与算术表达式非常类似。  
相同优先级的从左到右进行运算，不同优先级的运算先高后低。  
下表从最高到最低说明了各种正则表达式运算符的优先级顺序

<table> 
 <thead> 
  <tr> 
   <th align="left">运算符</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">\</td> 
   <td align="left">转义符</td> 
  </tr> 
  <tr> 
   <td align="left">(), (?：)(?=), []</td> 
   <td align="left">圆括号和方括号</td> 
  </tr> 
  <tr> 
   <td align="left">*, +, ?, {n}, {n,}, {n,m}</td> 
   <td align="left">限定符</td> 
  </tr> 
  <tr> 
   <td align="left">^, $, \任何元字符、任何字符</td> 
   <td align="left">定位点和序列（即：位置和顺序）</td> 
  </tr> 
  <tr> 
   <td align="left">|</td> 
   <td align="left">替换，“或"操作 字符具有高于替换运算符的优先级，使得"m|food"匹配"m"或"food”。若要匹配"mood"或"food"，请使用括号创建子表达式，从而产生"(m|f)ood"。</td> 
  </tr> 
 </tbody> 
</table>

# 2、正则的方法 #

## 2.1、test() 方法用于检测一个字符串是否匹配某个模式 ##

/* 语法： RegExpObject.test(string) 返回值： 如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。 */
    var str = '123 and abc';
    var regt = /\d/
    console.log(regt.test(str));//true
    console.log("test()------------------------------------------------");

## 2.2、exec()接受一个参数，即要应用模式的字符串——不加全局模式g与正则exec()相同 ##

/* 语法： RegExpObject.exec(string) 返回值： 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。 exec() 方法还返回两个属性。 index 属性声明的是匹配文本的第一个字符的位置。 input 属性则存放的是被检索的字符串 string。 但是，exec()加全局模式g后。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串。当 exec() 找到了与表达式相匹配的文本时，它将把lastIndex往后移一位。 这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。 */
    
    var str1 = '12 3apple ';
    var re = /\d/;
    console.log(re.exec(str1));//["1", index: 0, input: "12 3apple ", groups: undefined]
    
    var rege = /\d/g;
    console.log(rege.exec(str1)); // ["1", index: 0, input: "12 3apple ", groups: undefined]
    console.log(rege.exec(str1)); // ["2", index: 1, input: "12 3apple ", groups: undefined]
    console.log(rege.exec(str1)); // ["3", index: 3, input: "12 3apple ", groups: undefined]
    console.log(rege.exec(str1)); // null
    console.log("exec()------------------------------------------------");

## 2.3、match()——不加全局模式g与正则exec()相同，加了后则不同 ##

/* 语法： stringObject.match(searchvalue) stringObject.match(regexp) 注意： 如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本，match() 将返回 null。否则，它将返回一个数组，其中: 1). 该数组的第 0 个元素存放的是匹配文本 2). index 属性声明的是匹配文本的起始字符在 stringObject 中的位置 3). input 属性声明的是对 stringObject 的引用。 */
    var str2 = '12 23 36 apple or mac or ipad';
    console.log(str2.match(/\d/g));// ["1", "2", "2", "3", "3", "6"]
    
    console.log(str2.match(/\d/));//["1", index: 0, input: "12 23 36 apple or mac or ipad", groups: undefined]
    console.log("match()------------------------------------------------");

## 2.4、search()返回第一个匹配正则的结果在字符串中首次出现的位置,没有匹配到，返回-1 ##

/* 语法: stringObject.search(regexp) 说明: search() 方法不执行全局匹配，它将忽略标志 g。默认还对大小写敏感,它同时忽略 regexp 的 lastIndex 属性， 并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。 */
    var csstr = 'abc123abc';
    console.log(csstr.search(/b/));  // 1
    console.log(csstr.search(/B/));  //-1 ,因为默认对大小写敏感
    console.log(csstr.search(/B/i)); // 1 ,执行一次忽略大小写的检索：
    console.log("search()------------------------------------------------");

## 2.5、replace() 替换 ##

/* 语法： stringObject.replace(regexp/substr,replacement) 返回值： 一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。 注意： 1. 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。 2. replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。 但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。 字符 替换文本 $1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。 $& 与 regexp 相匹配的子串。 $` 位于匹配子串左侧的文本。 $' 位于匹配子串右侧的文本。 $$ 直接量符号。 */
    
    //——1)在本例中，我们将使用 "tihuan" 替换字符串中的 "hello"：
    var restr = 'hello world';
    console.log(restr.replace('hello', 'tihuan'));//tihuan world 
    
    //——2)在本例中，我们使用全局标志,将所有的 "l" 替换为 "T"：
    console.log(restr.replace(/l/g, 'T'));//heTTo worTd
    
    //——3)去掉空格
    var kgstr = " hello world "
    console.log(kgstr.replace(/ /g, ''));// helloworld 去掉所有空格
    console.log(kgstr.replace(/^\s+|\s+$/g, '-S-'));// 将kgstr首位和末尾的空格替换为""-S-"
    
    //——4)将 "Doe, John" 转换为 "John Doe" 的形式：
    name = "Doe, John";
    name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
    console.log(name);//Doe, John
    
    //——5)将把字符串中，所有单词的首字母都转换为大写：
    wordStr = 'abc hello ccc';
    news = wordStr.replace(/\b\w+\b/g, function (word) { 
        // \b 是指单词边界————\b\w+\b就可以表示一个单词
        return word.substring(0, 1).toUpperCase() + word.substring(1);
        //return 截取第一位.转换为大写 +（拼接）截取第一位以后的字符串
    });
    console.log(news);//Abc Hello Ccc
    console.log("replace()------------------------------------------------");

## 2.6、split() 分割 ##

/* 语法： stringObject.split(separator,howmany) 参数： 描述： separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。 howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。 如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 返回值： 一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。 但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。 提示和注释： 注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。 注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。 */
    
    var spstr = 'a, b,c , d';
    console.log(spstr.split(','));   //["a", " b", "c", " d"]
    
    console.log(spstr.split(/\s*,\s*/)); //["a", "b", "c", "d"]——,连同空格去掉
    
    console.log("hello".split("", 3)); 	//可返回 ["h", "e", "l"]——若只需要返回一部分字符，请使用 howmany 参数：
    console.log("split()------------------------------------------------");