JavaScript 中的正则表达式：速查表
字符串的开头和结尾
量词
OR 运算符
团体
这本书
结论
正则表达式是每个开发人员工具箱中都应该拥有的强大工具，但有时，由于使用它们需要一定的知识，它们会让人觉得晦涩难懂，甚至像是高级开发人员的工具。
虽然这说法有一定道理，但我认为所有开发者都应该掌握正则表达式的使用方法。虽然速查表并不能解决你在这方面的所有问题，但它确实能帮助你入门！
在这份简明指南中，我将介绍一些我最喜欢的正则表达式功能，希望能让您了解它们的实用性。
对了，在我们开始之前，如果您还不知道的话，这里有一个很棒的网站，可以帮助您测试正则表达式而无需编写任何代码：www.regex101.com。他们的网站可以让您针对不同类型的输入测试您的表达式，并将结果绘制成图表，准确地显示哪些部分匹配，哪些部分不匹配。
字符串的开头和结尾
从基础知识开始：您可以在表达式中使用不同的指示符，以确保匹配的内容是字符串的开头或结尾。
换句话说，如果您要在类似“this is it, this is what you were looking for, this is it”这样的字符串中查找单词“this ”，那么像这样的表达式将匹配该单词的所有出现位置：
let myStr = "this is it, this is what you were looking for, this is it"
let expression = /this/g
console.log(myStr.match(expression))
这段代码会匹配所有三个这样的字符，但是如果你只想匹配第一个，因为它位于字符串的开头，你可以使用一个^字符。同样地，如果你想匹配字符串的最后一个$，你可以使用一个字符来指示你要在字符串末尾查找匹配项。让我来演示一下：
let myStr = "this is it, this is what you were looking for, this is it"
let expression2 = /^this/g
let expression3 = /it$/g
console.log(myStr.match(expression2))
console.log(myStr.match(expression3))
注意我是如何在正确的位置使用^and 的$，它们不能随意放置，但如果你把它们放在比赛的开始或结束位置，引擎就会理解你想做什么，并在正确的位置正确查找你的字符串。
量词
量词是一种强大的修饰符，它允许您指定表达式中某个部分可以匹配的次数。这使您可以指定表达式中的可选部分，甚至可以指定需要重复多次的部分（次数没有限制）。
例如，如果您想匹配 ISO 格式的日期字符串，可以使用类似这样的方法：
\[0-9\]{4}-\[0-9\]{2}-\[0-9\]{2}
中间的量词{}告诉正则表达式引擎在每种情况下要匹配多少个数字。你也可以像这样使用不太具体的量词：
{x,} matches **at least** x times (could be more)
{x,y} matches between x and y times
\* matches none or any amount of times (essentially, optional)
\+ matches 1 or more times, the same as doind {1,}
OR 运算符
另一个非常有趣的逻辑是，你可以向正则表达式中添加逻辑 OR 运算符，使其更加灵活。
有了它，你可以让表达式的某些部分可以匹配多个选项之一，例如：
let myRegExp = /#(?:[a-fA-F0–9]{6}|[a-fA-F0–9]{3})/g
let hexColors = [
"#fff", //valid
"#FEFEFE", //valid
"#999ccc", //valid
"fefefe", //not valid
"#i0i0i0" //not valid
]
hexColors.forEach(hex => {
console.log(`Checking ${hex} = ${!!hex.match(myRegExp)}`)
})
注意|表达式中间的逗号。我们实际上是在编写一个正则表达式，它可以同时处理两种有效的十六进制颜色值。简单来说，这段代码的输出结果是：
Checking #fff = true
Checking #FEFEFE = true
Checking #999ccc = true
Checking fefefe = false
Checking #i0i0i0 = false
此外，该match方法实际上会返回一个匹配项数组，null如果没有找到匹配项，则返回空值。不过，在这里，我将其转换为 true 或 false 字符串，这得益于 JavaScript 可以将null值强制转换为假值，将数组强制转换为真值，然后只需简单地强制转换为字符串即可将这些值转换为实际的“true”或“false”字符串。强制转换为布尔值是通过在!!调用前加上前缀来实现的match。
团体
分组是处理匹配表达式各个部分的强大工具。但如果您只是想检查是否存在匹配项（如上例所示），那么分组实际上并不能带来太多帮助。
但是，如果您要替换字符串中的复杂部分，或者只是想从匹配项中提取一部分用于表达式之外的内部逻辑，那么分组就是一个很好的工具。
在正则表达式中，分组很容易识别，因为它们由括号定义。例如，假设你想获取字符串中所有 HTML 标签的名称（例如，从 `<body>` 中获取“body”，<body>或者从 `<html>` 中获取“html” </html>）。为此，你需要向表达式添加 `<body>`<和`<html>`>字符，因为你想确保只匹配 HTML 标签，但只获取标签内的名称：
let nameExp = /<\/?([a-z0-9]+) *\/?>/gi
let htmlCode = "<html><body><H1>This is big!</h1></body></html>"
let match = null
while( match = nameExp.exec(htmlCode)) {
console.log(`Tag found: ${match[1]}`)
}
这段代码的输出结果是：
Tag found: html
Tag found: body
Tag found: H1
Tag found: h1
Tag found: body
Tag found: html
注意表达式内部的分组，它只捕获字母数字字符（因为我们指定了从 a 到 z 和 0 到 9 的范围）。然后，我们允许有可变数量的空格，尽管它们没有被捕获到分组内，并且在分组前后，我们有可选/字符（注意我是如何在每个字符后面添加的?）。
最后，由于我在表达式末尾使用了标志，我们可以匹配大写和小写标签以及它们的任意组合（我使用该i标志来忽略匹配时的大小写）。
这本书
如果您觉得这些技巧和窍门有用，并且想了解更多信息，我写了一本完整的小册子（大约 80 页，所以称其为书有点牵强），涵盖了您想了解的有关 JavaScript 中正则表达式的所有内容。
本书包含了你所需的所有技术信息，但其关键在于我精心设计了一系列练习，帮助你理解如何用正则表达式的思维方式思考。这意味着你将完成必要的认知转换，从而将这些知识应用到你实际的问题中。本书旨在引导你用正则表达式的思维方式进行思考和推理，而不仅仅是提供信息让你自行摸索。
因为我是自出版，所以我非常希望您能看看这本书，并告诉我您的想法！您可以在Kindle 商店找到电子书版本，平装版也将很快上市。
如果您想了解更多关于这本书的信息，可以点击这里查看更多详情。
结论
抛开书籍不谈，正则表达式是非常强大的工具，有些应用场景简直就是为它们量身打造的。正因如此，我总是努力向所有开发者，无论是经验丰富的开发者还是新手，推广正则表达式的使用，让他们都能掌握并充分利用这些工具。
如果你是正则表达式新手，请在下方留言告诉我这些技巧是否对你有用，或者你有什么疑问，我很乐意帮忙！
如果你之前和他们打过交道，请留言说说你和他们一起解决过的最复杂的问题。读到这些留言总是很有趣！
玩得开心，继续编程吧！
文章来源：https://dev.to/deleteman123/regular-expressions-in-javascript-a-cheatsheet-4hn5