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

htmljavascriptprogramming scripts

在本教程中,我们将学习如何简化 JavaScript 中正则表达式的使用。有些人是第一次听到正则表达式这个词。因此,它与 JavaScript 无关,但可以在任何编程语言中使用。

正则表达式的简单定义是它是一个字符序列,也称为RegexRegExp。它可以是一个小序列,也可以是一个复杂的序列。

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

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

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

要验证输入的电子邮件,一种方法是在代码中添加太多的 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 处匹配。

结论

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


相关文章