js中的正则表达式入门(大量实例代码)

接下来我会详细讲解“js中的正则表达式入门(大量实例代码)”的攻略。

什么是正则表达式？

正则表达式是一种用于匹配字符串的模式，是一种强大而灵活的工具。它们由普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）组成。举个例子，用正则表达式来匹配邮箱中的@符号：

/@/

这个正则表达式表示匹配字符串中的@符号。

正则表达式语法

正则表达式语法十分丰富，可以匹配几乎所有的字符串模式。

字符匹配

• 普通字符：匹配自身字符。例如，正则表达式/abc/表示匹配字符串中的"abc"。

• 元字符（元字符前面需要加上反斜杠）：

• .：匹配任意单个字符。例如，表达式/a./可以匹配"ab"、"ax"、"ao"等。

• \d：匹配数字0-9。例如，表达式/\d+/可以匹配"123"、"4567"等。

• \w：匹配字母、数字和下划线。例如，表达式/\w/可以匹配"a"、"b"、"1"、"_"等。

预定义字符集

预定义字符集是一些已经定义好的字符集。

• \s：匹配任意空白字符，包括空格、制表符、换行符等。例如，表达式/\s/可以匹配" "、"\t"、"\n"等。

• \w：匹配任何字母数字字符，包括下划线。例如，表达式/\w/可以匹配"a"、"b"、"1"、"_"等。

• \d：匹配任何数字字符。例如，表达式/\d/可以匹配"1"、"2"、"3"等。

量词

量词表示匹配次数。

• +：匹配1次或多次。例如，表达式/a+/可以匹配"aaa"、"abca"、"a"等。

• *：匹配0次或多次。例如，表达式/a*/可以匹配""、"a"、"aa"等。

• ?：匹配0次或1次。例如，表达式/a?b/可以匹配"b"、"ab"等。

• {n}：匹配n次。例如，表达式/a{3}/可以匹配"aaa"，但不能匹配"aa"或"a"。

• {n,}：匹配n次或更多次。例如，表达式/a{3,}/可以匹配"aaa"、"aaaa"等。

• {n,m}：匹配n到m次。例如，表达式/a{3,5}/可以匹配"aaa"、"aaaa"、"aaaaa"，但不能匹配"aa"或"a"。

分组和引用

分组可以将正则表达式中的多个字符作为一个单独的单元进行匹配。

• 捕获分组：用括号将想要匹配的字符括起来。例如，表达式/(\w+)/可以匹配任何一个单词。

• 零宽断言：零宽断言不占用字符，例如提供前缀或后缀匹配。例如，表达式/\bw\w+\b(?<!wet)/可以匹配以w开头、不是以wet结尾的单词。

示例代码

接下来，我会提供两个示例代码，来说明正则表达式的用处：

示例1

需求：判断一个字符串是否是合法的email地址。

function isEmail(str) {
  var pattern = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+$/;
  return pattern.test(str);
}

这个正则表达式包含了多个部分，我们来逐步分析：

• ^：匹配字符串的开始位置。
• ([a-zA-Z0-9._-])+：匹配一个或多个由字母、数字、点、下划线、中划线组成的字符串。
• @：匹配一个@符号。
• ([a-zA-Z0-9_-])+：匹配一个或多个由字母、数字、中划线、下划线组成的字符串。
• (\.[a-zA-Z0-9_-]+)+：匹配一个或多个由点和字母、数字、中划线、下划线组成的字符串。
• $：匹配字符串的结束位置。

这个正则表达式通过匹配email地址的常见格式，进行email地址验证。

示例2

需求：将html字符串中的所有img标签的src属性值提取出来。

var html = '<img src="1.jpg"><img src="2.jpg">';
var pattern = /<img\s+src=['"](.*?)['"]/gi;
var match;
while ((match = pattern.exec(html)) !== null) {
  console.log(match[1]);
}

这个正则表达式也包含了多个部分：

• <img：匹配"<img"字符串。
• \s+：匹配一个或多个空格字符。
• src=：匹配"src="字符串。
• ['"]：匹配单引号或双引号。
• (.*?)：匹配任意字符，但尽可能少的匹配。
• ['"]：再次匹配单引号或双引号。

通过这个正则表达式，我们可以把一个html字符串中的所有img标签的src属性值提取出来。

结语

到这里，我们就讲解了js中的正则表达式入门(大量实例代码)，通过以上内容应该能使大家对正则表达式有一个较为全面的认识，然后在日常开发中就能更自如地运用正则表达式了。