正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

感受正则的魅力

1
2
3
4
5
6
7
8
9
10
11
12
let title = "现在是2020年11月10日13点15分";
// 普通方式拿到上面一段文字中的数字
let time = [...title].filter((item) => !Number.isNaN(Number.parseInt(item)));
// 拿到数字
console.log(time.join(""));

// 使用正则获取数字,正则比上面的要简洁的多
let numbs = title.match(/\d/g);
console.log(numbs.join(""));

// 打印结果完全相同
console.log(time.join("") === numbs.join("")); //true

匹配模式

  • g 全局匹配
  • i 不区分大小写
  • m 多行匹配
  • s 将字符串视为单行匹配
  • y 模式表示匹配到不符合的就停掉，不会继续往后匹配，必须连续的符合条件的

字面量方式创建正则表达式

1
2
3
4
5
6
7
let title = "songzhengxiang";
// test是检测的意思
// 判断字符串中是否有s
console.log(/s/.test(title));

let reg = /a/;
console.log(reg.test(title));

选择符使用:或者

| 用一个竖杠表示或者

1
2
3
4
5
6
let title = "songzhengxiang";
// 一个竖表示或者，两边的表达式满足任意条件即可
console.log(/song|x/.test(title));

let tel = "020-9999999";
console.log(/(010|020)\-\d{7,8}/.test(tel));

原子表和原子组选择符

()小括号表示院子组，[]中括号表示原子表

1
2
3
4
5
6
7
8
9
10
// 原子表有或者的意思，1或者2或者3
let reg = /[123]/g;
// 院子组表示一个具体值,123或者456
let reg2 = /(123|456)/g;
let title = "1234688";
console.log(reg.test(title)); // true
console.log(reg2.test(title)); // true

console.log(title.match(reg)); //  ["1", "2", "3"]
console.log(title.match(reg2)); //  ["123"]

正则表达式中的转义符

\ 斜杠表示转义符

1
2
3
4
5
6
7
8
9
10
let numb = 23.32;
// 斜杠为转义符
// 正则含义：一个或多个数字加上一个点再加上一个或多个数字
let reg = /\d+\.\d+/;
console.log(reg.test(numb));

// 验证网址
let url = "https://www.baidu.com";
let urlReg = /https?:\/\/\w+\.\w+\.\w+/;
console.log(urlReg.test(url));

字符边界约束

^表示正则开始,$表示正则结束

1
2
3
4
5
let numb = "125499999";
// 限制以数字开始的数字结束的长度是5到9位的数字,同时以数字开始并且以数字结束
// ^ 表示开始，$ 表示结束
let numreg = /^\d{5,9}$/;
console.log(numreg.test(numb)); // true

数值与空白元字符

  • \d,匹配数字
  • \D,匹配除了数字
  • [],中括号里面出现的东西就要,如果中括号里面加上^表示不匹配中括号里面的内容
  • \s,小写的 s 表示匹配空格
  • \S,大写的 S 表示匹配除了空格
  • +号匹配多个字符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let tel = `李四：010-56948754，张三：020-23522222`;
// 只匹配第一个数字
console.log(tel.match(/\d/));
// 匹配第一组是数字得值
console.log(tel.match(/\d+/));
// g表示全局匹配，小写的\d表示匹配数组
console.log(tel.match(/\d{3}\-\d{8,9}/g));

// 大写的\D表示匹配除了数字
console.log(tel.match(/\D+/g));

// [],中括号里面出现的东西就要,如果中括号里面加上^表示不匹配中括号里面的内容
// \s,小写的s表示匹配空格
// \S,大写的S表示匹配除了空格
// +号匹配多个字符
console.log(tel.match(/[^：，\d\s-]+/g));

w 和 W 元字符

  • \w 小写的 w 表示匹配字母、数字、下划线
  • \W 大写的 w 表示匹配不是字母、数字、下划线

例子：匹配邮箱

1
2
3
4
5
// 例子：匹配邮箱
let email = "15039155555@163.com";
let emailreg = /^\w+@\w+\.\w+$/;
console.log(email.match(emailreg));
console.log(emailreg.test(email));

点元字符使用

. 表示除了换行符以外的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
// . 表示除了换行符以外的字符
let title = `15039155555
                     @163.com
                    `;
// 只匹配到15039155555
console.log(title.match(/.+/g));

// 末尾跟上小写s表示将字符串视为单行匹配
let nwetitle = title
  .match(/.+/s)[0]
  .match(/[^\s]*/g)
  .join("");
console.log(nwetitle); // 15039155555@163.com

