前端的正则表达式:基本概念

更新日期: 2019-11-19阅读: 2.3k标签: 正则

正则表达式(regex)是定义搜索模式的字符序列。由于对程序员的日常工作非常有用,所以在 JavaScript 中也支持它。在这个系列文章中,我会向你展示其工作方式以及其实际用途。希望在结束本系列后,你将能够轻松的写出自己的正则表达式。


创建正则表达式的方法

在 JavaScript 中可以通过两种方式去构造正则表达式。要完全理解它,你需要知道正则表达式包含在两个正斜杠中。尽管这并不是模式中的一部分,但它们用来指示模式的开始和结束。通过它们可以告诉 JS 解释器它正在处理正则表达式:

const regex = /dog/;

另一种方式是使用 RegExp 构造函数

const regex = new RegExp('dog');

创建对象之后,你可以在对象上调用 test 方法,方法得到字符串后,如果模式匹配,则返回 true

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


简单模式

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

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

但是正则表达式的功能绝不会这么简单。在许多情况下你可能会希望使用更复杂的模式。


特殊字符

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

任何字符

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

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'

原文:https://wanago.io/2018/04/30/regex-course-part-one-basic-concepts/

链接: https://fly63.com/article/detial/6923

javascript较全常用的表达正则验证,js中采用test()方法

正则表达式是一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。本文整理了JS较全且实用正则表达式。

js使用正则过滤emoji表情符号

手机端常常会遇到用户输入框,输入emoji,如果是数据库是UTF8,会遇到报错,原因是:UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去。

一次记住js的6个正则方法

来记忆一些常用特殊字符,这个是正则本身的范畴了,是不是总觉得记不住?其实我也记不住,每次都是去搜索和online验证来完成一些任务。我也困恼过,其实最后还是因为自己写的少吧,唯手熟尔。。。

密码强度的正则表达式(JavaScript)总结

本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。一般大家可以根据自己的项目的实际需要,自行定义自己的密码正则约定。

JavaScript判断字符串包含中文字符的方法总结

JS中判断一个字符串是否包含汉字,下面就介绍2中常用的实现方法:用正则表达式判断、用 Unicode 字符范围判断。

js常用正则表达式验证大全(整理详细且实用)

正则表达式对象用来规范一个规范的表达式,本文讲的是JS正则表达式大全(整理详细且实用),包括校验数字、字符、一些特殊的需求等等

javascript 正则表达式之分组与前瞻匹配详解

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识。分组匹配:捕获性分组匹配、非捕获性分组匹配。前瞻匹配:正向前瞻匹配: (?=表达式) 后面一定要匹配有什么、反向前瞻匹配: (?!表达式) 后面一定不能要有什么

利用正则表达式去除所有html标签,只保留文字

后台将富文本编辑器中的内容返回到前端时如果带上了标签,这时就可以利用这种方法只保留文字。利用正则表达式去除所有html标签,只保留文字

正则表达式后行断言 • 探索 ES2018 和 ES2019

先后行断言(Lookaround Assertion)是正则表达式中的一个构造,明确了当前位置的前后字符序列,但没有其他副作用。当前 JavaScript 唯一支持的 Lookaround Assertion 是 先行断言,其匹配当前位置接下来的字符序列

循环下的正则匹配?说说正则中的lastIndex

正则有一个属性叫lastIndex,它表示正则下一次匹配时的起始位置。一般情况下我们是使用不到它的,但在正则中包含全局标志g时,正则的test和exec方法就会使用到它

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!