飞码网-免费源码博客分享网站

点击这里给我发消息

JavaScript中的正则表达式|-JavaScript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

本文已于2016年6月2日更新,以添加CodePen演示,更新代码示例,重写结论并修复格式问题。

如果您曾经用Perl编程,或者必须是Unix系统管理员,那么您可能已经不仅仅对正则表达式有所了解但是,即使您对Perl像意大利面条一样,并且您觉得管理Unix系统的人不仅仅只有凡人,JavaScript包含对Perl样式正则表达式的支持也是一个好消息……相信我!

在本文中,我将首先解释正则表达式是什么以及它们可以为您做什么。然后,我将概述正则表达式的最常见功能(读者中的Perl爱好者可以放心地跳过它们)。最后,我将通过一两个实际的示例来帮助概念化,以解释JavaScript中如何使用正则表达式。到本文结束时,您可能仍然只是凡人,但您肯定可以通过新获得的文字处理技巧在聚会上留下深刻的印象!

这些是什么?

正则表达式使用特殊的代码(起初有些混乱)来检测模式在文本字符串中。例如,如果要向访客显示HTML表单以输入其详细信息,则您的电话号码可能只有一个字段。现在让我们面对现实:某些站点访问者比其他站点的访问者更擅长遵循说明。即使您在文本字段旁边添加了一些提示,指示所需的电话号码格式(例如,北美号码为“(XXX)XXX-XXXX”),也有些人会弄错它。编写脚本检查输入的字符串的每个字符,以确保所有数字都属于它们的位置,并在正确的位置加上括号和短划线,这将是一段相当繁琐的代码。电话号码是一个相对简单的情况!如果您必须检查用户确实输入了电子邮件地址,或者更糟的是URL,该怎么办?

正则表达式提供了一种将字符串匹配到模式的快速简便的方法。在我们的电话号码示例中,我们可以编写一个简单的正则表达式,然后使用它快速检查一下任何给定的字符串是否是格式正确的电话号码。处理完一些技术细节后,我们将进一步研究该示例。

他们看起来怎么样?

正则表达式有时看起来可能很复杂,但是当涉及到正则表达式时,它们实际上只是文本字符串本身。例如,以下是一个正则表达式,用于搜索文本“ JavaScript”(不带引号):

JavaScript

没什么大不了的吗?包含文本“ JavaScript”的任何字符串都被称为此正则表达式匹配因此,此正则表达式使我们能够检测到包含此特定文本字符串的字符串。好吧,坏消息是它并不总是那么简单。

如上所述,在正则表达式中可能会使用特殊的代码。其中一些可能会让人一头雾水,难以记住,因此,如果您打算广泛使用它们,则不妨为自己找到一个很好的参考。幸运的是,JavaScript支持与Perl完全相同的正则表达式语法,并且有很多网站都在介绍Perl正则表达式。更好的之一是在这里。Perl官方手册中也提供了文档。两者在某些地方都是神秘的,因此您可能需要一次引用它们。

让我们通过一些示例来学习基本的正则表达式语法。

基本语法

首先,^可以使用插入号()指示字符串的开头,而使用美元符号($)标记字符串的结尾:

JavaScript   // Matches "Isn't JavaScript great?" 
^JavaScript  // Matches "JavaScript rules!", 
             //  not "What is JavaScript?" 
JavaScript$  // Matches "I love JavaScript",
             //  not "JavaScript is great!" 
^JavaScript$ // Matches "JavaScript", and nothing else

显然,您有时可能想使用^$或其他特殊字符来表示搜索字符串中的相应字符,而不是使用正则表达式语法所隐含的特殊含义。要删除字符的特殊含义,请在其前面加上反斜杠:

\$\$\$      // Matches "Show me the $$$!"

方括号可用于定义一组可能匹配的字符。例如,以下正则表达式将匹配1到5之间的任何数字。

[12345]     // Matches "1" and "3", but not "a" or "12"

也可以指定数字和字母的范围。

[1-5]       // Same as the previous example 
[a-z]       // Matches any lowercase letter (from the English alphabet)
[0-9a-zA-Z] // Matches any letter or digit

通过在^方括号后面紧跟一个,您可以反转字符集,这意味着该字符集将与未列出的任何字符匹配:

 

 

[^a-zA-Z]   // Matches anything except a letter

字符?+*也具有特殊含义。具体地,?意味着“前一个字符是可选的”,+意味着“前一个字符中的一个或多个”,并且*意味着“前一个字符中的零个或多个”。

