在本教程中,我们将学习如何简化 JavaScript 中正则表达式的使用。你们中有些人是第一次听说正则表达式这个词。所以,它与JavaScript无关,但可以在任何编程语言中使用。
正则表达式的简单定义就是它是字符的序列,也称为Regex 或正则表达式。它可以是一个小的或复杂的序列。
让我们通过下面的示例来了解正则表达式的必要性。
要验证输入电子邮件,一种方法是在代码中添加太多 if-else 条件或使用正则表达式来匹配字符串中的模式。通过使用正则表达式,我们可以创建各种模式,并用单个正则表达式替换过多的 if-else 条件。
用户可以看到下面的正则表达式,以验证电子邮件。
"^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$"
作为一个聪明的程序员,看到上面的表达你不应该害怕。我们将深入了解正则表达式的工作原理,并简化正则表达式的使用。
使用时可以遵循以下正则表达式语法。
/pattern/moddifiers
有一些创建正则表达式的基本模式。一旦学习了基本模式,您就可以为正则表达式创建高级模式。
让我们一一看看基本模式。
[ a - z ] - 它允许用户匹配括号中给出的字符范围之间的任何字符。此外,我们可以添加大写字母和其他字符的范围。
[ 0 -9 ] - 它允许用户匹配之间的任何数字括号中给出的数字范围。
( a | b ) - 它允许查找以“|”分隔的任何替代字符串。例如,它在字符串中查找 a 或 b。
d - 它仅接受数字。
li>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 处匹配。
在本教程中,我们学习了正则表达式的基础知识。我们已经了解了如何在正则表达式中使用模式和修饰符。现在,用户可以轻松理解正则表达式,并且通过一些小练习,就可以独立创建正则表达式。