随手查阅的正则匹配笔记

前端之家收集整理的这篇文章主要介绍了随手查阅的正则匹配笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

常见需求如下:

  • 如果你只需要获取字符串中的首个匹配项
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@H_301_7@ 
  • 使用了 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@H_301_7@ 

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

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

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

  • 只想知道是否匹配某个正则(true or false)
// RegExp.prototype.test()
var str = 'hello world!';
var result = /^hello/.test(str);
console.log(result); // true@H_301_7@ 

关于 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@H_301_7@ 

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

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

推荐正则工具:

非常好用的一个正则编写工具,我会点开左侧菜单栏里的 cheatsheet 来学习编写符合我需求的正则表达式。
可视化查看正则表达式(复杂版),很直观,神器一枚
可视化查看正则表达式(简化版)
原文链接:https://www.f2er.com/regex/357621.html

猜你在找的正则表达式相关文章