bana?na     // Matches "banana" and "banna", 
            // but not "banaana". 
bana+na     // Matches "banana" and "banaana", 
            // but not "banna". 
bana*na     // Matches "banna", "banana", and "banaaana", 
            // but not "bnana". 
^[a-zA-Z]+$ // Matches any string of one or more 
            // letters and nothing else.

括号可用于组字符串一起施加?+*将它们作为一个整体。

ba(na)+na   // Matches "banana" and "banananana", 
            // but not "bana" or "banaana".

圆括号还允许您使用竖线(|)字符将它们定义为多个可能匹配的字符串

^(ba|na)+$  // Matches "banana", "nababa", "baba", 
            // "nana", "ba", "na", and others.

以下是一些特殊代码,可用于匹配正则表达式中的字符:

 
.       // Any character except a newline 
\n      // A newline character 
\r      // A carriage return character 
\t      // A tab character 
\b      // A word boundary (the start or end of a word) 
\B      // Anything but a word boundary 
\d      // Any digit (same as [0-9]) 
\D      // Anything but a digit (same as [^0-9]) 
\s      // Single whitespace (space, tab, newline, etc.) 
\S      // Single nonwhitespace 
\w      // A "word character" (same as [A-Za-z0-9_]) 
\W      // A "nonword character" (same as [^A-Za-z0-9_])

请注意,与我们之前看过的特殊字符相反,某些字符(如上述字符)需要使用反斜杠转义才能被视为特殊代码。

正则表达式还有更多特殊的代码和语法技巧,所有完整的参考资料都应涵盖所有这些内容。就目前而言,我们的目标已经绰绰有余。

在JavaScript中使用正则表达式

在JavaScript中使用正则表达式是如此简单,以至于使更多的人不知道可以做到这一点,这是一个奇迹。您可以按照以下方式在JavaScript中创建正则表达式:

var myRE = /regexp/;

如上所述,其中regexp是正则表达式代码。例如,以下代码创建了我在上一节中介绍的第一个示例正则表达式,该正则表达式检测字符串“ JavaScript”:

var myRE = /JavaScript/;

同样,下面是创建最后一个示例的方法:

var myRE = /^(ba|na)+$/;

默认情况下,JavaScript正则表达式区分大小写,并且仅搜索任何给定字符串中的第一个匹配项。通过在第二个之后添加g(for global)和iforignore case)修饰符/,可以使正则表达式分别搜索字符串和忽略大小写中的所有匹配项。这是一些正则表达式示例。对于每一个,我已经指出了"test1 Test2 TEST3"它们将匹配字符串的哪一部分

正则表达式 比赛:
/测试[0-9] + / 仅“ Test2”
/测试[0-9] + / i 仅“ test1”
/测试[0-9] + / gi “ test1”,“ Test2”和“ TEST3”

使用正则表达式很容易。包含一个文本字符串每个JavaScript变量支持三种方法(或功能,如果你不使用面向对象的术语)的使用正则表达式:match()replace(),和search()

match()

match()使用正则表达式作为参数,并返回在考虑中的字符串中找到的所有匹配字符串的数组。如果未找到匹配项,则match()返回false。回到我们的原始示例,假设我们想要一个可以检查用户作为其电话号码输入的字符串的格式为(XXX)XXX-XXXX的函数。以下代码可以解决问题:

function checkPhoneNumber(phoneNo) {
  var phoneRE = /^\(\d\d\d\) \d\d\d-\d\d\d\d$/; 
  if (phoneNo.match(phoneRE)) {
    return true; 
  } else {
    alert( "The phone number entered is invalid!" );
    return false;
  }
}

作为首要任务,此函数定义一个正则表达式。让我们对其进行分解,以了解其工作原理。正则表达式以开头^,表示任何匹配项都必须从字符串的开头开始。接下来是\(,它将与左括号匹配。我们在字符前加上反斜杠,以消除其在正则表达式语法中的特殊含义(以标记用于匹配的一组替代项的开始)。如前所述,\d是一个可以与任何数字匹配的特殊代码。因此,\d\d\d匹配任意三个数字。我们本来可以[0-9][0-9][0-9]达到相同的效果,但这要短一些。模式的其余部分应该很容易解释。\)匹配右括号,空格匹配电话号码中必须保留的空格,然后\d\d\d-\d\d\d\d匹配三位数,后跟破折号,匹配四位数。最后,$表示任何匹配项必须在字符串的末尾结束。

 

 

