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

前言

前文讲述了正则表达式的语法规则:正则表达式完全解析

本文正则表达式在前端中常用以及举几个例子

创建正则表达式

js 复制代码
//第一种 字面量创建法
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() 方法一起使用,用于迭代搜索字符串中的多个匹配项。

js 复制代码
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 。

js 复制代码
const reg = /cat/;
let res = reg.test("cat is a good man cat");
console.log(res);

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

,否则返回 null.

js 复制代码
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。

js 复制代码
const str = "hello, world!";

const reg = /l/g;

const res = str.match(reg);

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

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

js 复制代码
const str = "hello, world!";

const reg = /o/g;

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

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

js 复制代码
const str = "hello, world!";

const reg = /world/;

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

一些使用例子

js 复制代码
// 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个例子

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试