整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript正则表达式常用技巧

则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。正则表达式的掌握程度能粗略地看出程序员的技术底子,所以技术面试、编程竞赛等 都特别喜欢考察正则表达式。本篇就带你一起夯实一下 JavaScript 正则表达式的一些使用技巧:

创建正则表达式

在 JavaScript 的世界,创建正则表达式有2个方法: (1)使用一个正则表达式字面量,其由包含在斜杠之间的模式组成。比如 :

const reg = /ab+c/

(2)调用RegExp对象的构造函数。比如:

const reg = new RegExp("ab+c")

注意:以上2个方法虽然都能创建正则表达式,但是还是有区别的: (1)使用第一个方法,在脚本加载后正则表达式字面量就会被编译。当正则表达式保持不变时,使用此方法可获得更好的性能。 (2)使用第二个方法,在脚本运行过程中用构造函数创建的正则表达式会被编译。如果正则表达式将会改变,或者它将会从用户输入等来源中动态地产生,就需要使用构造函数来创建正则表达式。

当然,这样表述可能不太深刻,下面找一道面试题带你实践一下。

经典面试题 "Word Finder"

题目要求:
使用一个方法来扩展字典,该方法返回与模式匹配的单词列表。这个模式可以包含字母(小写)和占位符("?")。占位符只代表一个任意的字母,比如: 

const fruits = new Dictionary(['banana', 'apple', 'papaya', 'cherry']);
fruits.getMatchingWords('lemon');     // must return []
fruits.getMatchingWords('cherr??');   // must return []
fruits.getMatchingWords('?a?a?a');    // must return ['banana', 'papaya']
fruits.getMatchingWords('??????');    // must return ['banana', 'papaya', 'cherry']

补充说明:
(1)单词和模式都是小写
(2)返回单词的顺序无关紧要

上面这道题目是典型的 正则表达式应用题,考察的知识点是2个: (1)使用 RegExp 对象 动态创建正则表达式 (2)使用 /./ 匹配一个任意字符

因此不难有如下解决方案(ps:这个是我的解决方案,虽然解法比较low,但是逻辑应该还算清晰,容易理解)

// 字典构造器
function Dictionary(words) {
  this.words = words;
}

// 原型里拓展解法
Dictionary.prototype.getMatchingWords = function(pattern) {
  let res = []
  const reg = new RegExp("^" + pattern.replace(/\?/g, '.') + "$")  // 创建正则表达式
  for (let x of this.words) {
    if (reg.test(x)) res.push(x) 
  }
  return res
}

如果你有更好的解法,欢迎评论留言哈 ^_^

正则表达式模式

一个正则表达式模式是由简单的字符所构成的,比如 /abc/;或者是简单和特殊字符的组合,比如 /ab*c/ 或 /Chapter (\d+)\.\d*/

简单模式

简单模式是由想要匹配的具体字符组成,且严格匹配字符顺序。比如,/abc/ 这个模式就能且仅能匹配 "abc" 字符按照顺序同时出现的情况,而 "bac" 或 "cab" 等就无法匹配。

特殊字符

当需要匹配一个不确定的字符串时,比如寻找一个或多个 "b",或者寻找空格,可以在模式中使用特殊字符。特殊字符还包括如下:

  • 断言:表示一个匹配在某些条件下发生。断言包括先行断言、后行断言和条件表达式
  • 字符类:区分不同类型的字符,例如区分字母和数字
  • 组和范围:表示表达式字符的分组和范围
  • 量词:表示匹配的字符或条件表达式的数量
  • Unicode属性转义:基于 Unicode字符属性区分字符,例如大写和小写字母、数字符合和标点

Escaping

当需要使用任何特殊字符的字面值(例如,搜索字符 *),你必须通过在它前面放一个反斜杠来转义它。 例如,要搜索'a'后跟*后跟'b',你应该使用 /a\*b/- 反斜杠“转义”字符 *,使其成为文字而非特殊符号。将用户输入转义为正则表达式中的一个字面字符串,可以通过简单的替换来实现:

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");   //$&表示整个被匹配的字符串
}

使用正则表达式

前面讲到,正则表达式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。这些方法在 JavaScript 手册 中有详细的解释,下面只简单罗列下各自功能,不做展开:

  • exec:在字符串中执行查找匹配的 RegExp 方法,它返回一个数组(未匹配到则返回 null)
  • test:在字符串中测试是否匹配的 RegExp 方法,它返回 true 或 false
  • match:在字符串中执行查找匹配的 String 方法,它返回一个数组,在未匹配到时会返回 null
  • matchAll:在字符串中执行查找所有匹配的 String 方法,它返回一个迭代器(iterator)
  • search:在字符串中测试匹配的 String 方法,它返回匹配到的位置索引,或者在失败时返回 -1
  • replace:在字符串中执行查找匹配的 String 方法,并且使用替换字符串替换掉匹配到的子字符串
  • split:使用正则表达式或者一个固定字符串分隔一个字符串的String方法,并将分隔后的子字符串存储到数组中

