Mootools-regular-expression

提供:Dev Guides
移動先:案内検索

MooTools-正規表現

MooToolsは、正規表現(regex)を作成および使用する方法を提供します。 このチュートリアルでは、正規表現の基本と極端な使用法について説明します。

正規表現のいくつかの方法について説明しましょう。

テスト()

test()は、入力文字列で正規表現をテストするために使用されるメソッドです。 JavaScriptは既にtest()関数とともにRegExpオブジェクトを提供していますが、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>

次の出力が表示されます-

出力

ケースを無視

これは、正規表現の概念における重要な状況の1つです。 正規表現で大文字と小文字を区別したくない場合は、オプション「 I 」を使用してテストメソッドを呼び出します。 正規表現の無視のケースを説明する例を見てみましょう。 次のコードを見てください。

<!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"/>&nbsp
      <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>

次の出力が表示されます-

出力