正则表达式
认真学习了正则表达式之后才理解到正则表达式的强大之处，于是在这里记录一下自己的学习过程，并由浅至深地总结一下。
创建正则表达式的方法
- 两个正斜杠
const regex = /dog/
- 使用 RegExp 构造函数
cosnt regex = new RegExp('dog')
创建对象后，可以在对象上调用 test 方法，方法得到字符串后，如果模式匹配，则返回 true
regex.test('dog') // true
regex.test('hot-dog') // true
简单模式
像上面的示例，就是简单模式
特殊字符
除了寻找某个字符串的简单出现，还可以做更多的事情。一种方法是使用特殊字符。它们不会被解释为被搜索字符串的直接内容，但能够以通用的方式对其进行描述。
任何字符
它由一个点 . 表示，用来匹配住了换行符以外的任何单个字符
cosnt regex = /.og/
regex.test('fog') // true
regex.test('dog') // true
反斜杠
用来转义特殊字符
字符集
用方括号 [ ] 表示，用来匹配一个字符，该字符可能是括号中的任何字符
/[dfl]og/.test('dog') // true
/[dfl]og/.test('fog') // true
/[dfl]og/.test('log') // true
需要注意的是字符集内的特殊字符（如点 .）不再特殊，因此在这里不再需要反斜杠。我们甚至可以进一步定义一些字符：
/[A-z]/.test('a')
/[A-z]/.test('z')
可以通过添加 ^ 符号轻松获得否定字符集，它会匹配方括号中未包含的所有内容
/[^df]og/.test('dog') // false
/[^df]og/.test('log') // true
一个重要的注意事项：[A-z] 范围实际上将匹配多个字母。正如你在 ASCII 表上看到的那样，[A-z] 也将与符号[、 \、 ]、 ^、 _ 和 ` 相匹配，所以请谨慎使用 [A-Za-z]，而是使用标志来忽略大小写。
多次重复
一个非常有用的功能是匹配某个表达式出现的确切字数。可以用花括号 ( ) 来实现
例：检查字符串是否为有效的电话号码，以 +xx xxx xxx xxx 格式为例
function isPhoneNumber (number) {
return /\+[0-9]{2} [0-9]{3} [0-9]{3} [0-9]{3}/.test(number)
}
isPhoneNumber('+12 123 123 123') // true
isPhoneNumber('123212') // false
其中，在此处进行了一些自定义
(x)完全匹配 x 次出现(x,)至少匹配 x 次(x, y)至少匹配 x 次且不超过 y 次
零个或多个重复
带有星号 * 的表达式可以匹配 0 次或更多次，实际上等效于 (0, )
例可以匹配任意数量字符的模式：/.*/
标志
标志是一种影响搜索的修饰符。如果用斜杠定义正则表达式的话，就在斜杠后添加它们。如果用 RegExp 构造函数，则将它们作为第二个参数。最重要的标志是：
i: 忽略大小写
使用这个标志，搜索时不区分大小写
/dog/i.test('dog') // true
new RegExp('dog', 'i').test('DoG') //true
g: 全局匹配
使用这个标志，所有匹配项都能够被找到。如果没有它，将会在找到第一个匹配项后停止。
String.prototype.replace
使用 g 标志对字符串进行全局搜索并替换
const lorem = 'lorem_ipsum_dolor_sit_amet'
lorem.replace('_', ' ') // 'lorem ipsum_dolor_sit_amet'
lorem.replace(/_/g, ' ') // 'lorem ipsum dolor sit amet'
定义重复的较短方法
一次或多个重复
使用加号 + ，表示该表达式可能匹配一次或多次。类似于星号，但必须至少匹配一次。等效于 {1, }。
/1+23/.test('123') // true
/1+23/.test('111123') // true
/1+23/.test('23') // false
例子：检查一个字符串是否包含另一个子字符串，但是不以他结尾
function hasQuestionMarkBeforeEnd (string) {
return /\?.+/.test(string)
}
hasQuestionMarkBeforeEnd('Do you know regex yet?') // false
hasQuestionMarkBeforeEnd('Do you know regex yet? Yes, I do!') // true
此处问号 ? 是一个特殊字符，所以要转义
可选字符
综上所述，问号是一个特殊字符。使用它可以创建带有可选字符的模式，它相当于 {0, 1}
function wereFilesFound (string) {
return /[1-9][0-9]* files? found/.test(string)
}
wereFilesFound('0 files found') // false
wereFilesFound('no files found') // false
wereFilesFound('1 files found') // true
wereFilesFound('10 files found') // true
用较短的方法定义一组可能出现的字符
之前我们使用方括号 [] 来定义一组可能出现的字符。在正则表达式中，可以参考一些实现的集合
字母数字字符
如果想要匹配所有字母和数字字符，则需要这样的模式：/[A-Za-z0-9_]/ 。有点小蠢，不过有一种更短的方法：\w
需要注意的是，这不能匹配任何特定语言的字符
非字母数字字符
与上述模式相反：/^[A-Za-z0-9_]/ 等价于 \W。同样不能处理任何特定语言的字符
function isAlphanumberic (string) {
return /\W/.test.(string)
}
function isNotAlphanumberic (string) {
return /\W/.test(string)
}
isAlphanumberic('Ó') // false
isNotAlphanumberic('Ó') // true
处理数字
之前我们了解到要匹配任何数字，我们可以使用类似 [0-9] 的模式，还可以用 \d 。它能够匹配任何数字：
isItADigit(string) {
return /\d/.test(string)
}
isItADigit('5') // true
isItADigit('a') // false
处理空格
在字符串中，有几种类型的空格字符
- 空格
' ' - tab
'\t' - 新行
'\n' - 回车符
'\r'
要创建一个匹配所有情况的模式，需要类似这样的复杂内容：/[\t\n\r]/。不过，有一种更简单的方法，它涉及使用 \s
function containWhitespace (string) {
return /\s/.test(string)
}
containWhitespace('Lorem ipsum') // true
containWhitespace('Lorem_ipsum') // false
另外，\S 可以匹配任何非空白字符
指定位置
到目前为止，只是在写单纯可以在字符串中进行匹配的模式。我们还可以指定为止使匹配更精确
插入符号
如果在模式的开头添加 ^ 符号，则仅当被测试的字符串以该模式开头时，它才会匹配
/^dog/.test('dog and cat') // true
/^dog/.test('cat and dog') // false
请注意，插入符号用在方括号中时有另外的作用（取反），具体可以网上翻翻
美元符号
在模式的末尾添加一个美元符号，仅当它出现在字符串的末尾时，才会匹配：
/dog$/.test('dog and cat') // false
/dog$/.test('cat and dog') // true
结合两个标志
当模式以 ^ 开头，并以 $ 结尾，则仅当测试的字符串整体匹配时，它才会匹配
/success/.test('Unsuccessful operation') // true
/^success$/.test('Unsuccessful operation') // false
多行模式
我们知道可以将其他标志添加到模式中，其中之一是由字母 m 表示的多行标志，它改变了插入符号和美元符号的含义。在多行模式下，它们代表一行的开头和结尾，而不是整个字符串
const pets = `
dog
cat
parrot and other birds
`
/^dog$/m.test(pets) // true
/^cat$/m.test(pets) // true
/^parrot$/m.test(pets) // false
由于使用了多行标志，因此是测试了多个行，而不测试整个字符串。
高级一点的概念
到现在为止，我们已经介绍了许多正则表达式的功能，但是还有更多，这次我们将学习一些更高级的概念，例如搜索和覆盖 JavaScript 中 RegExp 对象的更多功能。
exec
这是一种执行搜索字符串中的匹配项的方法（类似于 test 方法），但是它返回的结果是数组（或 null）。其结果还有其他一些属性，例如 index 和 input
const string = 'fileName.png, fileName2.png, fileName3.png'
const regexp = /fileName[0-9]?.png/g
regexp.exec(string)
[
0: "fileName.png",
index: 0,
input: "fileName.png, fileName2.png, fileName3.png"
]
index 是匹配项的位置，input 是提供的字符串，需要注意的是，我们在这里使用的是 global 标志，所以我们可以通过多次调用 exec 在字符串中寻找多个匹配项。它将 RegExp 对象的 lastIndex 属性设置为一个数字，该数字指示搜索停止的位置
let resultArray
while ((resultArray = regexp.exec(string)) !== null) {
console.log(resultArray[0], regexp.lastIndex)
}
// fileName.png 12
// fileName.png 27
// fileName.png 42
正则表达式中的分组
使用正则表达式，不仅可以检查字符串是否匹配，还可以在忽略不必要字符的同时提取某些信息。可以使用带有圆括号的分组
function getDateFromString (dateString) {
const regexp = /([0-9]{2})-([0-9]{2})-([0-9]{4})/
const result = regexp.exec(dataString)
if (result) {
return {
day: result[1],
month: result[2],
year: result[3]
}
}
}
getDateFromString('14-05-2018')
{
day: '14',
month: '05',
year: '2018'
}
在这种情况下，我们提取了三组字符，而忽略了破折号，只需注意 result[0] 将是匹配的完整字符串
已经有一个处于第 4 阶段的命名组提案
嵌套分组
function getDateFromString (dateString) {
const regexp = /[0-9]{2}-[0-9]{2}-([0-9]{2}([0-9]{2}))/
const result = regexp.exec(dataString)
if (result) {
return {
year: result[1],
yearShort: result[2],
}
}
}
getDateFromString('14-05-2018')
{
year: '2018',
yearShort: '18'
}
在模式的 ([0-9]{2}([0-9]{2})) 部分中，我们将一组嵌套在另一组中。于是，我们得到了表示年份的短字符串
条件模式
还有另一个有用的功能，即OR 语句，可以用 | 字符实现
function doYearsMatch (firstDateString, secondDateString) {
const execResult = /[0-9]{2}-[0-9]{2}-([0-9]{4})/.exec(firstDateString)
if (execResult) {
const year = execResult[1]
const yearShort = year.substr(2, 4)
return RegExp(`[0-9]{2}-[0-9]{2}-(${year}|${yearShort})`).test(secondDateString)
}
}
doYearsMatch('14-05-2018', '12-02-2018') // true
doYearsMatch('12-05-2018', '24-04-18') // true
按照我们的模式，(${year}|${yearShort}) 将会匹配年份，即使第二个年份以简短形式提供
全部捕获
与组一起工作时，还有一个特别有用的地方：(.*)
function getResolution (resolutionString) {
const execResult = /(.*) ?x ?(.*)/.exec(resolutionString)
if (execResult) {
return {
width: execResult[1],
height: execResult[2]
}
}
}
getResolution('1024x768')
{
width: '1024',
height: '768'
}
因为 ? 的存在，可以消除乘号左右空格的影响
粘性标志（sticky）
RegExp 对象有一个名为 lastIndex 的属性，当进行全局搜索（使用适当的标志）时，可以在正确的位置继续进行模式匹配。使用 ES6 中引入的粘性标志 y ，可以强制从某个索引开始搜索
function getDateFromString (dateString) {
const regexp = /([0-9]{2})-([0-9]{2})-([0-9]{4})/y
regexp.lastIndex = 14
const result = regexp.exec(dateString)
if (result) {
return {
day: result[1],
month: result[2],
year: result[3]
}
}
}
getDateFromString('Current date: 14-05-2018')
要记住的是，对字符串执行检查（例如使用
exec）会更改lastIndex属性，所以如果你希望它在多次粘性搜索之间保持不变，请不要忘记对其进行设置。如果模式匹配失败，则将lastIndex设置为 0
- 注意：可以检查
RegExp对象是否启用了标志
const regexp = /([0-9]{2})-([0-9]{2}-([0-9]{4))/y
regexp.lastIndex = 14
console.log(regexp.sticky) // true
其他标志也是如此，更多标志点这里
Unicode 标志
ES6 也带来了对 Unicode 的更好支持。添加 Unicode 标志 u 可以启用与 Unicode 相关的其他功能
例：
/\u{24}/u.test('$') // true
以上代码如果没有 u 标志将会无法工作，重要的是要知道它的影响不仅限于此，如果不带标志，也可以处理一些更特殊的 Unicode 字符
/😹/.test('😹') // true
但像下面这种复杂一点的情况就不行了
/a.b/.test('a😹b') // false
/a.b/u.test('a😹b') // true
/😹{2}/.test('😹😹') // false
/😹{2}/u.test('😹😹') // true
/[a😹b]/.test('😹') // false
/[😹🐶]/u.test('😹') // true
/^[^x]$/.test('😹') // false
/[^x]/.test('😹') // true
/^[^x]$/u.test('😹') // true
/^[ab😹]$/.test('😹') // false
/[ab😹]/.test('😹') // true
/^[ab😹]$/u.test('😹') // true
有趣的是，在 HTML 中 input 和 textarea 元素的 pattern 属性中，默认情况下启用此标志。
扫一扫
48
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
