3分钟学会正则表达式

正则表达式的重要性：在 JavaScript 中，正则表达式对于高效进行文本处理、增强代码可读性和可维护性、具备与其他语言和工具的兼容性以及提高开发效率起着至关重要的作用。

1分钟带你熟悉正则表达式的语法规则：

一、字符匹配

1. 普通字符：直接匹配自身。例如，“abc” 将匹配字符串中 “abc” 这个确切的字符序列。
2. 特殊字符：具有特定的含义，如 .（点）、*（星号）、+（加号）等。

二、元字符

1. .：匹配除换行符之外的任何单个字符。
   • 例如，“a.c” 可以匹配 “abc”、“a1c” 等。
2. \d：匹配数字字符。相当于 [0-9]。

• “\d\d” 可以匹配 “12”、“34” 等两位数字。

1. \w：匹配字母、数字和下划线。相当于 [a-zA-Z0-9_]。

• “\w\w\w” 可以匹配 “abc”、“a1c”、“a_c” 等。

1. \s：匹配空白字符，包括空格、制表符、换行符等。

• “\s\w+\s” 可以匹配 “ aaa ”、“ bbb ” 等，其中两边是空白字符，中间是一个或多个字母、数字或下划线。

1. \b：匹配单词边界。

• “\bword\b” 可以匹配完整的单词 “word”，而不会匹配 “swordfish” 中的 “word”。

三、量词

1. *：匹配前面的元素零次或多次。
   • “a*” 可以匹配 “”（空字符串）、“a”、“aa”、“aaa” 等。
2. +：匹配前面的元素一次或多次。

• “a+” 可以匹配 “a”、“aa”、“aaa” 等，但不能匹配空字符串。

1. ?：匹配前面的元素零次或一次。

• “a?” 可以匹配 “”（空字符串）或 “a”。

1. {n}：匹配前面的元素恰好 n 次。

• “a {3}” 可以匹配 “aaa”。

1. {n,}：匹配前面的元素至少 n 次。

• “a {2,}` 可以匹配 “aa”、“aaa”、“aaaa” 等。

1. {n,m}：匹配前面的元素至少 n 次，至多 m 次。

• “a {2,4}` 可以匹配 “aa”、“aaa”、“aaaa”。

四、字符组

1. [abc]：匹配 “a”、“b” 或 “c” 中的任意一个字符。
   • “[a-z]” 可以匹配任何小写字母。
   • “[A-Z]” 可以匹配任何大写字母。
   • “[0-9]” 可以匹配任何数字。
2. [^abc]：匹配除了 “a”、“b”、“c” 之外的任意字符。

五、锚点

1. ^：匹配字符串的开头。
   • “^abc” 只能匹配以 “abc” 开头的字符串。
2. $：匹配字符串的结尾。

• “abc\$” 只能匹配以 “abc” 结尾的字符串。

六、分组和捕获

1. ( )：将多个字符或表达式组合成一个分组。可以用于应用量词、进行捕获等。
   • “(abc)+” 可以匹配 “abc”、“abcabc” 等。
2. 捕获组可以在后续通过反向引用进行引用。例如，“(\w)\1” 可以匹配 “aa”、“bb” 等重复的字符。

七、选择和管道符

1. |：表示选择，相当于 “或” 的关系。
   • “abc|def” 可以匹配 “abc” 或 “def”。

八、标志

在创建正则表达式时，可以使用标志来改变正则表达式的行为。

1. g（全局匹配）：查找所有的匹配项，而不仅仅是第一个。
2. i（忽略大小写）：在匹配时不区分大小写。
3. m（多行匹配）：使 ^ 和 $ 可以匹配行的开头和结尾，而不仅仅是整个字符串的开头和结尾。

1分钟教会你如何创建一个正则表达式：

1. 使用正则表达式字面量：

let pattern = /pattern/flags;

例如，/abc/表示匹配字符串中 “abc” 这个确切的字符序列。 2. 使用 RegExp构造函数

  let pattern = new RegExp('pattern', 'flags');

这与字面量的方式类似，但可以接受字符串形式的模式和标志。

拓展：

正则表达式的方法

1. test()：用于测试一个字符串是否匹配某个正则表达式。如果匹配成功，返回 true，否则返回 false。

 let str = 'abc';
   let pattern = /abc/;
   console.log(pattern.test(str)); // true

2. exec()：执行一个搜索，返回一个结果数组或者 null。如果有匹配，数组的第一个元素是匹配的字符串，后面的元素是捕获组的内容。

let str = 'abcdef';
   let pattern = /a(bc)(d)/;
   let result = pattern.exec(str);
   console.log(result); // ['abcdef', 'bc', 'd']

捕获组和反向引用

1. 捕获组：使用括号可以创建捕获组，可以在后续的引用中使用。

 let str = 'abc123def';
   let pattern = /(abc)(123)/;
   let result = pattern.exec(str);
   console.log(result[1]); // abc
   console.log(result[2]); // 123

2. 反向引用：可以在正则表达式中使用 \1、\2等来引用捕获组。

 let str = 'abab';
   let pattern = /(ab)\1/;
   console.log(pattern.test(str)); // true

1分钟教会你学会验证常见表单数据

1、验证电子邮件地址

电子邮件地址的格式通常为 “用户名 @域名”。可以使用以下正则表达式进行验证：

let emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
let email = 'user@example.com';
console.log(emailRegex.test(email)); // true

2、验证手机号码

手机号码的格式可能因地区而异。以中国的 11 位手机号码为例，可以使用以下正则表达式：

let phoneRegex = /^1[3-9]\d{9}$/;
let phoneNumber = '13812345678';
console.log(phoneRegex.test(phoneNumber)); // true

3、验证密码强度

例如，要求密码至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，并且长度至少为 8 位。可以使用以下正则表达式：

let passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
let password = 'P@ssw0rd';
console.log(passwordRegex.test(password)); // true

4、验证用户名

假设用户名只能包含字母、数字和下划线，且长度在 3 到 16 位之间。可以使用以下正则表达式：

let usernameRegex = /^[a-zA-Z0-9_]{3,16}$/;
let username = 'user_name';
console.log(usernameRegex.test(username)); // true

5、验证 URL 地址

以下是一个相对简单的 URL 验证正则表达式

let urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
let url = 'https://www.example.com';
console.log(urlRegex.test(url)); // true

6，提取网页所有链接：

const htmlContent = '<a href="https://www.example.com">Link 1</a> <a href="https://another.example.com">Link 2</a>';
const linkRegex = /href="([^"]+)"/g;
let match;
const links = [];
while ((match = linkRegex.exec(htmlContent))!== null) {
  links.push(match[1]);
}
console.log(links); // ['https://www.example.com', 'https://another.example.com']

7，替换字符串中特定内容：

const text = 'The quick brown fox jumps over the lazy dog.';
const replacedText = text.replace(/fox/g, 'cat');
console.log(replacedText); // 'The quick brown cat jumps over the lazy dog.'

8，提取文件中的拓展名：

const fileName = 'document.pdf';
const extensionRegex = /\.(.+)$/;
const extension = fileName.match(extensionRegex)[1];
console.log(extension); // 'pdf'

在实际应用中，可以根据具体的需求调整正则表达式的模式，以实现更准确的用户输入验证。同时，正则表达式虽然强大，但也可能会有一些局限性，对于一些复杂的验证场景，可能需要结合其他验证方法来确保数据的有效性。