JS正则表达式

@(javascript)[js正则表达式]

[toc]

JS正则表达式

正则表达式一直是一个令人头疼但却又是十分重要的一个东西。熟练的使用正则表达式可以让你的工作事半功倍。接下来，一起来看看正则表达式是什么吧！

正则表达式概念

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式的基本语法

var reg = / pattern / flags;

就像上面的，正则表达式是由两个/符号包裹起来的，两个/里面的（上面的pattern）就是需要的任何简单或者是复杂的正则表达式。而在第二个/后面是一个或者是多个标志（flags），用来标明正则表达式的行为。
flags有以下五种行为：

  • g：表示全局（global）模式，即在匹配到第一个后继续匹配
  • i：忽略（ignore）大小写
  • m：便是多行（multiline）模式，即到达一行时继续查找下一行
  • y：(ES6新增的粘连修饰符)
  • u：(ES6新增)

正则的规则分类

下面根据JavaScript正则表达式的速查表中的分类来对每一下进行一个说明。

正则表达式基础

基础里面呢主要有6需要记忆的东西，分别是：

  • .：匹配除了换行以外其他所有字符
  • a：匹配字符a，衍生为匹配单个字母
  • ab：匹配字符串ab，衍生为匹配字符串
  • a|b：匹配a或者b，就是或者的意思
  • a*：匹配一次或者是多次a
  • \：转义符号，转义一个特殊的字符
// `.`的使用
var reg = /./g;
var text = "abcdefg";
var res = text.match(reg);
console.log(res); // (7) ["a", "b", "c", "d", "e", "f", "g"]

// `a`的使用
var reg = /A/gi; // 全局匹配。忽略大小写
var text = "abcdefg";
var res = text.match(reg);
console.log(res); // (7) ["a"]

// `ab`的使用
var reg = /AbCdef/gi; // 全局匹配。忽略大小写
var text = "abcdefg";
var res = text.match(reg);
console.log(res); // (7) ["abcdef"]

// `a|b`的使用 一
var reg = /a|b|c|d/; // 非全局匹配。
var text = "abcdefg";
var res = text.match(reg);
console.log(res); // ["a", index: 0, input: "abcdefg"]

// `a|b`的使用 二
var reg = /a|b|c|d/g; // 全局匹配。
var text = "abcdefg";
var res = text.match(reg);
console.log(res); // (4) ["a", "b", "c", "d"]。使用全局匹配。会在匹配对后继续匹配

// `a*`的使用
var reg = /a*/; 
var text = "abcdcba";
var res = text.match(reg);
console.log(res); // ["a", index: 0, input: "abcdcba"]

// `a*`的使用
var reg = /a*/g; // 全局匹配。
var text = "abcdcba";
var res = text.match(reg);
console.log(res); // (8) ["a", "", "", "", "", "", "a", ""]。使用全局匹配会把之后没有匹配到的转化为空字符串

// `\`的使用  回到第一个 . 的使用那里。如果我把 . 前面加一个 \ 符号，那么这个点就是一个普通的点了
var reg = /\./g; // 全局匹配。
var text = "abcdefg";
var res = text.match(reg);
console.log(res); // null

JavaScript中需要使用 \ 的特殊符号有：( ) [ ] { } . | + * ? \ ^ $ 以及 空白 。

正则表达式字符类

  • [ab-d]：a，b，c，d四个字符中的一个，衍生为使用[]，那就是匹配其中的一个
  • [^ab-d]：除了a，b，c，d四个字符其他的任意字符，衍生为使用[^]可以排除[]里面的东西
  • [\b]：退格字符，了解
  • \d：一个0-9的数字
  • \D：一个非数字
  • \s：一个空白字符
  • \S：一个非空白字符
  • \w：匹配一个字母，数字或者是下划线
  • \W：匹配一个除字母,数字,下划线之外的任意字符
// `[a-z]`的使用
var reg = /[a-z]/g; // 全局匹配。匹配 a-z 的任意一个，因为是全局匹配。所以会一直找。但是不会有 1234
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (4) ["a", "b", "c", "d"]

// `[a-z]`的使用
var reg = /[^a-z]/g; // 全局匹配。匹配 除了 a-z 的任意一个。所以是 1 2 3 4。因为是全局匹配。所以会一直找
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (4) ["1", "2", "3", "4"]

// `[\b]`的使用
var reg = /[\b]/g; // 全局匹配。匹配 \b，当然也可以匹配其他的特殊转义字符，见 正则表达式特殊字符
var text = "abcd\b1234";
var res = text.match(reg);
console.log(res); // (4) ["1", "2", "3", "4"]

