JS正则表达式学习与实践-CSDN博客

本文链接：https://blog.csdn.net/qq_39410252/article/details/140853457

1 学习笔记

1.1 字符类

1、点号“.”：标识除了换行之外的任易字符；
2、字符集"[]“：匹配方括号中列举的任意一个字符；
3、取反字符集”[^]“：匹配不在方括号中列举的任意一个字符；
4、字符范围”[a-z]“、”[0-9]“：匹配方括号字符范围内的字符；
5、单词字符”\w"：用于查找字母、数字和下划线；
6、非单词字符"\W"：匹配除字母、数字和下划线之外的字符；
7、数字字符 “\d”：仅用来匹配数字；
8、非数字字符"\D"：匹配除数字之外的字符；
9、空白符"\s"：仅匹配空白字符；
10、非空白符"\S"：匹配除空白符之外的字符；
11、换页符"\f"：匹配一个换页符 (U+000C)；
12、换行符"\n"：匹配一个换行符 (U+000A)；
13、回车符\r"：匹配一个回车符 (U+000D)；
14、水平制表符"\t"：匹配一个水平制表符 (U+0009)；

1.2 量词和分支

1、任意数次匹配""：在字符后面加上，表示一个字符完全不匹配或可以匹配多次;
2、正整数次匹配"+“：表示一个字符可以出现一次或多次;
3、可选匹配”?“：表示一个字符是可选的；
4、字符出现次数匹配”{n}“：表示一个字符出现的确切次数，可以在该字符的末尾，将它出现的次数写进大括号 {} 中，如 {1};
5、字符出现至少次数匹配”{n,}“：表示一个字符至少出现的次数，可以在该字符的末尾，将它出现的次数写进大括号 {min,} 中，如 {1,};
6、字符出现的次数范围匹配”{n,m}“：表示一个字符出现的次数范围，可以在该字符的末尾，将它出现的次数写进大括号 {min,max} 中，如 {1,4};
7、分支”|"：竖线允许一个表达式包含多个不同的分支。所有分支用 | 分隔；

1.3 标志

1、全局标志"g"：全局标志使表达式选中所有匹配项，如果不启用全局标志，那么表达式只会匹配第一个匹配项；
2、多行标志"m"：正则表达式将所有文本视作一行。但如果我们使用了多行标志，它就会单独处理每一行；
3、忽略大小写标志"i"：为了使我们编写的表达式不再大小写敏感，我们必须启用不区分大小写标志；
4、“s”：允许 . 匹配换行符；
5、unicode模式"u"：使用 unicode 码的模式进行匹配；
6、粘性搜索"y"：执行“粘性 (sticky)”搜索，匹配从目标字符串的当前位置开始；

1.4 锚点

1、匹配字符串的开始"^“：所匹配的内容必须在字符串的头部；
2、匹配字符串的结尾”$“：所匹配的内容必须在字符串的尾部；
3、单词边界"字符\b”：匹配单词的开头或末尾；
4、非单词边界"字符\B"：匹配不在单词开头或末尾的位置；

1.5 断言

1、正向先行断言"(?=)“：匹配结果后面必须跟着断言的内容，但该内容不作为匹配结果；
2、负向先行断言”(?!)“：匹配结果后面必须不跟着断言的内容，但该内容不作为匹配结果；
3、正向后行断言”(?<=)“：匹配结果前面必须跟着断言的内容，但该内容不作为匹配结果；
4、负向后行断言”(?<!)"：匹配结果前面必须不跟着断言的内容，但该内容不作为匹配结果；

1.6 捕获/分组

1、捕获括号"(x)“：它会匹配 ‘x’ 并且记住匹配项，模式 /(foo) (bar) \1 \2/ 中的 ‘(foo)’ 和 ‘(bar)’ 匹配并记住字符串 “foo bar foo bar” 中前两个单词。模式中的 \1 和 \2 表示第一个和第二个被捕获括号匹配的子字符串，即 foo 和 bar，匹配了原字符串中的后两个单词。注意 \1、\2、…、\n 是用在正则表达式的匹配环节。而在正则表达式的替换环节，则要使用像 $1、$2、…$n 这样的语法，例如，‘bar foo’.replace(/(…) (…)/, ‘$2 $1’)。$& 表示整个用于匹配的原字符串;
2、非捕获括号”(?:x)"：匹配 ‘x’ 但是不记住匹配项。

2 常用正则

2.1 检查微信浏览器

/MicroMessenger/i

2.2 检查移动端浏览器

/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i

2.3 检查中文字符

/[\u4e00-\u9fa5]/gm

2.4 手机号严格

/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/

2.5 手机号比较宽松

/^(?:(?:\+|00)86)?1[3-9]\d{9}$/

2.6 手机号宽松

/^(?:(?:\+|00)86)?1\d{10}$/

2.7 邮箱验证

/^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

2.8 金额格式

/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/

2.9 身份证号

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

2.10 至少8为有数字、大小写字符、特殊字符

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

3 其他实践

3.1 返回参数数字的千分位分隔符字符串

// 返回参数数字的千分位分隔符字符串
function _comma(number) {
  return `${number}`.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}

3.2 以字符串的形式返回文件名扩展名

// 以字符串的形式返回文件名扩展名
const _getExFilename = (filename) => {
  return filename.replace(/(.*)(?=\..*)/, '')
}

3.3 将字符串参数URL中的参数解析并以对象的形式返回

// 将字符串参数URL中的参数解析并以对象的形式返回
const _getParams = (url) => {
  return Object.fromEntries(url.match(/\w*=\w*/g).map(item =>
    item.split('=')
  ))
}

持续更新……