一个简单的快速记忆方法: (1)想要知道在一个字符串中的一个匹配是否被找到,使用 test 或 search 方法 (2)想得到更多的信息(但是比较慢)则可以使用 exec 或 match 方法

举个栗子,使用exec方法在一个字符串中查找一个匹配:

const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdbsbz");

如果不需要访问正则表达式的属性,这个脚本通过另一个方法来创建myArray:

const myArray = /d(b+)d/g.exec("cdbbdbsbz");
// 和 "cdbbdbsbz".match(/d(b+)d/g); 相似。
// 但是 "cdbbdbsbz".match(/d(b+)d/g) 输出数组 [ "dbbd" ],
// 而 /d(b+)d/g.exec('cdbbdbsbz') 输出数组 [ "dbbd", "bb", index: 1, input: "cdbbdbsbz" ].

如果想通过一个字符串构建正则表达式,那么这个脚本还有另一种方法:

const myRe = new RegExp("d(b+)d", "g");
const myArray = myRe.exec("cdbbdbsbz");

使用括号的子字符串匹配

一个正则表达式模式使用括号,将导致相应的子匹配被记住。例如,/a(b)c / 可以匹配字符串“abc”,并且记得“b”。回调这些括号中匹配的子串,使用数组元素[1],……[n]。

使用括号匹配的子字符串的数量是无限的。返回的数组中保存所有被发现的子匹配。下面的例子说明了如何使用括号的子字符串匹配。

下面的脚本使用 replace() 方法来转换字符串中的单词。在匹配到的替换文本中,脚本使用替代的, 表示第一个和第二个括号的子字符串匹配:

const re = /(\w+)\s(\w+)/;
const str = "John Smith";
const newstr = str.replace(re, "$2, $1");
console.log(newstr);   // 输出 "Smith, John"

通过标志进行高级搜索

正则表达式有六个可选参数 (flags) 允许全局和不分大小写搜索等。这些参数既可以单独使用也能以任意顺序一起使用, 并且被包含在正则表达式实例中:

  • g:全局搜索
  • i:不区分大小写搜索
  • m: 多行搜索
  • s:允许.匹配换行符
  • u:使用Unicode码的模式进行匹配
  • y:执行“粘性(sticky)”搜索, 匹配从目标字符串的当前位置开始

例如,re = /\w+\s/g 将创建一个查找一个或多个字符后有一个空格的正则表达式,或者组合起来像此要求的字符串:

const re = /\w+\s/g;
const str = "fee fi fo fum";
const myArray = str.match(re);
console.log(myArray);

// ["fee ", "fi ", "fo "]

使用 .exec() 方法时,与 g 标志关联的行为是不同的。 (“class”和“argument”的作用相反:在.match()的情况下,字符串类(或数据类型)拥有该方法,而正则表达式只是一个参数,而在.exec()的情况下,它是拥有该方法的正则表达式,其中字符串是参数。对比str.match(re)与re.exec(str) ), g标志与.exec()方法一起使用获得迭代进展:

const xArray; while(xArray = re.exec(str)) console.log(xArray);
// produces: 
// ["fee ", index: 0, input: "fee fi fo fum"]
// ["fi ", index: 4, input: "fee fi fo fum"]
// ["fo ", index: 7, input: "fee fi fo fum"]

除此之外,m标志用于指定多行输入字符串应该被视为多个行。如果使用m标志,^和$匹配的开始或结束输入字符串中的每一行,而不是整个字符串的开始或结束。


@参考:正则表达式

、校验数字的表达式

  1. 数字:^[0-9]*$
  2. n位的数字:^\d{n}$
  3. 至少n位的数字:^\d{n,}$
  4. m-n位的数字:^\d{m,n}$
  5. 零和非零开头的数字:^(0|[1-9][0-9]*)$
  6. 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$
  7. 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$
  8. 正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$
  9. 有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
  10. 有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
  11. 非零的正整数:^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
  12. 非零的负整数:^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
  13. 非负整数:^\d+$ 或 ^[1-9]\d*|0$
  14. 非正整数:^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
  15. 非负浮点数:^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
  16. 非正浮点数:^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
  17. 正浮点数:^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
  18. 负浮点数:^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
  19. 浮点数:^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