// `\d`,`\D`,`\s`,`\S`,`\w`,`\W`的使用
var reg = /\D\d/g; // 全局匹配。匹配一个非数字与一个数字。两者紧靠在一起  注意顺序
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["d1"]
// 如果是下面的一个，则匹配 null
var reg = /\D\d/g; // 全局匹配。匹配一个数字与一个非数字。两者紧靠在一起  注意顺序
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // null
// 匹配一个
var reg = /\D\s\w\d/g; // 全局匹配。注意顺序  注意大小写
var text1 = "abcd1234";
var text2 = "abcd _1234";
var res1 = text1.match(reg);
var res2 = text2.match(reg);
console.log(res1); // null
console.log(res2); // ["d _1"]

正则表达式量词

  • *：匹配0次或者多次。等价于{0,}
  • +：匹配一次或者多次。等价于{1,}
  • ?：匹配0次或者一次。等价于{0,1}
  • {2}：只匹配2次
  • {2, 5}：匹配2-5次
  • {2,}：匹配2次或者多次

这里涉及到一个贪婪匹配与非贪婪匹配。
贪婪匹配指的是使用以上量词的时候会按照最大次数进行匹配。
非贪婪匹配则是按最小次数进行匹配。

使用非贪婪匹配只需在两次后面加上一个?

// `*`的使用
// 非全局匹配。
var reg = /[a-z]*/; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["abcd", index: 0, input: "abcd1234"]
// 全局匹配。
var reg = /[a-z]*/g; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (6) ["abcd", "", "", "", "", ""]。当匹配为 0 个的时候，会变成空字符串。对比 + 号

// `+`的使用
// 非全局匹配。
var reg = /[a-z]+/; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["abcd", index: 0, input: "abcd1234"]
// 全局匹配。
var reg = /[a-z]+/g; // 匹配 a-z 的0个或者多
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["abcd"]。因为至少匹配一个，所以不会有空字符串。对比 * 号

// `?`的使用
// 非全局匹配。
var reg = /[a-z]?/; // 匹配 a-z 的0个或者一个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["a", index: 0, input: "abcd1234"]。匹配到一个就停下来
// 全局匹配。
var reg = /[a-z]?/g; // 匹配 a-z 的0个或者一个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["a", "b", "c", "d", "", "", "", "", ""]。abcd匹配到了。1234则是空字符串。

以上说的都属于贪婪匹配。都是按最多个匹配的。如果是非贪婪匹配。则是按照最少的次数匹配。

// `*`的使用
// 非全局匹配。贪婪匹配
var reg = /[a-z]*/; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["abcd", index: 0, input: "abcd1234"]
// 全局匹配。贪婪匹配
var reg = /[a-z]*/g; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (6) ["abcd", "", "", "", "", ""]。当匹配为 0 个的时候，会变成空字符串。对比 + 号

// 非全局匹配。非贪婪匹配
var reg = /[a-z]*?/; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // ["", index: 0, input: "abcd1234"]
// 全局匹配。非贪婪匹配
var reg = /[a-z]*?/g; // 匹配 a-z 的0个或者多个
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (9) ["", "", "", "", "", "", "", "", ""]

以上就是贪婪匹配与非贪婪匹配的区别。不过不管是如何。在匹配是0次的时候。空字符串的个数总是匹配不成功部分的字符串的长度+1

正则表达式捕获组与非捕获组

  • (...)：捕获组
  • (?...)：非捕获组
  • \Y：匹配第Y个被捕获的组（也称反向引用）。其中Y是一个数字，这个数组取值范围是*，即{0,}。但是建议反向引用不要索引大于9的捕获性分组。
捕获组
var reg = /ab(cd(1234))/;
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (3) ["abcd1234", "cd1234", "1234", index: 0, input: "abcd1234"]

分析：

  1. 捕获组就是在匹配 ()外面的字符之后在匹配 () 里面的。结果中的 "abcd1234"
  2. 捕获组里面还有捕获组会先忽略里面的捕获组匹配在一次匹配里面的捕获组。结果中的"cd1234"与"1234"
非捕获组
var reg = /ab(?:cd(1234))/;
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (3) ["abcd1234", "1234", index: 0, input: "abcd1234"]

分析：非捕获组就是不捕获，就行上面的结果中没有了"cd1234"