如何精巧匹配所有字符

  • [\s\S] 匹配空格和不是空格，两个都加上表示所有
  • [\d\D] 匹配数字和不是数字，两个都加上表示所有
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let html = `
            <span>
                songzhnegxiang
                SONG
                Xiang
            </span>
        `;

// 使用原子表匹配所有字符
// []字符只要有中括号里面的内容就可以匹配到
// \s\S 匹配空格和不是空格，两个都加上表示所有
console.log(html.match(/<span>[\s\S]+<\/span>/));

// 或者采用 \d\D ,表示匹配数字和不是数字的
console.log(html.match(/<span>[\d\D]+<\/span>/));

i 和 g 模式修正符

  • i 不区分大小写
  • g 全局匹配
1
2
3
4
5
6
7
8
let name = "SongZhengSiang";
// 查找s,不区分大小写
console.log(name.match(/s/gi));

// 全局替换操作
let time = "2020/11/10";
// 吧斜杠换为横杠 2020-11-10
console.log(time.replace(/\//g, "-"));

m 多行匹配修正符

m 多行匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let lessonobj = `
    #1 js,200元 #    
    #2 vue,500元 #    
    #3 angular,199元 # song   
    #4 node.js,188元 #        
`;

let lesobj = lessonobj.match(/\s*#\d+\s+.+\s+#\s+$/gm).map((item) => {
  // 删除多余的字段
  item = item.replace(/\s*#\d\s*/, "").replace(/\s*#\s*/, "");
  let [name, price] = item.split(",");
  return { name, price };
});
console.log(lesobj);

汉字和字符属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let name = "songZX,你好中国,upup....加油！！！";

let str = "豆腐";

// 匹配所有字母
console.log(name.match(/[a-z]+/gi)); // ["songZX", "upup"]

// 匹配标点符号
console.log(name.match(/\p{P}/gu)); // [",", ",", ".", ".", ".", ".", "！", "！", "！"]

// 匹配汉字
let strs = str.match(/\p{sc=Han}+/gu);
console.log(strs); // ["豆腐"]

// 匹配汉字
let hanzi = name.match(/[\u4e00-\u9fa5]+/g);
console.log(hanzi); // ["你好中国", "加油"]

lastIndex 属性的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
let name = "songzx";

// match获取元素只能获取到第一个元素的主信息
// 加上g后主信息会丢失
console.log(name.match(/\w/));

let reg = /\w/g;
// 使用exec每检索一次，正则中的lastindex会加1
while ((res = reg.exec(name))) {
  console.log(res);
  // 此模式正则必须为g模式
  console.log(reg.lastIndex);
}

有效率的 y 模式

y 模式表示匹配到不符合的就停掉，不会继续往后匹配，必须连续的符合条件的

1
2
3
4
5
6
7
8
9
10
11
12
let name = "我的qq号是,1111111111,22224545488,6411313416544婚姻加入";

// 查到数字，逗号有或没有
// y 模式找到后就不会继续往后找
let reg = /(\d+),?/y;
reg.lastIndex = 7;
let qqList = [];
while ((res = reg.exec(name))) {
  console.log(res);
  qqList.push(res[1]);
}
console.log(qqList); // ["1111111111", "22224545488", "6411313416544"]

原子表的基本使用

1
2
3
4
5
6
7
8
9
let name = "songzhengxiang";
// 原子表表示里面的内容时或者的关系,检测的内容在其中就可以被匹配到
let namereg = /[szx]/g;
console.log(name.match(namereg));

let time = "2020-s11-s13";
// \1 和 \2必须配合（）使用，\1表示后面的内容必须和第一个小括号匹配到的内容相同
let reg = /^\d{4}([-\/])(s)\d{2}\1\2\d{2}$/;
console.log(time.match(reg));

区间匹配

  • [a-z] 匹配 26 位小写字母
  • [0-9] 匹配 0-9 之间的数字，包含 0 和 9
1
2
3
4
5
6
7
8
9
10
// [a-z] 或者 [0-9] 表示区间，只能是升序书写，不能降序书写
let a = "s5df5sf5s165s6dfsdf513d2f";

// 匹配0-9的数字
let numreg = /[0-9]+/g;
console.log(a.match(numreg)); // ["5", "5", "5", "165", "6", "513", "2"]

// 匹配字母
let objreg = /[a-z]+/g;
console.log(a.match(objreg)); // ["s", "df", "sf", "s", "s", "dfsdf", "d", "f"]

排除匹配

1
2
3
4
let name = "songkkkzhenglllxiang";
// [^kl]表示排除字母k或者字母l
let reg = /[^kl]+/g;
console.log(name.match(reg));

原子表字符不会解析

1
2
3
4
let name = "(songzheng).+";
// 在原子表中的特殊字符不会被当成有特殊含义的字符，只会当做特殊字符来匹配
let reg = /[().+]/g;
console.log(name.match(reg)); // ["(", ")", ".", "+"]

使用正则去除字符串中的所有空格

1
2
3
4
5
6
let title = "  111  2 33  ";
// 去空格，去除中间或者两边的空格
function trimreg(data) {
  return data.match(/[^\s]+/gm).join("");
}
console.log(trimreg(title)); // 111233

认识原子组

一个小括号包起来的东西被称为原子组,\1 表示与第一个原子组相同的内容

1
2
3
4
5
6
7
8
let dom = `
    <h1>标题一</h1>
    <h2>标题二</h2>
`;
// 一个小括号包起来的东西被称为原子组,\1表示与第一个原子组相同的内容

let reg = /<(h[1-6])>[\s\S]*<\/\1>/g;
console.log(dom.match(reg)); // ["<h1>标题一</h1>", "<h2>标题二</h2>"]

邮箱验证使用原子组

  • 验证邮箱表达式：/^[\da-z][\w.]+@(\w+.)+(com|cn|org)$/i
  • 含义：以数字或者字母开头，数字字母下划线为主体，一个@符号，后面跟上数字字母下划线和小数点，可以为多个，以 com 或 cn 或 org 结尾
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div>
  <input type="text" name="email" value="" />
</div>

<script>
  let input = document.querySelector("[name = 'email']");
  /*
            邮箱正则
            以数字或者字母开头，数字字母下划线为主体，一个@符号
            后面跟上数字字母下划线和小数点，可以为多个
            以com 或 cn 或 org结尾
        */
  let emailreg = /^[\da-z][\w.]+@(\w+\.)+(com|cn|org)$/i;
  input.addEventListener("keyup", function() {
    if (emailreg.test(this.value)) {
      input.className = "success";
    } else {
      input.className = "error";
    }
  });
</script>

嵌套分组和不记录分组

原子组里面加上?:表示不记录该原子组，但是原子组的功能仍然生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let url = `
    http://www.baidu.com
    https://taobao.cn
    https://www.zhifubao.com
`;

// 原子组里面加上?:表示不记录该原子组，但是原子组的功能仍然生效
let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|cn))/gi;

