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

前言

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

创建正则表达式

//第一种 字面量创建法
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标签。 
hello,world
.
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个例子

你可能感兴趣的:(正则表达式,前端)