MooTools - 正則表示式

上一頁
下一頁

MooTools 提供了一種建立和使用正則表示式 (regex) 的方法。本教程將解釋正則表示式的基礎知識和高階用法。

讓我們討論一些正則表示式的方法。

test()

test() 是一個用於測試正則表示式與輸入字串的方法。雖然 JavaScript 已經提供了 RegExp 物件以及 test() 函式，但 MooTools 為 RegExp 物件添加了更多功能。讓我們舉個例子，瞭解如何使用 test() 方法。請檢視以下程式碼。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }
         
         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>
   
   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "TEST"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>
   
</html>

您將收到以下輸出 -

輸出

忽略大小寫

這是正則表示式概念中的重要情況之一。如果您不希望正則表示式區分大小寫，您可以使用選項 'I' 呼叫 test 方法。讓我們舉個例子來說明正則表示式中的忽略大小寫。請檢視以下程式碼。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value, "i");
            
            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }
         
         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>
   
   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "TEST"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>
   
</html>

您將收到以下輸出 -

輸出

正則表示式以 '^' 開頭

正則表示式 '^' (脫字元) 是一個特殊運算子，允許您檢查給定字串開頭的正則表示式。此運算子用作正則表示式的字首。讓我們舉個例子來說明如何使用此運算子。請檢視以下程式碼。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }
         
         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>
   
   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "Match"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>
   
</html>

您將收到以下輸出 -

輸出

正則表示式以 '$' 結尾

正則表示式 '$' (美元符號) 是一個特殊運算子，允許您檢查給定字串結尾的正則表示式。此運算子用作正則表示式的字尾。讓我們舉個例子來說明如何使用此運算子。請檢視以下程式碼。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }
         
         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>
   
   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "Match"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>
   
</html>

您將收到以下輸出 -

輸出

字元類

字元類是正則表示式的一個階段，允許您匹配特定字元 (A 或 Z) 或字元範圍 (A - Z)。例如，您想測試字串中是否存在 foo 和 zoo 這兩個詞中的任何一個，類允許您透過在正則表示式中使用方括號 [] 將字元放在其中來做到這一點。請檢視以下程式碼。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var regex_demo_1 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_1').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }
         
         var regex_demo_2 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_2').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_2_result').set('html', "Matched");
            } else {
               $('regex_2_result').set('html', "Not Match");
            }
         }
         
         var regex_demo_3 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_3').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_3_result').set('html', "Matched");
            } else {
               $('regex_3_result').set('html', "Not Match");
            }
         }
         
         window.addEvent('domready', function() {
            $('regex_1').addEvent('click', regex_demo_1);
            $('regex_2').addEvent('click', regex_demo_2);
            $('regex_3').addEvent('click', regex_demo_3);
         });
      </script>
   </head>
   
   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp 1: <input type = "text" id = "regex_match_1"/> 
      <input type = "button" id = "regex_1" value = "Match"/> 
      <Lable id = "regex_1_result"></Lable><br/><br/>
      
      Reg Exp 2: <input type = "text" id = "regex_match_2"/> 
      <input type = "button" id = "regex_2" value = "Match"/> 
      <Lable id = "regex_2_result"></Lable><br/><br/>
      
      Reg Exp 3: <input type = "text" id = "regex_match_3"/> 
      <input type = "button" id = "regex_3" value = "Match"/> 
      <Lable id = "regex_3_result"></Lable>
   </body>
   
</html>

您將收到以下輸出 -

輸出

escapeRegExp()

此方法用於在使用正則表示式檢查給定字串時忽略跳脫字元。通常，跳脫字元為 -

- . * + ? ^ $ { } ( ) | [ ] / \

讓我們舉個例子，其中我們有一個給定的字串，例如 "[check-this-stuff] it is $900"。如果您想獲取整個字串，則必須像這樣宣告它 - "\[check\-this\-stuff\] it is \$900"。系統僅接受此模式。我們在 MooTools 中不使用跳脫字元模式。我們有 escapeRegExp() 方法來忽略跳脫字元。請檢視以下程式碼。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var regex_demo_1 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_1').get('value');
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }
         
         var regex_demo_2 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_1').get('value');
            regex_value = regex_value.escapeRegExp();
            var test_result = test_string.test(regex_value);
            
            if (test_result){
               $('regex_2_result').set('html', "Matched");
            } else {
               $('regex_2_result').set('html', "Not Match");
            }
         }
         
         window.addEvent('domready', function() {
            $('regex_1').addEvent('click', regex_demo_1);
            $('regex_2').addEvent('click', regex_demo_2);
            $('regex_3').addEvent('click', regex_demo_3);
         });
      </script>
   </head>
   
   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp 1: <input type = "text" id = "regex_match_1" size = "6"/><br/><br/>
      <input type = "button" id = "regex_1" value = "With escapeRegExp()"/> 
      <Lable id = "regex_1_result"></Lable><br/><br/>
      <input type = "button" id = "regex_2" value = "Without escapeRegExp()"/> 
      <Lable id = "regex_2_result"></Lable><br/><br/>
   </body>
   
</html>

您將收到以下輸出 -

輸出

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.