ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

30-seconds-of-code 正则表达式速查表:JavaScript 正则语法精要

30-seconds-of-code 正则表达式速查表:JavaScript 正则语法精要 教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载正则表达式是字符串处理中最强大的工具之一但语法繁多、难以记忆。本文基于 30-seconds-of-code 仓库中的 JavaScript 正则速查表 整理出锚点、字符序列、量词、分组与标志五大核心语法的完整精要并同步引入仓库内 6 个正则技巧、常用正则表达式集合 与 正则转义 等姊妹篇的实战代码。读完本文你将掌握正则表达式的基本语法骨架能够在日常开发中快速查表、正确书写与调试模式并懂得在哪些场景下进一步查阅仓库中的进阶内容。Anchors锚点定位匹配位置锚点不匹配任何具体字符而是定位匹配发生的位置是构建精确匹配如校验整个字符串的基础^字符串的开头或在多行模式下匹配每一行的开头$字符串的结尾或在多行模式下匹配每一行的结尾\b单词边界词与非词字符之间的位置\B非单词边界\b的反义[!NOTE] 锚点是不可量化的non-quantifiable即其后面不能紧跟量词如*、、?、{n}否则属于非法正则。^与$最常见的用途是精确匹配整段字符串。仓库的 常用正则表达式集合 中大量使用这对锚点例如精确匹配字符串abc的正则为^abc$而在两个锚点之间不写任何字符^$即可用于匹配空字符串const regexp /^abc$/; // 精确匹配字符串 abc const empty /^$/; // 匹配空字符串Character sequences字符序列与字符类字符序列描述了单个字符的匹配规则既包括\w、\s、\d这类元字符简写也包括方括号定义的字符集合.除换行符以外的任意字符\w任意单词字符字母、数字、下划线\W任意非单词字符\w的反义\s任意空白字符空格、制表符、换行等\S任意非空白字符\s的反义\d任意数字字符\D任意非数字字符\d的反义[abc]给定集合中的单个字符此处为a、b或c[^abc]不在给定集合中的单个字符[abc]的反义[a-z]给定范围内的单个字符此处为a到z含两端[^a-z]不在给定范围内的单个字符[a-z]的反义[a-zA-Z]属于任一给定范围的单个字符如字母大小写均可[!TIP] 使用\转义特殊字符如\、/、[、]、(、)、{、}等当需要把字面量字符当作普通文本匹配时不可或缺。字符类与取反^组合可以写出非常实用的校验模式。仓库 common-regexp-cheatsheet.md 中就有两个典型例子匹配非单词且非空白的字符即把 既不是字母数字下划线、也不是空白 的字符全部挑出来const regexp /[^\w\s]/gi; // g 匹配全部i 忽略大小写匹配 URL slug 常用的字母、数字、连字符与下划线const regexp /^[a-zA-Z0-9-_]$/;只允许字母和空白的输入校验const regexp /^[A-Za-z\s]$/;空白与换行的精确匹配\s覆盖了所有空白字符但有时需要精确区分换行类型。仓库中给出了按环境区分换行的模式——\r匹配回车、\n匹配换行、\r\n匹配回车加换行的连续序列配合全局g与多行m标志const regexp /\r|\n|\r\n/gm;Quantifiers量词控制重复次数量词跟在可量化的表达式之后规定其重复次数a?0 个或 1 个a等价于a{0,1}a*0 个或多个a等价于a{0,}a1 个或多个a等价于a{1,}a{3}恰好 3 个aa{3,}3 个或更多个aa{3,5}3 到 5 个a含两端[!NOTE] 这里的a指代任意可量化的合法表达式可以是单个字符、字符类或分组但不能是锚点。量词是构建按规则重复类模式的主力。仓库中的实战示例匹配一段或多段空白用于压缩空格const regexp /\s/g; // 表示至少一个空白字符把字符串按 n 个字符切块const regexp /.{1,2}/g; // 每 2 个字符为一组{1,2} 处理末尾不足 2 个的情况提取括号内的文本转义的\(、\)匹配左右括号中间的([^)])用字符类取反排除右括号、以要求至少一个字符const regexp /\(([^)])\)/g;将\(、\)换成\[、\]或\{、\}即可分别提取方括号或花括号内的内容。校验日期格式DD/MM/YYYY将日、月、年三段分别用范围加量词校验并允许/或-作分隔符const regexp /^(0?[1-9]|[12][0-9]|3[01])\/\-[\/\-]\d{4}$/;调整各段顺序与分隔符即可适配不同日期格式。Groups分组与捕获分组用圆括号把多个子表达式组合成一个整体并支持捕获匹配到的内容(ab)匹配并捕获括号内所有内容此处为精确的ab(a|b)匹配并捕获二选一的单个字符此处为a或b|是或操作符(?:ab)匹配括号内所有内容但不捕获分组在实践中的三种形态基础速查表只给出了分组的入门语义仓库的 6-regexp-tricks.md 把捕获分组的能力进一步展开值得在此一并掌握捕获分组Capturing groups把正则的一部分用(...)包起来即可从匹配结果中单独取出该片段const str JavaScript is a programming language; /(JavaScript) is a (.*)/.exec(str); /* [ 0: JavaScript is a programming language, 1: JavaScript, 2: programming language ] */非捕获分组Non-capturing groups当只需要分组/或匹配而不关心该片段本身时用(?:...)避免产生多余的结果项const str JavaScript is a programming language; /(?:JavaScript|Python) is a (.)/.exec(str); /* [ 0: JavaScript is a programming language, 1: programming language ] */命名捕获分组Named capturing groups用(?name...)给分组起名结果会额外出现在groups对象中可读性远超数字下标const str JavaScript is a programming language; /(?subject.) is a (?description.)/.exec(str); /* [ 0: JavaScript is a programming language, 1: JavaScript, 2: programming language, groups: { subject: JavaScript, description: programming language } ] */分组反向引用与排除指定模式分组还能配合反向引用复用已捕获内容\1、\2引用编号分组\kname引用命名分组从而写出更简短的正则const str JavaScript is a programming language - an awesome programming language JavaScript is; /(.) is a (?description.) - an awesome \kdescription \1 is/.exec(str);而某个模式不出现的校验则需要负向前瞻与分组的配合。仓库 common-regexp-cheatsheet.md 用^((?!(abc|bcd)).)*$实现整串不包含abc或bcdconst regexp /^((?!(abc|bcd)).)*$/; // 其中 abc 与 bcd 为需要排除的模式可用 | 分隔更多模式Flags修饰匹配行为的标志标志flags写在正则字面量的末尾斜杠之后或作为RegExp构造函数的第二参数全局性地改变匹配行为g全局Global匹配所有出现的位置而不在首个匹配处停止m多行Multiline使^与$同时匹配每一行的行首与行尾i忽略大小写Case insensitiveuUnicode 模式启用\p{...}等 Unicode 属性匹配u标志是处理非 ASCII 文本的关键。仓库 6-regexp-tricks.md 演示了利用\p{...}与/u匹配 Emoji、数学符号、希腊字母等 Unicode 字符const str Greek looks like this: γεια; /\p{ScriptGreek}/u.exec(str); /* [ 0: γεια ] */实战组合转义与常见校验模式动态构造正则时的转义速查表提到用\转义特殊字符但把用户输入或普通字符串拼进正则时手动转义很容易遗漏。仓库 escape-reg-exp.md 给出了一个一行代码的通用转义函数借助/[.*?^${}()|[\]\\]/g匹配全部正则特殊字符并用String.prototype.replace()在每处匹配前加反斜杠const escapeRegExp str str.replace(/[.*?^${}()|[\]\\]/g, \\$); escapeRegExp((test)); // \\(test\\)先转义再new RegExp()拼接是安全构造动态正则的标准做法。常见校验模式速览综合 common-regexp-cheatsheet.md把本文语法的各部分串联起来即可直接复用以下高频模式目标正则精确匹配字符串/^abc$/匹配空字符串/^$/匹配空白序列/\s/g匹配换行/\r\|\n\|\r\n/gm非单词且非空白字符/[^\w\s]/gi字母数字与连字符URL slug/^[a-zA-Z0-9-_]$/仅字母与空白/^[A-Za-z\s]$/排除指定模式/^((?!(abc\|bcd)).)*$/括号内文本/\(([^)])\)/g日期DD/MM/YYYY/^(0?[1-9]\|[12][0-9]\|3[01])\/\-[\/\-]\d{4}$/按 n 字符切块/.{1,2}/g进阶路径与仓库上下文速查表末尾特别说明本速查表只是起点远非正则全部特性的完整指南。如需继续深入可按以下路径在仓库内延伸阅读6 个 JavaScript 正则技巧覆盖捕获/非捕获/命名分组、反向引用、前瞻与 Unicode 匹配的完整代码示例是本速查表首选的进阶读物常用正则表达式集合面向日常问题的即用型模式库从精确匹配到 UUID/日期校验一应俱全正则转义Escape RegExp一行函数解决动态正则构造中的特殊字符转义问题JavaScript 正则表达式集合配置上述各篇在站点中的集合编排定义了其标题、简介与建议的外部学习资源可用于了解该主题的整体内容地图。在 src/lib/stringUtils.js 等源码中也可以看到正则被广泛用于字符串工具的底层实现——速查表中的每个语法符号都是这些实用工具能够成立的基础。把这五类语法锚点、字符序列、量词、分组、标志记熟并配合上方实战模式大多数日常匹配、校验与提取任务都能信手拈来。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐learn-harness-engineering 终极项目实战构建带运行时可观测性与调试能力的完整 Agent HarnessCapstonelearn harness engineering 终极项目实战构建带运行时可观测性与调试能力的完整 Agent HarnessCapstone 本文是教程文档30 seconds of code 正则表达式进阶6 个必须掌握的 JavaScript 正则技巧30 seconds of code 正则表达式进阶6 个必须掌握的 JavaScript 正则技巧 正则表达式Regular Expression功能强教程文档30 seconds of codeJavaScript 常用正则表达式速查表实战指南30 seconds of codeJavaScript 常用正则表达式速查表实战指南 正则表达式是 JavaScript 字符串处理中最强大也最容易被低估的教程文档创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表