首页 > 文章列表 > 我如何简化使用JavaScript的正则表达式?

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

310 2023-09-15

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

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

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

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

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

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

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

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

作为一个聪明的程序员,看到上面的表达你不应该害怕。我们将深入了解正则表达式的工作原理,并简化正则表达式的使用。

语法

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

/pattern/moddifiers

正则表达式中的模式

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

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

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

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

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

  • - 它仅接受数字。

  • s - 它只接受空格。

  • b - 它查找单词开头或结尾的匹配项。例如,bword 匹配单词的开头,wordb 匹配单词的结尾。

  • a+ − 与至少包含单个 'a' 的字符串匹配。

  • a* − 与包含 0 到 'a' 的字符串匹配无限数量的“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 处匹配。

结论

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