那么捕获与非捕获有什么区别呢？ 记得看宠物小精灵的时候小智看见新的小精灵扔球抓小精灵的时候就属于一个捕获，如果看见不扔球那就是不捕获。那捕获和不捕获有什么区别呢？就行抓小精灵一样，抓住了之后就可以用了嘛！所以被捕获的东西之后是可以使用的。那么怎么使用呢？ 问得好。这时候就需要使用到\Y 了。

var reg1 = /(a)/;
var reg2 = /(a)\1/; // 相当于是 /(a)a/
var text1 = "aabb1234";
var text2 = "aabb1234";
var res1 = text1.match(reg1);
var res2 = text2.match(reg2);
console.log(res1); // ["a", "a", index: 0, input: "aabb1234"]
console.log(res2); // ["aa", "a", index: 0, input: "aabb1234"]

上面的例子中，reg1 与 reg2 仅仅有一点不同。但是匹配后的东西是不同的。简单地说，就是，使用 \Y 后会赋值第Y个捕获的组。以下代码说明通过$Y来接收相应的捕获组。不能从0开始

\Y
var reg = /ab(cd(1234))/;
var text = "abcd1234";
var res = text.match(reg);
console.log(res); // (3) ["abcd1234", "cd1234", "1234", index: 0, input: "abcd1234"]
console.log(RegExp.$0); // undefined
console.log(RegExp.$1); // cd1234
console.log(RegExp.$2); // 1234
var res1 = text.replace(reg,"$1$2"); // 使用 $1 $2 取出捕获组的内容
console.log(res1); // cd12341234

正则表达式断言

  • ^：字符串的开始必须是
  • $：字符串的结尾必须是
  • \b：匹配文字（单词）边界
  • \B：非文字（单词）边界
  • (?=...)：积极的前瞻（也叫前瞻或者是顺序肯定环视）
  • (?!...)：消极的前瞻（也加后瞻或者是顺序否定环视）
^，$的使用
var reg = /^b.*\d$/; // 要求字符 b 开头，中间 * 个任意字符（除换行符），必须以数字结束
var text1 = "abcd1234";
var text2 = "bcd";
var text3 = "bcd1234";
var res1 = text1.match(reg);
var res2 = text2.match(reg);
var res3 = text3.match(reg);
console.log(res1); // null
console.log(res2); // null
console.log(res3); // ["bcd1234", index: 0, input: "bcd1234"]
\b，\B的使用
var reg = /\bhi\b/; // 
var text1 = "hi"; 
var text2 = "him"; 
var text3 = "history";
var res1 = text1.match(reg);
var res2 = text2.match(reg);
var res3 = text3.match(reg);
console.log(res1); // ["hi", index: 0, input: "hi"]
console.log(res2); // null
console.log(res3); // null
积极的前瞻 (?=...) 积极的前瞻 匹配后面是 ... 的位置，不捕获匹配结果
var reg = /abcd(?=1234)/;
var text = "abcd1234";
var text1 = "abcdefg";
var res = text.match(reg);
var res1 = text1.match(reg);
console.log(res) // ["abcd", index: 0, input: "abcd1234"]
console.log(res1) // null

看上面的例子可以看出积极的前瞻匹配1234前面的abcd，不匹配def前面的abcd；而消极的前瞻恰恰相反，看下面的例子。

消极的前瞻 (?!...) 消极的前瞻 匹配后面不是 ... 的位置，不捕获匹配结果
var reg = /abcd(?!=1234)/;
var text = "abcd1234";
var text1 = "abcdefg";
var res = text.match(reg);
var res1 = text1.match(reg);
console.log(res) // null
console.log(res1) // ["abcd", index: 0, input: "abcd1234"]

正则表达式特殊字符

  • \n：换行符
  • \r：回车符
  • \t：制表符
  • \0：空字符
  • \YYY：8进制字符
  • \xYY：十六进制字符
  • \uYYYY：十六进制字符
  • \cY：控制符
    正则的特殊字符在实际中运用的比较少，具体的用法与之前讲到的[\b]类似。上面的两个十六进制字符中，\xYY主要匹配数字字母等。而\uYYYY则是为了匹配汉字以及以下特殊的符号。

正则表达式替换

