【JavaScript】正则表达式知识点详解

最新推荐文章于 2024-09-26 16:53:56 发布
最新推荐文章于 2024-09-26 16:53:56 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript 文章标签： 正则表达式 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangwfu/article/details/128985407
版权

文章目录

一、正则表达式是什么?

💡 Tips：正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。

二、正则表达式作用是什么?

💡 Tips：用正则的语法书写一个规则， 验证 字符串 是否符合规则

三、创建正则表达式

（一）字面量方式创建

语法 var reg = /正则符号/

（二）内置构造函数方式创建

var reg = new RegExp('正则符号')

四、正则符号

（一）常用元字符

💡 Tips：元字符是拥有特殊含义的字符

1.普通元字符
  1. \d 表示匹配 一位 数字(0-9)
var reg = /\d/
console.log(reg.test('asdfasdfasdfasdf')); // false
console.log(reg.test('$asdfasdfasdfasdf')); // false
console.log(reg.test('#asdfasdfasdfasdf')); // false
console.log(reg.test('1asdfasdfasdfasdf')); // true
console.log(reg.test('asdfasdfa888888sdfasdf'));  // true
  1. \D 表示匹配 一位 非数字
var reg = /\D/
console.log(reg.test('1234567890'));//false
console.log(reg.test('1234567890#'));//true
console.log(reg.test('123456 7890'));//true
console.log(reg.test('d1234567890'));//true
  1. \s 表示匹配 一位 空白内容 (空格 缩进 制表符…)
var reg = /\s/
console.log(reg.test('afsdfasdfasdf'));
console.log(reg.test('afsdfas dfasdf'));
  1. \S 表示匹配 一位 非空白内容
var reg = /\S/
console.log(reg.test('                    '));
console.log(reg.test('            1        '));
  1. \w 表示匹配 一位 数字(0-9) 字母(a-zA-Z) 下划线(_) 任意内容
var reg = /\w/
console.log(reg.test('!#$%&@*()'));
console.log(reg.test('!#$%&@*()4'));
console.log(reg.test('!#$%&@*()_'));
console.log(reg.test('!#$%&@*()a'));
console.log(reg.test('!#$%&@*()A'));
  1. \W 表示匹配 一位 非数字字母下划线内容
var reg = /\W/
console.log(reg.test('!#$%&@*()'));
console.log(reg.test('!#$%&@*()4'));
console.log(reg.test('!#$%&@*()_'));
console.log(reg.test('!#$%&@*()a'));
console.log(reg.test('!#$%&@*()A'));
console.log(reg.test('123456789_abc'));
console.log(reg.test('123456789_abc#'));
  1. . 表示匹配 一位 非换行(\n)的任意内容
var reg = /./
// var test = 'a\na\na'
// console.log(test);
console.log(reg.test("\na"));
  1. \ 表示转义符，把有意义的符号转换成没有意义的文本，把没有意义的文本转换成有意义的符号
var reg = /d/ // 只要字符串中有字母d就可以， 此刻d是一个普通文本
var reg = /\d/   // 此刻 \ 转义符把普通文本转成了有意义的符号
console.log(reg.test('abcd'));
2.边界元字符

💡 Tips：当开头^和结尾$一起使用的时候，表示从开头匹配到结尾

  1. ^ 表示开头，规则是表示字符串必须由指定的字符开头
var reg = /^\d/
console.log(reg.test('sksflksdfglkd'));
console.log(reg.test('3adfadfasf'));
console.log(reg.test('33asdfasdfas'));
  1. $ 表示结尾，规则是表示字符串必须指定的字符结尾
var reg = /\d$/
console.log(reg.test('asfasdfasdfasdf'));
console.log(reg.test('1asfasdfasdfasdf'));
console.log(reg.test('1asfasdfasdfasdf6'));

3.^和结尾$连用，表示从开头到结尾只能由指定的字符组成

var reg = /^\d$/
console.log(reg.test('12341234'));
console.log(reg.test('1abc2'));
console.log(reg.test('5'));
3.限定元字符
  1. ** * **表示 0 ~ 正无穷次
// 规则   表示字符串从开头到结尾只能由 0 ~ 多个 数字组成
var reg = /^\d*$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('123'));
console.log(reg.test('12345'));
console.log(reg.test('a'));
  1. ** + **表示 1 ~ 正无穷次
// 规则  表示字符串从开通到结尾只能由 1 ~ 多个 数字组成
var reg = /^\d+$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('123'));
console.log(reg.test('12345'));
console.log(reg.test('a'));
  1. ** ? ** 表示 0 ~ 1 次
