正则表达式在前端中的使用

前言

前文讲述了正则表达式的语法规则:正则表达式完全解析
本文正则表达式在前端中常用以及举几个例子

创建正则表达式

//第一种 字面量创建法
const regObj = /表达式/修饰符;

//第二种 构造函数创建法
const regObj = new RegExp('/表达式/','修饰符')

正则表达式实例属性与方法

source：返回正则表达式的文本字符串形式。
flags：返回正则表达式的修饰符标志字符串。例如，如果正则表达式使用了 g（全局匹配）和 i（不区分大小写）修饰符，则 flags 的值为 "gi"。
global：一个布尔值，表示正则表达式是否具有全局匹配标志 g。
ignoreCase：一个布尔值，表示正则表达式是否具有不区分大小写的标志 i。
multiline：一个布尔值，表示正则表达式是否具有多行匹配标志 m。
sticky：一个布尔值，表示正则表达式是否具有粘附匹配标志 y。
unicode：一个布尔值，表示正则表达式是否具有 Unicode 匹配标志 u
lastIndex:用于指示下一次匹配的起始位置。它通常与 exec() 方法一起使用，用于迭代搜索字符串中的多个匹配项。

const regex = /hello/gi;

regex.test();

console.log(regex.source); // 输出 "hello"

console.log(regex.flags); // 输出 "gi"

console.log(regex.global); // 输出 true

console.log(regex.ignoreCase); // 输出 true

console.log(regex.multiline); // 输出 false

console.log(regex.sticky); // 输出 false

console.log(regex.unicode); // 输出 false


const regex1 = /a/g;

const str = "abcabcabc";

let match;

let res = regex.exec(str)

while ((match = regex.exec(str)) !== null) {

console.log(`找到匹配项 "${match[0]}"，起始位置：${match.index}`);

console.log(`下一次匹配的起始位置：${regex.lastIndex}`);

}
//如果没有设置全局匹配标志 `g`，或者正则表达式不是通过 `exec()` 方法进行搜索，`lastIndex` 的值将始终为 0。

test() 方法：用于检测字符串中是否存在匹配正则表达式的内容，并返回 true 或 false 。

const reg = /cat/;
let res = reg.test("cat is a good man cat");
console.log(res);

exec() 方法：用于检索字符串中符合正则表达式的第一个子串，如果找到，则返回一个数组
,否则返回 null.

const str = "hello, world!";

const reg = /ld/;

const res = reg.exec(str);

console.log(res); 
//输出[ 'ld', index: 10, input: 'hello, world!', groups: undefined ]
//`'ld'`：这是匹配到的子串，即符合正则表达式的内容。
// `index: 10`：这是匹配到的子串在原始字符串中的起始索引位置。在这种情况下，子串 `'ld'` 在原始字符串 `'hello, world!'` 中从索引位置 `10` 开始。
//`input: 'hello, world!'`：这是原始字符串，即被检索的字符串。
// `groups: undefined`：这是一个可选的属性，用于指定匹配中的命名捕获组。在这种情况下，未定义任何命名捕获组。

字符串方法

match() 方法：该方法用于检索字符串中符合正则表达式的所有子串。它返回一个数组，数组中的元素就是子串。如果没有找到任何匹配的子串，则返回 null。

const str = "hello, world!";

const reg = /l/g;

const res = str.match(reg);

console.log(res); // 输出 ["l", "l", "l"]

replace() 方法：该方法用于将字符串中符合正则表达式的子串替换为指定的字符串。它返回一个新的字符串，原字符串没有被改变。

const str = "hello, world!";

const reg = /o/g;

console.log(str.replace(reg, "0")); // 输出 "hell0, w0rld!"

search() 方法：该方法用于查找字符串中是否存在匹配正则表达式的内容。如果找到，则返回第一个匹配子串的位置（从 0 开始），否则返回 -1

const str = "hello, world!";

const reg = /world/;

console.log(str.search(reg)); // 输出 7

一些使用例子

// 11位电话号码
const regPhone = /^1[345678]\d{9}$/g
let res = reg.test('1233412') // false
let res1 = reg.test('13434322602') // true
//QQ号
const regQQ = /^[1-9][0-9]{4,9}$/g
//16进制的方式表示颜色
const regColor = /#?([a-fA-F0-9]{6}|([a-fA-F0-9]{3})/g
let resColor = regColor.test('#FFF')// true 
let resColor = regColor.test('#481D1CC')// true
//邮箱地址
const regEmail = /^([a-zA-Z0-9_\.\-]+)@(A-Za-z0-9_\-\.+)\.([A-Za-z{2,6])$/g
//url
const regUrl = /^((https?|ftp|file):\/\/)?([\da-z\.\-]+)\.([a-z\.]{2,6})(\/\w\.\-]*)*\/?$/g
//html标签。 <div class="main">hello,world</div>. <img />
const regTag = /^(<[a-z]+)([^>]+)*(>(.*)<\/\1>|\s\/>)/gm
//ipv4地址
//3.23.12.23
//233.21.2.1
const regIPV4 = /^(([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])\.){3}([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])$/gm
//日期 2023-10-01
const regDate = /^[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9|[12][0-9]|3[01])$/g
//身份证号
const regID = /^[1-9][0-9]{5}(18|19|([23][0-9]))[0-9]{2}(0[1-9]|1[0-2])(0[1-9][12][0-9]|3[01])[0-9]{3}[0-9xX]$/

视频:正则表达式的10个例子