如何在 JavaScript 中連線正則表示式字面量?


正則表示式字面量是正則表示式,是一系列用於匹配字串的字元。有時,開發人員需要組合正則表示式。但是,正則表示式也是一種字串,但我們不能像使用“+”運算子連線字串一樣連線它們。

因此,我們首先需要從兩個正則表示式中獲取標誌。之後,我們必須過濾所有唯一的標誌,並在組合多個正則表示式字面量後建立一個新的正則表示式。

語法

使用者可以按照以下語法在 JavaScript 中連線正則表示式字面量。

let allFlags = regex1.flags + regex2.flags;
let uniqueFlags = new Set(allFlags.split(''));
allFlags = [...uniqueFlags].join('');
let combined = new RegExp(regex1.source + regex2.source, allFlags);

在上述語法中,首先,我們獲取兩個正則表示式的標誌。之後,我們從中建立一個集合以獲取唯一的標誌並組合兩個正則表示式字面量。

示例 1

在下面的示例中,我們定義了兩個正則表示式字面量。我們使用了正則表示式字面量的“flags”屬性從兩個正則表示式中獲取標誌。之後,我們建立了一個標誌集合以獲取唯一的標誌。接下來,我們將集合轉換為陣列。

之後,我們使用正則表示式的“source”屬性獲取正則表示式字面量,並使用“+”運算子組合兩個正則表示式字面量。此外,我們在建立組合的正則表示式字面量時使用了兩個正則表示式字面量中包含的所有唯一標誌。

<html>
<body>
   <h2>Concatenating the <i> Regex literals </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      
      // concatenate two regex literals
      let regex1 = /hello/i;
      let regex2 = /world/g;
      let allFlags = regex1.flags + regex2.flags;
      let uniqueFlags = new Set(allFlags.split(''));
      allFlags = [...uniqueFlags].join('');
      let combined = new RegExp(regex1.source + regex2.source, allFlags);
      output.innerHTML += "The first regex is: " + regex1 + "<br>";
      output.innerHTML += "The second regex is: " + regex2 + "<br>";
      output.innerHTML += "The combined regex is: " + combined + "<br>";
   </script>
</body>
</html>

示例 2

在下面的示例中,使用者需要輸入正則表示式字面量和相關標誌。此外,使用者需要填寫字串輸入以使用組合的正則表示式進行測試。

每當使用者按下按鈕時,它都會執行 combineRegex() 函式。在其中,我們將兩個輸入正則表示式與正確的標誌結合起來。之後,我們使用 test() 方法檢查字串是否與組合的正則表示式匹配,它返回布林值。

<html>
<body>
   <h2>Concatenating the <i> Regex literals </i> in JavaScript</h2>
   <input type = "text" placeholder = "regex1" id = "regex1">
   <input type = "text" placeholder = "flags" id = "flag1">
   <br> <br>
   <input type = "text" placeholder = "regex2" id = "regex2">
   <input type = "text" placeholder = "flags" id = "flag2">
   <br> <br>
   <input type = "text" placeholder = "string to test regex" id = "str">
   <br> <br>
   <div id = "output"> </div>
   <button id="btn" onclick="combineRegex()"> Combine and Match Regex </button>
   <script>
      let output = document.getElementById('output');
      function combineRegex() {
         let regex1 = new RegExp(document.getElementById('regex1').value, document.getElementById('flag1').value);
         let regex2 = new RegExp(document.getElementById('regex2').value, document.getElementById('flag2').value);
         let allFlags = regex1.flags + regex2.flags;
         let uniqueFlags = new Set(allFlags.split(''));
         allFlags = [...uniqueFlags].join('');
         let combined = new RegExp(regex1.source + regex2.source, allFlags);
         let str = document.getElementById('str').value;
         let result = combined.test(str);
         output.innerHTML += "The combined regex " + combined + " matches the string " + str + " : " + result;
      }
   </script>
</body>
</html>

示例 3

在下面的示例中,我們首先以正則字串的形式編寫正則表示式。之後,我們合併兩個字串,並使用 RegExp() 建構函式從組合的字串建立一個新的正則表示式。

此外,我們可以將所需的標誌作為第二個引數傳遞。

<html>
<body>
   <h2>Concatenating the <i> Regex literals </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let part1 = "Hello";
      let part2 = " World";
      var pattern = new RegExp(part1 + part2, "g");
      output.innerHTML = "The combined regex is: " + pattern + "<br>";
   </script>
</body>
</html>

結論

使用者學習瞭如何在 JavaScript 中連線正則表示式字面量。在第一個示例中,我們在建立正則表示式字面量後連線它們。在最後一個示例中,我們首先組合字串,然後使用組合的字串建立一個新的正則表示式。但是,最後一個示例沒有使用正則表示式字面量,因為它使用建構函式建立正則表示式。

更新於: 2023年4月19日

2K+ 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告