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>

您将收到以下输出 -

输出

打印页面
上一页
下一页
广告