正则表达式（Regular Expression）

Zhang_DongL

于 2024-01-10 15:39:46 发布

阅读量970

点赞数 27

文章标签：正则表达式前端

本文链接：https://blog.youkuaiyun.com/Zhang_DonL/article/details/135503771

版权

正则表达式（Regular Expression）是一种强大的文本处理工具，用于快速高效地执行复杂字符串操作，如搜索、替换、分割等。它使用一种特殊语法来描述需要匹配的字符序列或模式，从而在文本中定位和处理这些特定模式。

用途：

字符串搜索：在文本中寻找符合给定模式的字符串。
字符串提取：从文本中提取符合给定模式的字符串。
字符串替换：用新字符串替换文本中符合给定模式的部分。
字符串分割：按照给定模式将字符串拆分成多个部分。
输入验证：检查用户输入的数据是否符合预设的格式要求。

正则表达式具有高度灵活性和可扩展性，可以根据实际需求组合出各种复杂的模式来处理字符串。许多编程语言和应用程序都支持正则表达式，包括 Java、Python、JavaScript、Perlundefinedundefined 等

正则表达式元素及其作用：

字符类别：表示一组特定的字符。例如 \d 表示数字（0-9），\w 表示字母、数字和下划线，\s 表示空白字符（空格、制表符、换行符等）。
量词：用于控制某个字符或字符类别的重复次数。例如 {n}表示精确匹配 n 次，{n,}表示至少匹配 n 次，{n,m}表示至少匹配 n 次，最多匹配 m 次。
锚点：用于指定字符串开头或结尾的位置。例如 ^表示字符串的开头，$表示字符串的结尾。
括号：用于创建捕获组。括号内的内容将作为一个整体参与匹配，并可以在其他地方引用。例如 (foo)可以匹配 foo，并将其作为组 1 引用。
否定前瞻断言 和 肯定前瞻断言：用于分别排除或确认匹配项之后的内容。例如 (?=foo)只匹配那些后面跟着 foo 的字符串，(?!foo)则只匹配那些后面不跟 foo 的字符串。
管道符号 |：用于表示“或”关系。例如 foo|bar 可以匹配 foo 或 bar。
转义字符：\ 用于在特殊字符前添加一个反斜杠，使其成为普通字符。例如 \(表示匹配左圆括号，而不是起始一个新的捕获组。
位置标志：i 表示忽略大小写，m 表示多行模式，g 表示全局匹配。例如 /foo/i 将匹配 "Foo" 和 "foo"，而 /^foo/m 将匹配每个段落的开头处的 "foo"。
边界匹配器：\b 表示单词边界，\B 表示非单词边界。例如 \bfoo\b 只会匹配 "foo"而不是 "food" 中的 "foo"。
选择器/元字符：.表示匹配除换行符外的任意单个字符。例如 .*将匹配任意数量的任意字符。
反向引用：\number 表示引用前面捕获组中的内容。例如 (.)\1 将匹配两个相同的字符。
条件分支：(?=condition)true-part|false-part 或 (?<!condition)true-part|false-part 根据条件是否满足来选择匹配 true-part 还是 false-part。例如 (abc)?(?(1)\d+\.\d+|\d+)只有当前面匹配到 "abc" 时，才会继续匹配后面的浮点数。
环视断言：(?<=...) 和 (?<!...) 分别表示肯定后顾前瞻和否定后顾前瞻，只影响当前匹配的结果而不改变主匹配的内容。例如 (?<=abc).*(?=def)只匹配位于 "abc" 和 "def" 之间的字符。

掌握以上这些正则表达式元素，将有助于你更好地编写和理解复杂的正则表达式。请注意，虽然正则表达式功能强大，但在编写时仍应力求简洁，以免造成不必要的性能开销。

使用正则表达式进行文本处理的几种常用方法：

test()：测试一个字符串是否匹配某个模式。

返回值：如果匹配成功返回 true，否则返回 false。

const regex = /(\w+)\s+(\w+)/;
const match = regex.exec("John Doe");
console.log(match); // 输出：["John Doe", "John", "Doe"]

match()：从字符串中获取所有匹配某个模式的结果。

返回值：如果没有找到匹配项，返回 null；如果有多个匹配项，返回一个数组，其中每个元素都是一个 Match 对象；只有一个匹配项时，也可能返回一个 Match 对象。

const regex = /lo/g;
const matches = "Hello, world!".match(regex);
console.log(matches); // 输出：["lo", "lo"]

search()：查找字符串中的第一个匹配项，并返回其索引位置。

返回值：找到匹配项时返回其开始位置的索引，没有找到时返回 -1

const regex = /world/;
const index = "Hello, world!".search(regex);
console.log(index); // 输出：7

replace()：使用给定的替换串替换字符串中与指定模式匹配的所有子串。

返回值：处理后的字符串。

const regex = /world/g;
const replacedStr = "Hello, world! world again".replace(regex, "JavaScript");
console.log(replacedStr); // 输出："Hello, JavaScript! JavaScript again"

split()：将字符串分割成多个子串，子串由正则表达式匹配到的内容或分隔符决定。

返回值：一个包含子串的数组。

const regex = /,/g;
const splitArray = "One, Two, Three".split(regex);
console.log(splitArray); // 输出：["One", "Two", "Three"]

通过这些方法，你可以轻松地利用正则表达式进行文本处理和验证。

常用正则示例：

在前端开发中，正则表达式（Regular Expression）经常被用来验证用户输入、处理字符串、提取数据等任务。以下是一些常见的正则表达式示例：

邮箱地址验证：

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// 使用test()方法验证邮箱是否有效
console.log(emailRegex.test("example@example.com")); // 输出：true

URL 地址验证：

const urlRegex = /^(http|https):\/\/[^ "]+$/;

// 使用test()方法验证URL是否有效
console.log(urlRegex.test("https://www.example.com")); // 输出：true

手机号码验证（中国大陆地区手机号码）：

const mobilePhoneRegex = /^1[3-9]\d{9}$/;

// 使用test()方法验证手机号码是否有效
console.log(mobilePhoneRegex.test("13812345678")); // 输出：true

密码强度验证（至少包含数字、大写字母、小写字母和特殊字符中的任意三种）：

const passwordRegex = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[\W]).{8,}$/;

// 使用test()方法验证密码是否满足要求
console.log(passwordRegex.test("Pa$$word123")); // 输出：true

纯字母组成的用户名验证：

const usernameRegex = /^[a-zA-Z0-9_]+$/;

// 使用test()方法验证用户名是否有效
console.log(usernameRegex.test("username123")); // 输出：true

纯数字组成的数字串验证：

const numericStringRegex = /^\d+$/;

// 使用test()方法验证串是否有效
console.log(numericStringRegex.test("123456")); // 输出：true

中文字符验证：

const chineseCharacterRegex = /^[\u4e00-\u9fa5]+$/;

// 使用test()方法验证字符串是否全为中文字符
console.log(chineseCharacterRegex.test("你好世界")); // 输出：true

特定长度的字符串验证：

const lengthValidationRegex = new RegExp(`^.{${length},}$`);

// 使用test()方法验证字符串长度是否符合要求
console.log(lengthValidationRegex.test("example")); // 当length为7时输出：true

匹配 CSS 类名：

const cssClassNameRegex = /^[a-zA-Z][a-zA-Z0-9_-]*$/;

// 使用test()方法验证CSS类名是否有效
console.log(cssClassNameRegex.test("my-class-name")); // 输出：true

匹配 HTML 标签：

const htmlTagRegex = /<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>(.*?)<\/\1>/gim;

// 使用match()方法匹配HTML标签
console.log("<p class='example'>Hello, World!</p>".match(htmlTagRegex)); // 输出：["<p class='example'>Hello, World!</p>", "p", undefined]

IP 地址验证：

const ipAddressRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

// 使用test()方法验证IP地址是否有效
console.log(ipAddressRegex.test("192.168.1.1")); // 输出：

IPv6 地址验证：

const ipv6AddressRegex = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;

// 使用test()方法验证IPv6地址是否有效
console.log(ipv6AddressRegex.test("2001:0db8:85a3:0000:0000:8a2e:0370:7334")); // 输出：true

匹配 JSON 对象：

const jsonStringRegex = /^\s*{\s*"[^"]+"\s*:\s*"[^"]+"\s*,?\s*}+\s*$/;

// 使用test()方法验证JSON字符串是否有效
console.log(jsonStringRegex.test('{"key": "value"}')); // 输出：true

日期格式验证（例如：YYYY-MM-DD 或 YYYY/MM/DD）：

const dateRegex = /^\d{4}-\d{2}-\d{2}$/; // 或者 /^\d{4}\/\d{2}\/\d{2}$/

// 使用test()方法验证日期格式是否有效
console.log(dateRegex.test("2022-03-0.jpg")); // 输出：false
console.log(dateRegex.test("2022/03/03")); // 输出：(对于/分隔符版本) true

验证信用卡号（仅适用于 Visa 和 Mastercardundefined 卡种）：

const creditCardRegex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/;

// 使用test()方法验证信用卡号是否有效
console.log(creditCardRegex.test("4111111111111111")); // 输出：true

匹配身份证号码（中国大陆地区）：

const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

// 使用test()方法验证身份证号码是否有效
console.log(idCardRegex.test("123456789012345678")); // 输出：true

匹配 UUID（通用唯一标识符）：

const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;

// 使用test()方法验证UUID是否有效
console.log(uuidRegex.test("c5db69d2-6dc1-41c2-b1ae-a0e09f70b1a8")); // 输出：true