如何在JavaScript中简化正则表达式的使用?


在本教程中,我们将学习如何简化JavaScript中**正则表达式**的使用。一些人可能第一次听说正则表达式。它不只限于JavaScript,可以在任何编程语言中使用。

正则表达式的简单定义是:它是一系列字符,也称为**Regex**或**RegExp**。它可以是一个短小的序列,也可以是一个复杂的序列。

让我们通过以下部分的示例来了解正则表达式的必要性。

我们为什么要使用正则表达式?

假设您正在开发应用程序,需要从客户端获取用户的电子邮件。现在,用户可以在输入字段中输入任何内容,提交表单,并可能向您的数据库生成垃圾邮件记录。作为程序员,您可以在用户提交表单之前处理这个问题并验证电子邮件。此外,您可能在许多网站上看到过,如果您在电子邮件中出现语法错误并提交,它们会显示一条类似“图片无效。”的消息。

要验证输入的电子邮件,一种方法是在您的代码中添加过多的if-else条件,或者使用正则表达式来匹配字符串中的模式。通过使用正则表达式,我们可以创建各种模式,并将过多的if-else条件替换为单个正则表达式。

用户可以看到下面的正则表达式,用于验证电子邮件。

"^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$"

作为一名聪明的程序员,你不应该害怕看到上面的表达式。我们将深入研究正则表达式的运作方式,并简化其使用。

语法

用户可以遵循以下语法来使用正则表达式。

/pattern/moddifiers

正则表达式中的模式

有一些基本的模式可以创建正则表达式。一旦您学习了基本模式,就可以为正则表达式创建高级模式。

让我们逐一查看基本模式。

  • **[a-z]** - 它允许用户匹配括号中给定字符范围内的任何字符。此外,我们还可以为大写字母和其他字符添加范围。

  • **[0-9]** - 它允许用户匹配括号中给定数字范围内的任何数字。

  • **(a|b)** - 它允许查找用“|”分隔的任何备选字符串。例如,它在字符串中查找a或b。

  • **\d** - 它只接受数字。

  • **\s** - 它只接受空格。

  • **\b** - 它在单词的开头或结尾处查找匹配项。例如,\bword用于匹配单词的开头,而word\b用于匹配单词的结尾。

  • **a+** - 它匹配包含至少一个“a”的字符串。

  • **a*** - 它匹配包含0到无限个“a”的字符串。

  • **a?** - 它匹配包含零个或一个“a”字符的字符串。

正则表达式中的修饰符

正则表达式共有三个修饰符。让我们逐一查看。

  • **m** - 简而言之,它匹配多行。它不会在字符串末尾停止匹配,而是停止对换行符边界进行匹配。

  • **i** - 当我们设置修饰符i时,它执行不区分大小写的匹配,这意味着它匹配字符串而不考虑字符是大写还是小写。

  • **g** - 它全局匹配模式。否则,匹配将在模式的第一次出现时停止。当我们设置标志“g”时,它将匹配所有模式。

示例

在下面的示例中,我们创建了基本的正则表达式,并将匹配特定字符串中的模式。此外,我们将使用“i”作为修饰符来进行不区分大小写的匹配。

<!DOCTYPE html>
<html>
<head>
   <title> Simplify the usage of Regular Expressions with JavaScript. </title>
</head>
<body>
   <h2> Simplify the usage of Regular Expressions with JavaScript. </h2>
   <h4> Mathcing for word "Website" in the given original string.</h4>
   <div id="input"> </div>
   <div id="index"> </div>
   <script>
      let indexDiv = document.getElementById("index");
      let inputDiv = document.getElementById("input");
      let string = "TutorialsPoint is a website for tutorials. "
      let res = string.search(/Website/i); // regular expression passed as a parameter.
      inputDiv.innerHTML = "Original String: "+string;
      indexDiv.innerHTML = `Index of "Website": ` + res;
   </script>
</body>
</html>

在上面的输出中,用户可以看到“Website”在索引20处匹配。

结论

在本教程中,我们学习了正则表达式的基础知识。我们了解了如何在正则表达式中使用模式和修饰符。现在,用户可以轻松理解正则表达式,并且只需少量练习,他们就可以独立创建正则表达式。

更新于:2022年7月14日

240 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告