// 规则  表示字符串从开头到结尾只能由 0 ~ 1 数字组成
var reg = /^\d?$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('123'));
console.log(reg.test('12345'));
console.log(reg.test('a'));
  1. ** {n} **表示 限定n次
// 规则 表示字符串从开头到结尾只能由2个数字组成
var reg = /^\d{2}$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('13'));
console.log(reg.test('1345'));
console.log(reg.test('a'));
  1. ** {n,} **表示 至少n次
    • {0,} 0 ~ 正无穷
    • {1,} 1 ~ 正无穷
// 规则 表示字符串从开头到结尾只能由 5 ~ 多个 数字组成
var reg = /^\d{5,}$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('13'));
console.log(reg.test('13454'));
console.log(reg.test('a'));
  1. **{n,m} **表示n ~ m次
    • {0,1} 表示 0 ~ 1 次
// 规则 表示字符串从开头到结尾只能由 3 ~ 5 数字组成
var reg = /^\d{3,5}$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('13'));
console.log(reg.test('13454'));
console.log(reg.test('a'));
4.特殊元字符

1. ()

  • 表示单独捕获，是一个整体
// 此时 {2} 修饰的是前面的一个()，表示()里面的内容整体出现2次
var reg = /^(abc){2}$/
console.log(reg.test('abc'));
console.log(reg.test('abcc'));
console.log(reg.test('abcabc'));

2. |

  • 表示或
  • 注意 或的边界到小括号或者正则边界
// 规则 ()里面的内容出现两次, () 里面的内容是abc 或者 def
/^(abc|def)(abc|def)$/
var reg = /^(abc|def){2}$/
console.log(reg.test('abc'));
console.log(reg.test('def'));
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));

//   或的分界线在哪里 ===> 小括号 () 或者 正则边界 //
var reg = /^abc|def$/
console.log(reg.test('abcef'));
console.log(reg.test('abdef'));
console.log(reg.test('abcasdfasdfascccc'));
console.log(reg.test('aassdfasdfdef'));

var reg = /^(abc|def)$/
console.log(reg.test('abc'));
console.log(reg.test('def'));

3. []

  • 表示包含
  • 注意 一个[] 只占一个字符位置
  • 书写在[]里面的任意一个都行
// 该字符串只能有一位字符，这个字符可以是 a b c d中的任意一个
var reg = /^[abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('aa'));
console.log(reg.test('e'));

4. [^]

  • 表示 非
  • 一个[^]只占一个字符位置
  • 书写在[^]里面的任意一个都不行
// 该字符串只能有一个字符,这个字符串除了abcd都可以
var reg = /^[^abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('aa'));
console.log(reg.test('e'));

5. -

  • 表示 到
  • 注意 必须是unicode编码连着的才可以写
  • [0-9] 等价于 \d
  • [^0-9] 等价于 \D
  • [0-9A-Za-z_] 等价于 \w
  • [^0-9A-Za-z_] 等价于 \W
  • [\u4e00-\u9fa5] 表示所有中文
// 表示该字符串只能有一个字符组成 ， 这个字符可以是0-9任意一个
var reg = /^[0-9]$/
console.log(reg.test(''));
console.log(reg.test('0'));
console.log(reg.test('9'));
console.log(reg.test('a'));
5.重复元字符

💡 Tips：作用: 表示重复第n个小括号的内容，要求和第n个小括号的内容一模一样
符号: \数字

\1

// 表示这个()里面的整体内容出现2次就可以。不要求一模一样
var reg = /^(abc|def){2}$/
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));

// 表示 \1 的位置上 需要出现一个 和 第一个 小括号 一模一样的内容
var reg = /^(abc|def)\1$/
console.log(reg.test('abcabc'));
console.log(reg.test('defdef'));
console.log(reg.test('abcdef'));

var reg = /^<(p|span)><\/\1>$/
console.log(reg.test('<p></p>'));
console.log(reg.test('<span></span>'));
console.log(reg.test('<p></span>'));

\2

// 表示重复第2个小括号的内容，要求和第2个小括号的内容一模一样
var reg = /^(abc|def)\2$/
console.log(reg.test('abcabcabc'));
console.log(reg.test('abcdefdef'));
console.log(reg.test('abcabcdef'));

（二）常用修饰符

💡 Tips：修饰符，也叫标识符。可以全局搜索，修饰整个正则表达式的符号 , 书写在正则表达式外面。修饰符有好几个，这里给大家介绍常用的两个。

  1. **i **
// 表示 验证字符串的时候，忽略大小写
var reg = /^[abcd]$/i
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('A'));
  1. g

💡 Tips：学习修饰符g之前可以先了解一下正则的捕获方式

全局搜索

