讲给前端的正则表达式(1)：基本概念

时间 2019-12-21

原文原文链接

做者：wanago_io
翻译：疯狂的技术宅javascript

原文：https://wanago.io/2018/04/30/...前端

正则表达式（regex）是定义搜索模式的字符序列。因为对程序员的平常工做很是有用，因此在 JavaScript 中也支持它。在这个系列文章中，我会向你展现其工做方式以及其实际用途。但愿在结束本系列后，你将可以轻松的写出本身的正则表达式。java

建立正则表达式的方法

在 JavaScript 中能够经过两种方式去构造正则表达式。要彻底理解它，你须要知道正则表达式包含在两个正斜杠中。尽管这并非模式中的一部分，但它们用来指示模式的开始和结束。经过它们能够告诉 JS 解释器它正在处理正则表达式：程序员

const regex = /dog/;

另外一种方式是使用 RegExp 构造函数：面试

const regex = new RegExp('dog');

建立对象以后，你能够在对象上调用 test 方法，方法获得字符串后，若是模式匹配，则返回 true：正则表达式

regex.test('dog'); // true
regex.test('hot-dog'); // true

简单模式

这是正则表达式最简单的类型。可以直接在字符串中找到匹配的类型。 /dog/ 仅在字符以相同顺序一块儿出现时才会匹配。express

/dog/.test('hot-dog'); // true
/dog/.test('do games'); // false

可是正则表达式的功能毫不会这么简单。在许多状况下你可能会但愿使用更复杂的模式。segmentfault

特殊字符

除了寻找某个字符串的简单出现，还能够作更多的事情。一种方法是使用特殊字符。它们不会被解释为被搜索字符串的直接内容，但可以以通用的方式对其进行描述。微信

任何字符

它由一个点 . 表示。用来匹配除了换行符之外的任何单个字符。多线程

const regex = /.og/;
regex.test('fog'); // true
regex.test('dog'); //true

通配符是特殊字符之一。若是想要匹配的是一个点 . 字符该怎么办？

反斜杠

反斜杠 / 用于将特殊字符的含义切换为普通字符。因此是能够在文本中搜索点 . 字符的，而且这个点不会被解释为特殊字符。

const regex1 = /dog./;
regex1.test('dog.'); // true
regex1.test('dog1'); // true
 
const regex2 = /dog\./;
regex1.test('dog.'); // true
regex1.test('dog1'); // false

字符集

用方括号 [ ] 表示。这个模式用来匹配一个字符，该字符多是括号中的任何字符。

/[dfl]og/.test('dog'); // true
/[dfl]og/.test('fog'); // true
/[dfl]og/.test('log'); // true

须要注意的是字符集内的特殊字符（如点 .）再也不特殊，所以在这里再也不须要反斜杠。咱们甚至能够进一步定义一些字符：

/[A-z]/.test('a'); // true
/[A-z]/.test('Z'); // true

请注意，在字母范围方面，大写字母优先。这意味着 /[a-Z]/ 会引起错误。

const pattern = /[a-Z]/;

Uncaught SyntaxError: Invalid regular expression: /[a-Z]/: Range out of order in character class

你能够经过添加 ^ 符号轻松得到否认字符集。它会匹配方括号中未包含的全部内容。

/[^df]og/.test('dog'); // false
/[^df]og/.test('fog'); // false
/[^df]og/.test('log'); // true

一个重要的注意事项：[A-z] 范围实际上将匹配多个字母。正如你在 ASCII 表上看到的那样， [A-z] 也将与符号[、 \、 ]、 ^、 _ 和 ` 相匹配，因此请谨慎使用 [A-Za-z]，而是使用标志来忽略大小写。

屡次重复

一个很是有用的功能是匹配某个表达式出现的确切次数。你能够用花括号 { } 来实现。让咱们建立一个函数，该函数将检查字符串是否为有效的电话号码。如下面的格式为例：

+xx xxx xxx xxx

其中 x 是 0 到 9 之间的数字。

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');

就这么简单！

g：全局匹配

多亏了这个标志，全部匹配项都可以被找到。若是没有它，将会在找到第一个匹配项后中止。

String.prototype.replace

你很快就能掌握它，由于你可能已经知道函数 replace。它会返回一个新字符串，若是字符串的内容可以与模式匹配，则会替换其内容。你可使用字符串或正则表达式之类的模式。但棘手的是若是你用字符串去执行这个操做，则没法替换全部出现的模式，只能替换一个模式。若是使用前面提到的标志，就能够轻松地处理：

const lorem = 'lorem_ipsum_dolor_sit_amet';
 
lorem.replace('_', ' '); // 'lorem ipsum_dolor_sit_amet'
 
lorem.replace(/_/g, ' '); // 'lorem ipsum dolor sit amet'

在下一篇文章中，咱们将会讨论更多的标志。

总结

有了全部这些信息，你就能够开始编写本身的正则表达式并将其使用。我强烈建议你使用这个很棒的工具，它会为你提供帮助。在本文的后续部分中，当正则表达式能够发挥更大做用时，咱们将会学习更多高级概念，包括更深刻地研究 JavaScript 提供的 RegExp 对象。到那时，试着练习已经掌握的知识，你将会真正领略到正则表达式的强大。下次见！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...