let urls = [];
while ((res = reg.exec(url))) {
  // 1 表示第一个原子组
  urls.push(res[1]);
}
console.log(urls); // ["www.baidu.com", "taobao.cn", "www.zhifubao.com"]

重复匹配的使用

  • +：一个或者多个
  • *：零个或者多个
  • ？：有或者没有
  • {1,2}：一个到两个，最少一个，最多 2 连个，数字随便定义
1
2
3
4
5
6
7
8
9
10
11
12
let name = "sooooo";
// + ：一个或者多个
console.log(name.match(/so+/)); // sooooo

// * ：零个或者多个
console.log(name.match(/so*/)); // sooooo

// ? ：有或者没有
console.log(name.match(/so?/)); // so

// {1,2} ：一个到两个，最少一个，最多两个
console.log(name.match(/so{1,2}/)); // soo

重复匹配对原子组影响

1
2
3
let name = "sososososososos";
// 连续匹配so，使用原子组包起来是里面的内容就变成了一个整体
console.log(name.match(/(so)+/g)); // ["sososososososo"]

禁止贪婪

? 禁止贪婪,会匹配最小的那个单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let name = "soooooo";

// *：零个或多个，加上问号表示匹配0个
let reg = /so*?/g;
console.log(name.match(reg)); // ["s"]

// +：一个或多个，加上问号表示只匹配1个
reg = /so+?/g;
console.log(name.match(reg)); // ["so"]

// ?：0个或者1个，再加上问号表示只匹配0个
reg = /so??/g;
console.log(name.match(reg)); // ["s"]

// {2,5} 表示匹配2到5个，加上问号表示匹配2个
reg = /so{2,5}?/g;
console.log(name.match(reg)); // ["soo"]

使用 matchAll 完成全局匹配

matchAll 获取到的是一个迭代对象,可以被遍历到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<main>
  <h3>哈哈哈,sdfsdf</h3>
  <h2>嘿嘿嘿</h2>
  <h4>呵呵呵</h4>
  <h5>嘎嘎嘎</h5>
</main>
<script>
  let main = document.querySelector("main");
  let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/g;
  // matchAll获取到的是一个迭代对象,可以被遍历到
  let listall = main.innerHTML.matchAll(reg);

  let htmldata = [];
  for (const item of listall) {
    console.log(item);
    htmldata.push(item[2]);
  }
  console.log(htmldata); // ["哈哈哈,sdfsdf", "嘿嘿嘿", "呵呵呵", "嘎嘎嘎"]