// 1. 有符合规则的字符串片段，没有使用g全局搜索
var reg = /\d{3}/
var str = 'adfa123sals456hdfl789kasakhdf012'
console.log(reg.exec(str));

// 1. 使用g全局搜索
var reg1 = /\d{3}/g
var str1 = 'adfa123sals456hdfl789kasakhdf012'
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));

💻Run：执行结果可以看出没有匹配到的返回null，匹配到的返回一个数组。在不使用全局搜索g时只能捕获（拿到）第一组匹配规则的字符串片段，当使用全局搜索g时，第二次捕获开始会从第一次捕获的结束为止开始检索，依次捕获，直到找不到内容，返回null。
image.png

五、正则常用方法

（一）匹配

  • 语法 正则.test（检测的字符串）
  • 返回值
    • true 字符串满足要求
    • false 字符串不满足要求
// 准备一个正则表达式
var reg = /abcd/
// 规则: 字符串中需要包含一个 'abcd' 字符串片段
// var res = reg.test('abcdadjflasfalkjglakdg')
// var res = reg.test('adjflasfalkjglakdgabcd')
var res = reg.test('adjflasfalab    cdkjglakdg')
console.log(res);

（二）捕获

💡 Tips：作用 从原始字符串中捕获到符合正则规则的字符串片段

  • 语法 正则表达式.exec(字符串)
  • 返回值
    • 当原始字符串没有符合规则的时候，返回null
    • 当原始字符串由符合规则的片段的时候，返回值必然是一个数组
var reg = /\d{3}/
// 1. 没有符合规则的字符串片段
var str = 'affasfasfasf'
// console.log(reg.test(str));
console.log(reg.exec(str));
// 2. 有符合规则的字符串
var str1 = 'sbf12j123lkkj454ty'
console.log(reg.exec(str1));
console.log(reg.exec(str1));
console.log(reg.exec(str1));

💻Run：执行结果可以看出没有匹配到的返回null，匹配到的返回一个数组。细心的朋友们肯定发现了只能捕获（拿到）第一组匹配规则的字符串片段。当没有全局匹配g的时候不管写多少次，只能捕获到第一组。
image.png

案例

💡 Tips：需求是把字符串中满足正则规则的片段全部获取，放到一个数组中返回

🤔思考一下几个问题帮助解题：

  • 循环 执行重复的步骤
  • 循环多少次，循环的终止条件是啥
  • 只要捕获的结果不是null, 就要再次循环
var reg = /\d{3}/g
var str = 'adfa123sals456hdfl789kasakhdf012'
// 准备空数组
var arr = []
    var res = reg.exec(str)
    while (res !== null) {
        arr.push(res[0])
        res = reg.exec(str)
    }
    console.log(arr);

image.png

