首页/文章/javascript

前端学正则

2024-08-16
275010 分钟
...

语法

/正则表达式主体/修饰符

其中修饰符是可选的。

实例:

var patt = /test/i
  • /test/i 是一个正则表达式。
  • test 是一个正则表达式主体 (用于检索)。
  • i 是一个修饰符 (含义是搜索不区分大小写)。

正则表达式修饰符

修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m执行多行匹配。

示例g:

const str = 'abc123def456ghi789';  
const regex = /def456/g; 

方括号

方括号用于查找某个范围内的字符:

| 表达式 | 描述 | | --- | --- | --- | --- | | [abc] | 查找方括号之间的任何字符。 | | [[^abc]](www.runoob.com/jsref/jsref…) | 查找任何不在方括号之间的字符。 | | [0-9] | 查找任何从 0 至 9 的数字。 | | [a-z] | 查找任何从小写 a 到小写 z 的字符。 | | [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 | | [A-z] | 查找任何从大写 A 到小写 z 的字符。 | | [adgk] | 查找给定集合内的任何字符。 | | [^adgk] | 查找给定集合外的任何字符。 | | (red | blue | green) | 查找任何指定的选项。 |

示例 [0-9]

在正则表达式中,[0-9] 是一个字符集合,用于匹配任何一个在 0 到 9 之间的数字字符。

const str = 'abc123def456ghi789';  
const regex = /[0-9]/g; 
  
const matches = str.match(regex); 
  
console.log(matches); 

在这个例子中,正则表达式 /[0-9]/g 会匹配字符串 str 中的所有单个数字字符,并返回一个包含所有匹配结果的数组。每个数组元素都是一个匹配到的数字字符。

match下文有介绍

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符描述
.查找单个字符,除了换行和行结束符。
\w查找数字、字母及下划线。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

示例\d 元字符

\d 是一个元字符,用于匹配任何一个十进制数字,等价于 [0-9]。这意味着它会匹配字符串中的 '0'、'1'、'2'、'3'、'4'、'5'、'6'、'7'、'8' 或 '9'。

onst str = "我的电话号码是123-456-7890";  
const regex = /\d/g; 
  
const matches = str.match(regex);  
  
console.log(matches); 

在这个例子中,正则表达式 /\d/g 会匹配字符串 str 中的所有单个数字字符,并返回一个包含所有匹配结果的数组。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。
n*匹配任何包含零个或多个 n 的字符串。例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。
n?匹配任何包含零个或一个 n 的字符串。例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。
n{X}匹配包含 X 个 n 的序列的字符串。例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的两个 "a",且匹配 "caaandy." 中的前两个 "a"。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"。注意,当匹配 "caaaaaaandy" 时,即使原始字符串拥有更多的 "a",匹配项也是 "aaa"。
n$匹配任何结尾为 n 的字符串。
[^n](www.runoob.com/jsref/jsref…)匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

示例 量词( + ):

假设我们有一个字符串,包含了一些单词、数字以及特殊字符,我们想要找出所有由一个或多个连续字母数字字符(字母或数字)组成的序列。

const str = "kljshhh!@#test456";  
const regex = /\w+/g; 
const matches = str.match(regex);  
console.log(matches); 

search() 方法

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回第一次出现的位置(索引)。如果未找到匹配项,则返回 -1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>正则的练习</title>
    </head>
    <body>
        <script type="text/javascript">
            var str = "Hello World!";
            let index = str.search(/llo/i);
            console.log(index)  
        </script>
    </body>
</html>

replace() 方法

replace() 方法是一个非常实用的字符串方法,用于在字符串中查找一个匹配项,并将其替换为新的子串。下面展示一些常用 使用场景的示例:

  • 替换字符串中的特定字符
let str = "Hello, world!";  
let newStr = str.replace("world", "快乐就是哈哈哈");  
console.log(newStr); 
  • 替换字符串中的特定字符(全局替换)

默认情况下,replace() 方法只替换第一个匹配项,我们可以加上全局搜索标志 g,匹配所有。

let str = "I love 快乐就是哈哈哈. 快乐就是哈哈哈 is great.";  
let newStr = str.replace(/快乐就是哈哈哈/g, "JS");  
console.log(newStr); 
  • 替换字符串中的空格
let str = "Hello     快乐就是哈哈哈!";  

let newStr = str.replace(/\s+/g, " ");  
console.log(newStr); 
  • 删除字符串中的特定字符

我们可以通过将替换值设置为空字符串 "" 来删除字符串中的特定字符或子字符串。

let str = "Hello, world!";  
let newStr = str.replace(", world!", "");  
console.log(newStr); 

test() 方法

用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

var patt = /e/;
let str = patt.test("Hello World!");
console.log(str) 

exec() 方法

用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

var patt = /el/;
let str = patt.exec("Hello World!");
console.log(str) 

match() 方法

  • 如果正则表达式不包含 g 标志(全局搜索),match() 方法将返回一个数组,其中存放匹配的结果。如果没有找到任何匹配的结果,则返回 null
  • 如果正则表达式包含 g 标志,match() 方法将返回一个包含所有匹配结果的数组

示例:

let str = "The quick brown fox jumps over the lazy dog.";  

let regexp = /fox/;  
  

let match = str.match(regexp);  
  
if (match !== null) {  
  
  console.log("Found:", match[0]); 
  
  
  
} else {  
  console.log("找不到啊");  
}
const str = "kljshhh!@#test456";  
const regex = /\w+/g; 
const matches = str.match(regex);  
console.log(matches); 

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
javascript2026-02-24
navigator.sendBeacon全指南
在前端开发中,埋点系统是必不可少的一环。我们经常需要在用户 关闭页面 、 刷新 或 跳转路由 时,向服务器发送最后一条统计数据(比如用户停留时长、页面跳出率)。 但这看似简单的需求,在实现时却危机四伏:请求发不出去?页面跳转卡顿?今天我们就来聊聊这个问题的终极解决方案 —— 。 一、 痛点与传统方案的挣扎 场景还原 当用户点击关闭按钮时,浏览器会触发生命周期事件( 或 )。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求,浏览...
学习
javascript2025-11-02
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统:从用户点击到事件对象的完整旅程 “当我点击页面按钮时,背后发生了什么?为什么回调函数能收到一个包含丰富信息的event对象?今天,让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者,我们每天都在写这样的代码: 这段代码如此熟悉,以至于我们很少停下来思考:​ ​这个 对象到底从哪里来?它为什么能知道点击的精确坐标?为什么能识别是哪个元素被点击了?​ ​ 更神奇的是,当我们手动创建事件时:...
学习
javascript2025-10-01
实现大文件上传全流程详解
在日常开发中,大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件,直接上传不仅容易超时,还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案,支持分片上传、断点续传、秒传和手动中。 一、先看效果:我们要实现什么? 先上核心功能清单,确保大家明确目标,知道我们要解决哪些实际问题: 大文件分片上传 :将文件切成固定大小的小片段分批上传,避免单次请求超时 秒传 :服务器已存在完整文件时,直接返...
学习
javascript2025-09-18
JavaScript 的多线程能力:Worker
如果你写过一些计算量稍大的 JavaScript 代码,比如图像处理、大量数据排序或者复杂的算法,你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应,动画也停了,就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript,又要负责渲染页面、响应用户操作,一旦它被繁重的计算任务占满,就无暇顾及其他,用户体验便直线下降。 这个问题的根源,正是“主线程是单线程的”。那么,如何解决呢? 答案很简单:把这...
学习面试
javascript2025-09-15
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块,运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s,LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪?」——于是你把懒加载重新翻出来折腾了一轮。 解决方案:三条技术路线,你全踩了一遍 1\. 最偷懒:原生 一行代码就能跑,浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖,IE 全军覆没。 必须写死 ,否则 CLS 会抖成 PPT。 适用场景...
学习
javascript2025-09-10
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中,你是否遇到过这样的困扰: 大数据处理时页面卡死 :处理几万条数据时,页面直接卡成PPT,用户点击毫无反应 复杂计算阻塞UI :图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 :大文件操作时,其他功能完全无法使用 实时数据处理性能差 :WebSocket接收大量数据时,页面渲染严重滞后 今天分享6个Web Worker的核心技巧,让你的应用告别卡顿,用户体验丝滑如德芙! 💡 核心技巧...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录