随手查阅的正则匹配笔记

常见需求如下:

  • 如果你只需要获取字符串中的首个匹配项
var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
// 就算有 g 标识,通过 exec 也只能获取到首个匹配项
// result[0]: Quick Brown Fox Jumps
  • 使用了 g 标识时(不使用时以下方法也适用),如果你想获取正则中的组匹配(capture groups)信息
var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
// index 1~n 就是组匹配到的结果(此处正则中有两个括号,则 n 为 2)
// result[1]: Brown
// result[2]: Jumps

关于 exec 的更多详细说明可以查看 MDN 文档 RegExp.prototype.exec()

  • 如果你想获取正则中所有的组匹配(capture groups)信息
let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
const matches = str.matchAll(regexp);
let array = [...matches]; // or Array.from(matches)

array[0];
// [matched text, group1, group2...]
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4] 
array[1];
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]

关于 matchAll 的更多详细说明可以查看 MDN 文档 String.prototype.matchAll()

  • 不使用 g 标识时,如果你想获取正则中的组匹配(capture groups)信息
'mockid=272;其他说明文字……'.match(/mockid=(\d+);/i)
// ["mockid=272;", "272", index: 0, input: "mockid=272;其他说明文字……"]
// 如果加上 g 标识,就只能得到 ["mockid=272;"]
  • 匹配多种可能出现的值,获取最终匹配到的值
'GET/path/to/some/place'.match(/^(GET|POST|PUT|DELETE)/gi)
// 输出:["GET"]

关于 match 的更多详细说明可以查看 MDN 文档 String.prototype.match()

  • 只想知道是否匹配某个正则(true or false)
// RegExp.prototype.test()
var str = 'hello world!';
var result = /^hello/.test(str);
console.log(result); // true
  • 字符串是否匹配其中一种情况
let type = 'Array';
/Array|Object/.test(type) // true

关于 test 的更多详细说明可以查看 MDN 文档 RegExp.prototype.test()

// String.prototype.search()
var str = "hey JudE";
var re = /[A-Z]/g;
var re2 = /[.]/g;
console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J"
console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation
// 因此可以直接判断返回负值时匹配结果为 false

关于 search 的更多详细说明可以查看 MDN 文档 String.prototype.search()

  • 对匹配成功的字符串进行处理
function replacer(match, p1, p2, p3, offset, string) {
  // p1:([^\d]*) p2:(\d*) p3:([^\w]*)
  // p1 非数字, p2 数字, p3 非文字
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

推荐正则工具:

非常好用的一个正则编写工具,我会点开左侧菜单栏里的 cheatsheet 来学习编写符合我需求的正则表达式。

可视化查看正则表达式(复杂版),很直观,神器一枚

可视化查看正则表达式(简化版)

推荐阅读更多精彩内容

  • 正则表达式到底是什么东西?字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等...
    狮子挽歌阅读 1,877评论 0 9
  • 首发于:segmentfault《JavaScript语言精粹 修订版》 读书笔记 之前看到这篇文章,前端网老姚浅...
    若川i阅读 759评论 0 3
  • 国外某网站给出了44道JS难题,试着做了下,只做对了17道。这些题涉及面非常广,涵盖JS原型、函数细节、强制转换、...
    康斌阅读 6,573评论 9 50
  • 我步入了高中,认识了我的英语老师——殷老师。我一直觉得她是一个与众不同的老师。区分的标准很简单,在英语组中,所有的...
    橞卉子Love阅读 186评论 0 1
  • 凋零的街区 松松垮垮的嘴脸 饱经风霜 旧忆 也徘徊在陌生眼里 独自经过无人小巷 浑浊溪水也接受一切不美好
    日日月月也曾思思念念阅读 115评论 0 2
  • 说实话,一开始当我决定要跑步的时候,我内心其实是忐忑的。我一般做这种长期的事不太容易坚持下来,尤其这种事是让你走出...
    岸左同学阅读 217评论 0 1
  • 人的一生都在追逐一些自认为重要的东西,等千辛万苦得到手,却发现不是自己想要的,就放下所得继续追逐自己想要的东西。就...
    小英成长手札阅读 1,055评论 0 0