您的位置: 首页  >  文章  >  Web开发技术梳理 0x9 JavaScript（0x6）正则表达式

Web开发技术梳理 0x9 JavaScript（0x6）正则表达式

分类: 文章 • 2023-10-16 16:28:19

    æ­£åˆ™è¡¨è¾¾å¼æ˜¯ç”¨äºŽåŒ¹é…å­—符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法。

 åˆ›å»ºä¸€ä¸ªæ­£åˆ™è¡¨è¾¾å¼

  • 使用正则表达式字面量
/*
   /pattern/flags
*/

const regex = /ab+c/;

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
  • 调用 RegExp对象的构造函数
/* 
    new RegExp(pattern [, flags])
*/

let regex = new RegExp("ab+c");

let regex = new RegExp(/^[a-zA-Z]+[0-9]*\W?_$/, "gi");

let regex = new RegExp("^[a-zA-Z]+[0-9]*\\W?_$", "gi");

编写正则表达式的模式

    ä¸€ä¸ªæ­£åˆ™è¡¨è¾¾å¼æ¨¡å¼æ˜¯ç”±ç®€å•çš„字符所构成的，比如/abc/, 或者是简单和特殊字符的组合，比如 /ab*c/ 或 /Chapter (\d+)\.\d*/。后者用到了括号，它在正则表达式中可以被用作是一个记忆设备。这一部分正则所匹配的字符将会被记住，在后面可以被利用。

    使用简单的模式

    简单的模式是由找到的直接匹配所构成的。比如，/abc/这个模式就匹配了在一个字符串中，仅仅字符 'abc' 同时出现并按照这个顺序。

    使用特殊字符

     æ­£åˆ™è¡¨è¾¾å¼ä¸­çš„特殊字符

Web开发技术梳理 0x9 JavaScript（0x6）正则表达式

     ä½¿ç”¨æ’入语

    任何正则表达式的插入语都会使这部分匹配的副字符串被记忆。
    一旦被记忆，这个副字符串就可以被调用于其它用途。比如， /Chapter (\d+)\.\d*/ 解释了额外转义的和特殊的字符，并说明了这部分pattern应该被记忆。它精确地匹配后面跟着一个以上数字字符的字符 'Chapter '  (\d 意为任何数字字符，+ 意为1次以上)，跟着一个小数点（在这个字符中本身也是一个特殊字符；小数点前的 \ 意味着这个pattern必须寻找字面字符 '.')，跟着任何数字字符0次以上。 (\d 意为数字字符， * 意为0次以上)。另外，插入语也用来记忆第一个匹配的数字字符。
    此模式可以匹配字符串"Open Chapter 4.3, paragraph 6"，并且'4'将会被记住。此模式并不能匹配"Chapter 3 and 4"，因为在这个字符串中'3'的后面没有点号'.'。

使用正则表达式

    正则表达式可以被用于RegExp的exec和test方法以及 String的match、replace、search和split方法。 

Web开发技术梳理 0x9 JavaScript（0x6）正则表达式

//使用exec方法在一个字符串中查找一个匹配。
var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
//如果不需要访问正则表达式的属性
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
//通过一个字符串构建正则表达式
var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");

Web开发技术梳理 0x9 JavaScript（0x6）正则表达式

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + myRe.lastIndex);
//The value of lastIndex is 5

     å¯ä»¥ä½¿ç”¨ä¸€ä¸ªæ­£åˆ™è¡¨è¾¾å¼åˆ›å»ºä¸€ä¸ªæ²¡æœ‰åˆ†é…ç»™å˜é‡çš„对象初始化容器。如果这样做，那么，每一次使用时都好比在使用一个新的正则表达式。因为这个原因，如果使用这个未分配给一个变量的正则表达式，将在随后不能访问这个正则表达式的属性。

var myArray = /d(b+)d/g.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
//The value of lastIndex is 0

     ä½¿ç”¨æ‹¬å·çš„子字符串匹配

    ä¸€ä¸ªæ­£åˆ™è¡¨è¾¾å¼æ¨¡å¼ä½¿ç”¨æ‹¬å·ï¼Œå°†å¯¼è‡´ç›¸åº”的子匹配被记住。例如，/a(b)c /可以匹配字符串“abc”，并且记得“b”。回调这些括号中匹配的子串，使用数组元素[1],……[n]。

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);
// "Smith, John"

    通过标志进行高级搜索

    æ­£åˆ™è¡¨è¾¾å¼æœ‰å››ä¸ªå¯é€‰å‚数进行全局和不分大小写搜索。这些参数既可以单独使用也可以一起使用在任何顺序和包含正则表达式的部分中。

Web开发技术梳理 0x9 JavaScript（0x6）正则表达式

//使用标志的两种方法
var re = /pattern/flags;

var re = new RegExp("pattern", "flags");

 å®žä¾‹

    改变字符串的顺序

// 下面这个姓名字符串包含了多个空格和制表符，
// 且在姓和名之间可能有多个空格和制表符。
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Original String\n", names + "\n"];

// 准备两个模式的正则表达式放进数组里。
// 分割该字符串放进数组里。

// 匹配模式：匹配一个分号及紧接其前后所有可能出现的连续的不可见符号。
var pattern = /\s*;\s*/;

// 把通过上述匹配模式分割的字符串放进一个叫做nameList的数组里面。
var nameList = names.split(pattern);

// 新建一个匹配模式：匹配一个或多个连续的不可见字符及其前后紧接着由
// 一个或多个连续的基本拉丁字母表中的字母、数字和下划线组成的字符串
// 用一对圆括号来捕获该模式中的一部分匹配结果。
// 捕获的结果稍后会用到。
pattern = /(\w+)\s+(\w+)/;

// 新建一个数组 bySurnameList 用来临时存放正在处理的名字。
var bySurnameList = [];

// 输出 nameList 的元素并且把 nameList 里的名字
// 用逗号接空格的模式把姓和名分割开来然后存放进数组 bySurnameList 中。
//
// 下面的这个替换方法把 nameList 里的元素用 $2, $1 的模式
// （第二个捕获的匹配结果紧接着一个逗号一个空格然后紧接着第一个捕获的匹配结果）替换了
// 变量 $1 和变量 $2 是上面所捕获的匹配结果。

output.push("---------- After Split by Regular Expression");

var i, len;
for (i = 0, len = nameList.length; i < len; i++){
  output.push(nameList[i]);
  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}

// 输出新的数组
output.push("---------- Names Reversed");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

// 根据姓来排序，然后输出排序后的数组。
bySurnameList.sort();
output.push("---------- Sorted");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

output.push("---------- End");

console.log(output.join("\n"));

        ç”¨ç‰¹æ®Šå­—符检验输入

<!DOCTYPE html>
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
    <meta http-equiv="Content-Script-Type" content="text/javascript">  
    <script type="text/javascript">  
      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;  
      function testInfo(phoneInput) {  
        var OK = re.exec(phoneInput.value);  
        if (!OK)  
          window.alert(phoneInput.value + ' isn\'t a phone number with area code!');  
        else
          window.alert('Thanks, your phone number is ' + OK[0]);  
      }  
    </script>  
  </head>  
  <body>  
    <p>Enter your phone number (with area code) and then click "Check".
        <br>The expected format is like ###-###-####.</p>
    <form action="#">  
      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
    </form>  
  </body>  
</html>

 

相关推荐