正则表达式替换主要是替换一些字符。主要以下几个，可是在replace中使用。

  • $$：插入$
  • $&：插入整个匹配
  • $`：插入匹配项前面的字符串
  • $'：插入匹配项后面的字符串
  • $Y：插入第Y个捕获的组
var reg = /.{2}水(.)/;
var text = "君子之交淡如水，小人之交甘若醴";
var res = text.match(reg);
console.log(res); // (2) ["淡如水，", "，", index: 4, input: "君子之交淡如水，小人之交甘若醴"]
$$：插入$ 
var reg = /.{2}水(.)/;
var text = "君子之交淡如水，小人之交甘若醴";
var newStr = text.replace(reg,"$$");
console.log(newStr); // 君子之交$小人之交甘若醴
$&：插入整个匹配
var reg = /.{2}水(.)/;
var text = "君子之交淡如水，小人之交甘若醴";
var newStr = text.replace(reg,"$&");
console.log(newStr); // 君子之交淡如水，小人之交甘若醴
$`：插入匹配项前面的字符串
var reg = /.{2}水(.)/;
var text = "君子之交淡如水，小人之交甘若醴";
var newStr = text.replace(reg,"$`");
console.log(newStr); // 君子之交君子之交小人之交甘若醴
$'：插入匹配项后面的字符串
var reg = /.{2}水(.)/;
var text = "君子之交淡如水，小人之交甘若醴";
var newStr = text.replace(reg,"$'");
console.log(newStr); // 君子之交小人之交甘若醴小人之交甘若醴
$Y：插入第Y个捕获的组
var reg = /.{2}水(.)/;
var text = "君子之交淡如水，小人之交甘若醴";
var newStr = text.replace(reg,"$1");
console.log(newStr); // 君子之交，小人之交甘若醴

正则表达式实例的方法

exec() 最主要的方法

此方法专门为捕获组设计的。此方法接收一个参数，及需要测试的字符串。返回数组或者是null。但返回的值包含两个额外的属性：
index：匹配性在字符串中的位置
input：应用正则的表达式

var reg = /你(我他(与她))/
var text = "你我他与她";
var res = reg.exec(text);
console.log(res); //(3) ["你我他与她", "我他与她", "与她", index: 0, input: "你我他与她"]

["你我他与她", "我他与她", "与她", index: 0, input: "你我他与她"]的结果。使用res[下标]可以查看具体的匹配下。从第二项开始才是捕获项。使用res.index与res.input查看起始位置与匹配的字符串。

exec()方法始终返回一项，如果设置了全局匹配g，只会从上一次结束的敌法继续查找，而不会返回多项。

var text = "bat, cat, fat";

var reg1 = /.at/;
var res = reg1.exec(text);
console.log(res.index); // 0
console.log(res[0]);    // bat

var res = reg1.exec(text);
console.log(res.index); // 0
console.log(res[0]);    // bat

var reg2 = /.at/g;

var res = reg2.exec(text);
console.log(res.index); // 0
console.log(res[0]);    // bat

var res = reg2.exec(text);
console.log(res.index); // 5
console.log(res[0]);    // cat

test()方法

接收一个字符串作为参数，返回：
true：匹配
false：不匹配

var text = "abcd1234";
var reg1 = /\D/g;
var reg2 = /\s/g;
var res1 = reg1.test(text);
console.log(res1);  // true
var res2 = reg2.test(text);
console.log(res2);  // false

关于使用RegExp构造函数

语法：var reg = new RegExp(参数1[,参数2]);

var reg = new RegExp("\D","gi");
var text = "ABd1234";
var res = reg.exec(text);
console.log(res); // ["d", index: 2, input: "ABd1234"]

看上面的例子。两个参数需要使用字符串。
但是，上面的例子有一个问题。没有按照我们所想的出现一个A，而是一个d。同时，我们忽略大小写在看一下：

var reg = new RegExp("\D","g");
var text = "ABd1234";
var res = reg.exec(text);
console.log(res); // null

所以，使用构造函数还有一个需要注意的就是所有的元字符都需要双重转义。将上面的代码换为下面的看看

var reg = new RegExp("\\D","g");
var text = "ABd1234";
var res = reg.exec(text);
console.log(res); // ["A", index: 0, input: "ABd1234"]

注意上面的\\D。这个才表示一个元字符。刚刚的就是一个\一个D。所以。在正则的构造函数中使用元字符需要双重转义。

附上几个常用的正则匹配

电话号码匹配：/^1[3-8]\d{9}$/
电子邮件：/[a-zA-z0-9_-]{6,12}@[a-zA-z0-9_-]+\.[a-zA-z0-9]+/
匹配特定了的邮件：/[a-zA-z0-9_-]{6,12}@(163|qq|gmail)\.com/

更多的匹配可查阅：最全的常用正则表达式大全

以上就是关于正则的一些使用概念以及使用方法。如果想要熟练的使用正则去匹配或者是修改字符串。还是需要不断的练习才是。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335

推荐阅读更多精彩内容