</script>

字符串的 search 方法和 match 方法

字符串的 search 方法,找到后返回字符串所在下标，否则返回-1

1
2
3
4
5
6
7
8
9
10
11
12
let urls = `
            http://www.baidu.com,
            http://taobao.com.cn,
            https://www.tmall.com/
        `;

// 字符串的search方法,找到后返回字符串所在下标，否则返回-1
console.log(urls.search("baidu")); // 24

let reg = /https?:\/\/(\w+)?(\w+\.)+(com|cn)/g;
// ["http://www.baidu.com", "http://taobao.com.cn", "https://www.tmall.com"]
console.log(urls.match(reg));

$符在正则替换中的使用

  • $` : 获取替换元素左边的元素
  • $‘ : 获取替换元素右边的元素
  • $& : 获取替换元素本身
1
2
3
4
5
6
7
8
9
10
11
12
13
let time = "2020-05-05";
console.log(time.replace(/-/g, "/")); //2020/05/05

let tel = "(0631)-150518888";
let telreg = /\((\d{3,4})\)-(\d+)/g;
// 在replace中$1表示第一个原子组匹配到的内容
console.log(tel.replace(telreg, "$1/$2")); // 0631/150518888

// $` : 获取替换元素左边的元素
// $' : 获取替换元素右边的元素
// $& : 获取替换元素本身
let name = "123你好+++";
console.log(name.replace("你好", "$`$&$'")); // 123123你好++++++

原子组起别名

  • 使用 ?<cont> 起原子组的别名
  • 使用 $<cont> 读取别名
1
2
3
4
5
6
7
8
9
10
11
<main>
  <h2>百度</h2>
  <h3>支付宝</h3>
</main>
<script>
  // 原子组起别名
  let main = document.querySelector("main");
  let reg = /<(h[1-6])>(?<cont>.*)?<\/\1>/g;
  // 使用$<cont>读取原子组的别名
  main.innerHTML = main.innerHTML.replace(reg, `<i>$<cont></i>`);
</script>

后等断言

  • (?=xxx) 匹配右侧是 xxx 的字段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
张三先生和张三女士是天造地设的一对
<script>
  // 用小括号包括起来，前面加上?=表示该正则右侧等于某个值得元素
  let main = document.body;
  // 匹配张三 右侧 是先生的字段
  let men = /张三(?=先生)/g;
  // 匹配张三 右侧 是女士的字段
  let wumen = /张三(?=女士)/g;

  main.innerHTML = main.innerHTML.replace(
    men,
    `<span style="color:blue">$&</span>`
  );
  main.innerHTML = main.innerHTML.replace(
    wumen,
    `<span style="color:pink">$&</span>`
  );
</script>

前等断言

  • (?<=href=(['"])) 前面是 href=单引号或者双引号的字段 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<main>
  <a href="http://baidu.com">百度</a>
  <a href="http://yahu.com">雅虎</a>
</main>
<script>
  let main = document.querySelector("main");
  // 匹配字符串之前是什么字段
  let reg = /(?<=href=(['"])).+(?=\1)/gi;
  // ["http://baidu.com", "http://yahu.com"]
  console.log(main.innerHTML.match(reg));
  main.innerHTML = main.innerHTML.replace(
    reg,
    "https://songzhengxiang.gitee.io/blog/"
  );
</script>

后不等断言

?!表示不是以什么什么结尾

1
2
3
4
5
let user = `阅读量：999
新增人数：10人`;
// 匹配前面不是空格的一个或多个，后面不是数字的字段
let reg = /\S+(?!\d+)$/g;
console.log(user.match(reg).join("")); // 新增人数：10人

前不等断言

?<! 匹配前面不是什么的字段

1
2
3
4
5
// ?<! 匹配前面不是什么的字段
let name = "abc123def";
// 匹配前面不是数字的字符串
let reg = /(?<!\d+)[a-z]+/g;
console.log(name.match(reg)); // ["abc", "ef"]

使用断言模糊电话号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 不使用断言
let tels = `15036999999`;
let reg = /(\d{3})(\d{4})(\d+)/g;
tels = tels.replace(reg, (v, ...args) => {
  args[1] = "*".repeat(4);
  return args.splice(0, 3).join("");
});
console.log(tels); // 150****9999

// 使用断言
let newtel = `15036999999`;
// 匹配前面是由3位数字组成，后面是由4位数字组成的字段
let newreg = /(?<=\d{3})\d{4}(?=\d{4})/g;
newtel = newtel.replace(newreg, (v) => {
  // 将这个字段替换成4个*号
  return "*".repeat(4);
});
console.log(newtel); // 150****9999