二、校验字符的表达式

  1. 汉字:^[\u4e00-\u9fa5]{0,}$
  2. 英文和数字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
  3. 长度为3-20的所有字符:^.{3,20}$
  4. 由26个英文字母组成的字符串:^[A-Za-z]+$
  5. 由26个大写英文字母组成的字符串:^[A-Z]+$
  6. 由26个小写英文字母组成的字符串:^[a-z]+$
  7. 由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
  8. 由数字、26个英文字母或者下划线组成的字符串:^\w+$ 或 ^\w{3,20}
  9. 中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$
  10. 中文、英文、数字但不包括下划线等符号:^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
  11. 可以输入含有^%&',;=?$\"等字符:[^%&',;=?$\x22]+
  12. 禁止输入含有~的字符[^~\x22]+

其它:

.*匹配除 \n 以外的任何字符。

/[\u4E00-\u9FA5]/ 汉字

/[\uFF00-\uFFFF]/ 全角符号

/[\u0000-\u00FF]/ 半角符号

三、特殊需求表达式

  1. Email地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
  2. 域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
  3. InternetURL:[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
  4. 手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
  5. 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX):^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
  6. 国内电话号码(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}
  7. 身份证号(15位、18位数字):^\d{15}|\d{18}$
  8. 短身份证号码(数字、字母x结尾):^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
  9. 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
  10. 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线):^[a-zA-Z]\w{5,17}$
  11. 强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间):^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
  12. 日期格式:^\d{4}-\d{1,2}-\d{1,2}
  13. 一年的12个月(01~09和1~12):^(0?[1-9]|1[0-2])$
  14. 一个月的31天(01~09和1~31):^((0?[1-9])|((1|2)[0-9])|30|31)$

钱的输入格式:

1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000":^[1-9][0-9]*$

2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式:^(0|[1-9][0-9]*)$

3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号:^(0|-?[1-9][0-9]*)$

4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分:^[0-9]+(.[0-9]+)?$

5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的:^[0-9]+(.[0-9]{2})?$

6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样:^[0-9]+(.[0-9]{1,2})?$

7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样:^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$

8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须:^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

备注:这就是最终结果了,别忘了+可以用*替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里

  1. xml文件:^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
  2. 中文字符的正则表达式:[\u4e00-\u9fa5]
  3. 双字节字符:[^\x00-\xff] (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1))
  4. 空白行的正则表达式:\n\s*\r (可以用来删除空白行)
  5. HTML标记的正则表达式:<(\S*?)[^>]*>.*?</>|<.*? /> (网上流传的版本太糟糕,上面这个也仅仅能部分,对于复杂的嵌套标记依旧无能为力)
  6. 首尾空白字符的正则表达式:^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)
  7. 腾讯QQ号:[1-9][0-9]{4,} (腾讯QQ号从10000开始)
  8. 中国邮政编码:[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
  9. IP地址:\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
  10. IP地址:((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
  11. IP-v4地址:\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b (提取IP地址时有用)
  12. 校验IP-v6地址:(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))
  13. 子网掩码:((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
  14. 校验日期:^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$(“yyyy-mm-dd“ 格式的日期校验,已考虑平闰年。)
  15. 抽取注释:<!--(.*?)-->
  16. 查找CSS属性:^\s*[a-zA-Z\-]+\s*[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}
  17. 提取页面超链接:(<a\s*(?!.*\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\.)?'.implode('|(?:www\.)?', $follow_list).'))[^" rel="external nofollow" ]+)"((?!.*\brel=)[^>]*)(?:[^>]*)>
  18. 提取网页图片:\< *[img][^\\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)
  19. 提取网页颜色代码:^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
  20. 文件扩展名效验:^([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?"<>|]+\.txt(l)?$
  21. 判断IE版本:^.*MSIE [5-8](?:\.[0-9]+)?(?!.*Trident\/[5-9]\.0).*$

附表:

Java中,可以使用正则表达式来提取HTML中的任意内容。以下是一个示例代码,演示如何使用正则表达式从HTML中提取文本:

import java.util.regex.Matcher;  import java.util.regex.Pattern;    public class HtmlParser {      public static void main(String[] args) {          String html = "<html><head><title>My Website</title></head><body><p>This is some sample text.</p></body></html>";          Pattern pattern = Pattern.compile("<p[^>]*>(.*?)</p>");          Matcher matcher = pattern.matcher(html);          String pText = matcher.group(1);          System.out.println(pText);      }  }

在上面的代码中,我们首先定义了一个HTML字符串,然后使用PatternMatcher类来匹配HTML中的文本。Pattern类用于定义正则表达式,Matcher类用于在HTML中查找匹配的文本。

在正则表达式中,我们使用了<p[^>]*>来匹配以<p>开头,后面跟着任意数量的字符,再以</p>结尾的文本。其中,[^>]*表示匹配任意数量的字符,</p>表示匹配</p>后面的任意字符。

最后,我们使用group(1)方法来获取匹配的文本,并将其打印到控制台上。

需要注意的是,正则表达式可以根据HTML标签的不同来进行不同的