芒果Cake
关注
专栏目录
正则表达式详解
langmanboy的博客
04-10 1730
正则表达式 在 JavaScript 中，正则表达式通过内建的 RegExp 类的对象来实现，并与字符串集成 正则表达式是用于匹配字符串中字符组合的模式，在 JavaScript 中，正则表达式也是对象 这些模式被用于 RegExp的 exec 和 test 方法, 以及 String 的 match、matchAll 、replace、search 和 split 方法 1. 正则创建与属性 创建一个正则表达式对象有两种语法 字面量创建 对象创建 1-1 字面量创建 使用一个正则表达式字面量，其由包含
正则表达式入门
热门推荐
Samuel
06-17 3万+
正则表达式入门  正则表达式一直都是我畏惧的知识点，之前也尝试着学习，但最终还是放弃了。由于正则在项目中经常能用的到，所以最近强迫自己花空闲时间学习了些简单的正则知识，并将了解到的知识总结在本文中，希望对大家有所帮助。大家在学习正则的时候不要有畏惧的心理，其实正则入门还是比较容易的。一、简介 正则表达式是由原意文本字符(a,b,c,1,2,3等)和元字符( . * ? 等)组成来匹配指定内容的表达式
JavaScript正则表达式- -
YSH的专栏
01-06 1030
JavaScript正则表达式-                                   正则表达式是一个描述字符模式的对象。 JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. *********************** //JavaScript// **************
正则表达式【详细解读】
最新发布
weixin_47734224的博客
09-26 2068
正则表达式，如瑞士军刀般多功能而精巧，它在字符串的密林中开辟路径，既是文本处理的利器，也是数据挖掘的宝藏钥匙。掌握这把万能钥匙，解锁编程与数据处理的无限可能。
关于正则表达式的知识点整理
北辰之北灬的博客
02-19 1062
正则表达式知识点小结整理 1. \b 单词的开头或结尾，也就是单词的分界处.\b并不匹配这些单词分隔字符中的任何一个，它只匹配一个位置。（如：\bhi\b就是查找单词hi，而him等会被忽略） 2.  .   是另一个元字符，匹配除了换行符以外的任意字符。 3.  *  同样是元字符，不过它代表的不是字符，也不是位置，而是数量，即它指定*前边的内容可以连续重复使用任意次以使整个表达式得到
JavaScript正则表达式详解
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
08-21 755
正则表达式（Regular Expression）使用单个字符串来描述，匹配一系列符合某个句法规则的字符串。
javascript正则表达式中分组详解
10-21
了解和掌握这些知识点可以帮助我们在使用JavaScript正则表达式进行文本处理时更加准确高效。无论是捕获性分组还是非捕获性分组，它们都为我们提供了一种灵活处理字符串的方式。通过使用正则表达式中的分组，我们可以...
javascript 正则表达式分组、断言详解
10-20
正则表达式是文本处理中一个非常强大的工具，尤其在JavaScript中，它提供了一种高效的方式来匹配、提取和替换字符串中的特定模式。...这些知识点对于在JavaScript中进行高效的字符串处理至关重要。
JavaScript正则表达式实战练习详解
资源摘要信息:"JavaScript正则表达式练习" 在计算机科学和编程中，正则表达式（Regular Expression，通常简称为 Regex）是一种文本模式，包括普通字符（例如，字母和数字）和特殊字符（称为"元字符"）。它们用于...
JavaScript正则表达式中的ignoreCase属性使用详解
10-24
正则表达式是JavaScript中用于匹配字符串中字符组合的模式。在正则表达式的应用中，经常会遇到不...通过掌握这些知识点，我们可以在处理字符串和搜索模式时更加灵活，使得JavaScript程序能够满足更加复杂的业务需求。
详解正则表达式后面不要包含指定的字符串内容
10-17
正则表达式是处理字符串的强大工具，能够通过特定模式匹配文本中的内容。在众多应用场景中，经常需要匹配的...理解并掌握这些知识点可以帮助我们在日常编程工作中，更加高效和准确地使用正则表达式进行文本匹配和处理。
正则表达式详解（20分钟看懂正则）
11-27
简明的正则表达式介绍，很简单易懂，也可作为速查手册用
玩转JavaScript正则表达式
03-15 664
玩转JavaScript正则表达式 Why Regular Expression 介绍点语法 定义 创建方式 各种表格 直接量字符 字符类 重复字符类 选择分组和引用字符 锚字符 修饰符 用于模式匹配的String方法 RegExp对象 RegExp构造函数 RegExp的属性 RegExp的方法 一些栗子 匹配URL 匹配HTML Tag 匹配String 一个简单的语法分析器玩转JavaScri
Java正则表达式
iOSllearner的博客
09-10 223
在Sun的Java JDK 1.40版本中，Java自带了支持正则表达式的包，本文就抛砖引玉地介绍了如何使用java.util.regex包。 可粗略估计一下，除了偶尔用Linux的外，其他Linux用户都会遇到正则表达式。正则表达式是个极端强大工具，而且在字符串模式-匹配和字符串模式-替换方面富有弹性。在Unix世界里，正则表达式几乎没有什么限制，可肯定的是，它应用非常之广泛。 正则表达式的引擎已被许多普通的Unix工具所实现，包括grep，awk，vi和Emacs等。此外，许多使用比较广泛的脚本语言
正则表达式知识点整理
Ohto-Ai的博客
02-20 447
正则表达式 简介 正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。 正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。 一个简单的MFC正则表达式测试小工具 一个在线正则表达式测试小工具 作用 测试字符串内的模式。 例如，可以测试输入字符串，以查看字符串内是否出现电话号码模式或信用卡...
正则表达式知识点--详解
StoriesWine
01-24 446
正则表达式知识点–详解 1.特殊字符 字符 描述 $ 匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 &#x4E5F;&#x5339;&#x914D;&#x2032;\n&#x2032;&#x6216;&#x2032;\r&#x2032;&#x3002;&#x8981;&#x5339;&#x914D;" role="pr
正则表达式基本语法
代码能让我保持心静，心静能让我保持动力
01-14 273
两个特殊的符号'^'和'$'。他们的作用是分别指出一个字符串的开始和结束。例子如下： "^The"：表示所有以"The"开始的字符串（"There"，"The cat"等）； "of despair$"：表示所以以"of despair"结尾的字符串； "^abc$"：表示开始和结尾都是"abc"的字符串——呵呵，只有"abc"自己了； "notice"：表示任何包含"notice"的
正则表达式知识点总结
xiaoyi357的博客
03-01 261
原地址：http://m.cr173.com/w/19109 一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芒果Cake

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值