顺便说一句,通过使用上面没有提到的另一个快捷方式,我们可以将此正则表达式缩短为以下形式。如果您知道它是如何工作的,那您自然而然!

var phoneRE = /^\(\d{3}\) \d{3}-\d{4}$/;

然后,我们的函数将检查是否phoneNo.match(phoneRE)等于truefalse换句话说,它检查其中包含的字符串是否phoneNo与我们的正则表达式匹配(从而返回一个数组,在JavaScript中该数组将求值为true)。如果检测到匹配项,我们的函数将返回true以证明该字符串确实是电话号码。如果不是,则会显示一条消息,警告您出现问题,然后函数返回false

这种功能最常见的用途是在提交表单之前验证用户对表单的输入。通过onSubmit在表单事件处理程序中调用我们的函数,如果输入的信息格式不正确,我们可以防止提交表单。这是一个简单的示例,演示了我们checkPhoneNumber()函数的使用

<form action="...">
  <label>Enter phone number (e.g. (123) 456-7890): 
    <input type="text" name="phone">
  </label>
  <input type="submit">
</form>

<script>
  var form = document.querySelector('form');
  form.addEventListener('submit', function() {
    return checkPhoneNumber(this.phone.value);
  });
</script>

除非输入了电话号码,否则用户将无法提交此表单。任何尝试这样做都会产生由我们的checkPhoneNumber()函数生成的错误消息

 

replace()

顾名思义,replace()您可以使用一些新字符串替换匹配给定正则表达式的内容。假设您是一个拼写坚果,并且想在“ E之前,C之后”之前执行一句古老的格言,以更正诸如“ acheive”和“ lacing”的拼写错误。我们需要的是一个接受字符串并执行两个搜索和替换操作的函数。第一种是将“ cie”替换为“ cei”。

这是代码:

theString = theString.replace(/cie/gi,"cei");

很简单,对不对?第一个参数是我们要搜索的正则表达式(请注意,我们已将其设置为“忽略大小写”并设置为“全局”,以便它可以找到所有出现的对象,而不仅仅是第一个),第二个参数是我们要用来替换任何匹配项的字符串。

第二种替代方法稍微复杂一些。我们要用“ xie”代替“ xei”,其中“ x”是除“ c”以外的任何字母。用于检测“ xei”实例的正则表达式非常容易理解:

/[abd-z]ei/gi

它仅检测除“ c”(包括“ a”,“ b”和“ d”至“ z”)之外的任何字母,后跟“ ei”,并以不区分大小写的全局方式进行。

定义我们的替换字符串很复杂。显然,我们想用“ xie”代替比赛,但难点是写“ x”。请记住,我们必须用匹配字符串中出现的任何字母替换“ x”。为此,我们需要学习一个新的技巧。

之前,我向您展示了如何使用括号在正则表达式(例如^(ba|na)+$)中定义一组替代项事实证明,括号也有另一种含义。他们让我们“记住”匹配的一部分,以便我们可以在替换字符串中使用它。在这种情况下,我们要记住匹配项[abd-z]中与正则表达式相对应的部分因此,我们用括号括起来:

/([abd-z])ei/gi

现在,当指定替换字符串时,我们将$1要插入字符串的部分与正则表达式的括号部分相对应。因此,用于执行所需替换的代码如下:

theString = theString.replace(/([abd-z])ei/gi,"$1ie");

综上所述,这是执行我们的自动校正的完整功能:

function autoCorrect(theString) { 
  theString = theString.replace(/cie/gi,"cei"); 
  theString = theString.replace(/([abd-z])ei/gi,"$1ie"); 
  return theString; 
}

 

 

在继续使用页面上的此功能之前,请了解“ I在E之前,C之后在”之外的规则是有例外的。奇怪吧?

search()

search()函数与众所周知的indexOf()函数相似,不同之处在于它使用正则表达式而不是字符串。然后,它在字符串中搜索与给定正则表达式的第一个匹配项,并返回一个整数,指示字符串中的位置(例如,如果匹配在字符串的开头,则返回0;如果匹配以字符串中的第10个字符开头,则返回9 )。如果找不到匹配项,则该函数返回值-1。

var theString = "test1 Test2 TEST3";
theString.search(/Test[0-9]+/); // 6

总结一下

正则表达式是验证用户输入的宝贵工具。通过利用JavaScript中对正则表达式的支持,可以在输入数据时进行验证,从而提供更流畅的用户体验(注: 服务器端验证对于安全性仍然是必需的,并且还可以满足JavaScript不可用的情况。

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: