没有人会觉得正则表达式难写

1. RegExp对象

JavaScript有两种方式实例化RegExp对象

  • 字面量
  • 构造函数
字面量
const reg = /all/;
console.log(reg);   // /all/
'This is all I have.'.replace(reg, 'ALL');    // This is ALL I have.
复制代码
构造函数
const reg = new RegExp('all');
console.log(reg);   // /all/
'This is all I have.'.replace(reg, 'ALL'); // This is ALL I have.
复制代码

2. 元字符

  • 原义文本字符
  • 元字符
原义文本字符

代表它本来含义的字符。比如正则表达式为 /abc/、/123/；它们分别匹配的是 abc、123 ，

元字符

在正则表达式中，有特殊含义的非数字字符。如：\b \d \w . + () 等。部分元字符的含义并不唯一，在不同的书写方式，含义可能不同。

元字符表：tool.oschina.net/uploads/api…

3. 工具推荐

不是所有正则表达式都像前面写的那么简单，因为正则表达式语法有些复杂，我们在写的时候多多少少也会有些错误，或者阅读别人写的正则表达式的时候也难理解。

如果把下面的正则表达式转换成下图，会有助于我们理解正则表达式的含义。

^http(|s):\/\/[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+\/$

给大家推荐一个工具 regexper.com

4. 量词

字符含义
+出现一次或多次(至少出现一次)
?出现零次或一次(最多出现一次)
*出现零次或多次(任意次)
{n}出现n次
{n, m}出现n到m次
{n,}至少出现n次
// \d表示匹配数字
// 匹配一个数字
'1234567890'.replace(/\d/, 'a'); // a234567890
// 匹配一个或多个数字(至少匹配一个)
'1234567890'.replace(/\d+/, 'a'); // a
'1234567890'.replace(/\d?/, 'a'); // a234567890
'1234567890'.replace(/\d*/, 'a'); // a
'1234567890'.replace(/\d{3}/, 'a'); // a4567890
'1234567890'.replace(/\d{2,4}/, 'a'); // a567890
'1234567890'.replace(/\d{3,}/, 'a'); // a
'12'.replace(/\d{3,}/, 'a'); // 12
复制代码

使用工具 regexper.com/ 图解

\d{2,6}

5. 贪婪模式和非贪婪模式

从上面 4. 量词 的例子中，'1234567890'.replace(/\d+/, 'a'); 输出的是 a 而不是 a234567890；'1234567890'.replace(/\d{2,4}/, 'a'); 输出的是 a567890 而不是 a34567890。

贪婪模式：正则表达式尽可能多的匹配，一直到匹配失败

非贪婪模式：正则表达式尽可能少的匹配，一旦匹配成功就不再匹配

因为默认情况下，正则表达式都是使用贪婪模式做匹配的。如果想要让正则表达式使用非贪婪模式匹配，在量词后面加个 ? 即可。

'1234567890'.replace(/\d{2,4}/, 'a');  // a567890
'1234567890'.replace(/\d{2,4}?/, 'a'); // a34567890'1234567890'.replace(/\d+/, 'a');      // a
'1234567890'.replace(/\d+?/, 'a');     // a234567890
复制代码

6. 类

  • 正则表达式中，可以使用 [] 来构建一个类，正则表达式中的类是指符合某些特性的对象

字符类

正则表达式 [abcd] 是把 a、b、c、d 归为一类，该表达式可以匹配这类字符

'12345a6b7c8D9e'.replace(/[abcd]/g, '|');   // 12345|6|7|8D9e
复制代码

范围类

正则表达式提供了 [a-z] 来表示从 a 到 z 的任意字符（包含 a 和 z）

'1a2b3c4q5z'.replace(/[a-z]/g, '|');   // 1|2|3|4|5|
'1a2b3c4T5Z'.replace(/[a-z]/g, '|');   // 1|2|3|4T5Z
'1a2b3c4T5Z'.replace(/[a-zA-Z]/g, '|');   // 1|2|3|4|5|
'1a2b3c4q5z'.replace(/[0-9]/g, '|');   // |a|b|c|q|z
复制代码

[a-zA-Z0-9]

预定义类

字符等价于含义
\d[0-9]数字字符
\D[^0-9]非数字字符
\w[a-zA-Z0-9_]字母、数字、下划线（单词字符）
\W[^a-zA-Z0-9_]非字母、数字、下划线（非单词字符）
\s[\t\n\x0B\f\r]空白字符
\S[^\t\n\x0B\f\r]非空白字符
.[^\n\r]除了换行、回车之外的任意字符

7. 边界

字符含义
^以xxx开头
$以xxx结尾
\b单词边界
\B非单词边界
'img/png/img-1.png'.replace(/img/g, 'image'); // image/png/image-1.png
'img/png/img-1.png'.replace(/^img/g, 'image'); // image/png/img-1.png'img/png/img-1.png'.replace(/png/g, 'jpg'); // img/jpg/img-1.jpg
'img/png/img-1.png'.replace(/png$/g, 'jpg'); // img/png/img-1.jpg'This is all I have.'.replace(/is/g, 'IS'); // ThIS IS all I have.
'This is all I have.'.replace(/\bis\b/g, 'IS'); // This IS all I have.
'This is all I have.'.replace(/\Bis\b/g, 'IS'); // ThIS is all I have.复制代码

9. 分组

作用

  • 与 | 使用
  • 与量词使用
  • 反向引用

与 | 使用

/http(|s):\/\//

/http(|s):\/\//.test('https://');   // true
/http(|s):\/\//.test('http://');    // true
/a(b|c)d/.test('ad');               // false
/a(b|c)d/.test('abd');              // true
/a(b|c)d/.test('acd');              // true
复制代码

与量词使用

如何匹配 test 出现两次 testtest ？

/test{2}/.test('testtest');    // false
/test{2}/.test('testt');          // true
/(test){2}/.test('testtest');  // true
复制代码

反向引用

含有分组的正则表达式匹配成功时，将子表达式匹配到的内容，保存到内存中一个以数字编号的组里，可以简单的认为是对一个局部变量进行了赋值，这时就可以通过反向引用方式，引用这个局部变量的值。

很多情况下，我们可能需要将某种格式的字符串转换成另一种格式的字符串。例如：将 05/28/2018 转换成 2018-05-28；将Markdown语法的超链接 [Test](https://www.test.com/) 转换成HTML的超链接 <a href="https://www.test.com/">Test</a>

'05/28/2018'.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2');
// => 2018-05-28
'[Test](https://www.test.com/)'.replace(/\[(.+)\]\((http(|s):\/\/.+)\)/, '<a href="$2">$1</a>');
// => <a href="https://www.test.com/">Test</a>
复制代码

忽略分组

有时候我们在写正则表达式的时候会多次使用分组，但有一些分组是不需要反向引用的，比如正则表达式 /http(|s):\/\// 中的分组，我们不需要进行反向引用，这时候我们应该使用 (?:) 来忽略分组

不忽略分组：

/http(|s):\/\//

忽略分组：

/http(?:|s):\/\//

10. 前瞻后顾

  • 正则表达式是从头部(左)向尾部(右)开始匹配的，文本的尾部方向称为“前”，文本的头部方向称为“后”
  • 前瞻：正则表达式在匹配到规则的时候，向前检查是否符合断言
  • 后顾：正则表达式在匹配到规则的时候，向后检查是否符合断言
名称正则含义
正向前瞻exp(?=assert)向前检查符合断言的
负向前瞻exp(?!assert)向前检查不符合断言的
正向后瞻(?<=assert)exp向后检查符合断言的
负向后瞻(?<!assert)exp向后检查不符合断言的
'ab1cde2fg'.replace(/[a-z](?=\d)/g, 'X'); // aX1cdX2fg
'ab1cde2fg'.replace(/[a-z](?!\d)/g, 'X'); // Xb1XXe2XX'ab1cde2fg'.replace(/(?<=\d)[a-z]/g, 'X'); // ab1Xde2Xg
'ab1cde2fg'.replace(/(?<!\d)[a-z]/g, 'X'); // XX1cXX2fX
复制代码

11. 修饰符

  • global: 是否全文搜索，默认 false
  • ignoreCase: 是否大小写敏感，默认 false
  • multiline: 是否多行搜索，默认 false
  • lastIndex: 是当前表达式匹配内容的最后一个字符的下一个位置
  • source: 正则表达式的文本字符
'aaaaa'.replace(/a/, 'A');      // Aaaaa
'aaaaa'.replace(/a/g, 'A');     // AAAAA'aAQq'.replace(/[a-z]/g, 'X'); // XAQX
'aAQq'.replace(/[a-z]/gi, 'X'); // XXXX/[a-z]/.test('AA');    // false
/[a-z]/i.test('AA');    // true`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/g, 'image');
// => image/png/img-1.png
//    img/png/img-1.png
//    img/png/img-1.png
`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/gm, 'image');
// => image/png/img-1.png
//    image/png/img-1.png
//    image/png/img-1.png
const reg = /\d/gim;
console.log(reg.source);    // \d复制代码

12. RegExp对象中 test() 和 exec()

test()

用于测试参数字符串中是否存在匹配正则表达式模式的字符串；如果存在则返回true，否则返回false

const reg = /\w/;
reg.test('|'); // false
reg.test('a'); // true
reg.test('a'); // true
复制代码

当使用 g 全文搜索时，test 函数会出现如下问题：

上述问题其实是正则表达式对象的 lastIndex 属性在作怪

如果正则表达式使用了全文搜索 g ，又想避免上述问题，应在执行 test 函数前先将 lastIndex 置 0

const reg = /\w/g;
reg.test('ab'); // true
reg.lastIndex = 0;
reg.test('ab'); // true
reg.lastIndex = 0;
reg.test('ab'); // true
复制代码

exec()

使用正则表达式模式对字符串执行搜索，并将匹配到的结果以数组形式返回，如果没有匹配，返回null

结果数组属性

  • index：匹配字符的第一个字符的位置
  • input：被匹配的字符串

返回的数组

  • 第一个元素是与正则表达式匹配的内容
  • 第二个元素是与第一个子表达式相匹配的内容
  • 第三个元素是与第二个子表达式相匹配的内容（以此类推）

现有如下字符串数组，我们使用 exec 从每个元素中提取图片的路径

const arr = ['[测试1](https://www.test1.com/img/img-1.png)','[测试1](http://www.test1.com/img/img-1.jpg)','[测试2](https://static.test2.com/image/haha/img-1.png)'
]
复制代码

正则表达式：

const reg = /\[.+\]\(http(|s):\/\/[a-zA-Z0-g_-]+(\.[a-zA-Z0-9_-]+)+\/((.+\/)+.+\.(png|jpg))\)/;
复制代码

const res = reg.exec(arr[2]);
复制代码

上述正则表达式使用了较多的分组，我们在阅读图形的时候可能造成干扰，忽略不必要的分组。

const reg2 = /\[.+\]\(http(?:|s):\/\/[a-zA-Z0-g_-]+(?:\.[a-zA-Z0-9_-]+)+\/((?:.+\/)+.+\.(?:png|jpg))\)/;
复制代码

reg2.exec(arr[2]);
复制代码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/283080.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

阅读目录 Bootstrap 栅格&#xff08;Grid&#xff09;系统Bootstrap HTML元素Bootstrap 验证样式ASP.NET MVC创建包含Bootstrap样式编辑模板小结Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优…
阅读更多...
sublime-text3按tab跳出括号

sublime-text3按tab跳出括号

功能 通过按tab自动跳过右括号,右引号,虽然也可以按右方向键,但离得太远按起来太麻烦 在首选项->按键绑定里添加: { "keys": ["tab"], "command": "move", "args": {"by": "characters", "forw…
阅读更多...
VS2017调试闪退之Chrome

VS2017调试闪退之Chrome

原文:VS2017调试闪退之Chrome巨硬build后发了15.7.1满载期待的升级了。。结果NM泪奔................... 为啥 泪奔&#xff1f; 使用Chrome 调试闪退&#xff0c;MMP ,一想肯定是VS的锅咯&#xff0c;各种抓头发。。 试试看看VS配置发现 &#xff0c;多了点东西。。 都勾上后&…
阅读更多...
python中的threading_关于Python中的线程,之,threading,初探

python中的threading_关于Python中的线程,之,threading,初探

threading库主要用于基于线程的并行&#xff0c;核心就是Thread类class threading.Thread(groupNone, targetNone, nameNone, args(), kwargs{}, *, daemonNone)并行是什么就不谈了&#xff0c;用threading的主要目的就是为了实现多个任务的并行&#xff0c;比如WiFi throughpu…
阅读更多...
ios UISearchBar搜索框的基本使用

ios UISearchBar搜索框的基本使用

摘要: 小巧简洁的原生搜索框&#xff0c;漂亮而易用&#xff0c;如果我们的应用没有特殊需求&#xff0c;都可以使用它。iOS中UISearchBar(搜索框)使用总结 初始化&#xff1a;UISearchBar继承于UIView&#xff0c;我们可以像创建View那样创建searchBar UISearchBar * bar [[U…
阅读更多...
Win8下怎样安装Win7 or Win7下怎样安装win8？

Win8下怎样安装Win7 or Win7下怎样安装win8？

预计非常多人可能会用U盘安装工具去去做双系统的安装&#xff08;Win8下安装Win7&#xff0c; Win7下安装Win8&#xff09;。可是在安装过程中你 会发现一个问题&#xff1a;win7下安装win8&#xff0c;提示你mbr硬盘格式不能安装win8&#xff1b;win8下安装win7&#xff0c;提…
阅读更多...
Linux 练习题-3文件与磁盘 问答

Linux 练习题-3文件与磁盘 问答

1、描述Liux下软链接和硬链接的区别创建命令不同&#xff0c;ln 命令创建硬链接&#xff0c;ln -s 创建软链接inode节点号不同&#xff0c;硬链接inode与源文件相同&#xff0c;软链接inode与源文件不同使用对象不同&#xff0c;硬链接只能对文件使用&#xff0c;软链接可以对文…
阅读更多...
.NET Offer 快到碗里来！.NET 招聘季

.NET Offer 快到碗里来！.NET 招聘季

关注我们谈到 .NET 在中国的推广和发展&#xff0c;.NET 开发者求职就业及 .NET 企业招人用人的问题往往常被提及。初学者会担心学习 .NET 之后的就业问题&#xff0c;.NET 开发者在求职过程中没有足够多的渠道来获取 .NET 招聘信息&#xff0c;而与此同时&#xff0c;采用 .NE…
阅读更多...
java的collections_Java中Collection和Collections的区别

java的collections_Java中Collection和Collections的区别

1) 排序(Sort)使用sort方法可以根据元素的自然顺序 对指定列表按升序进行排序。列表中的所有元素都必须实现 Comparable 接口。此列表内的所有元素都必须是使用指定比较器可相互比较的1 List list new ArrayList();2 int array[] {112, 111, 23, 456, 231};3 for (int i 0; …
阅读更多...
jQuery事件绑定（一）

jQuery事件绑定（一）

2019独角兽企业重金招聘Python工程师标准>>> 一、on方法 在Jquery1.7中添加&#xff0c;用来代替其他事件绑定方法。向匹配元素添加一个或多个事件处理程序 使用语法&#xff1a; $(selector).on(event,childselector,data,function) 参数&#xff1a; event&#x…
阅读更多...
JDBC学习笔记之JDBC简介

JDBC学习笔记之JDBC简介

1. 引言 JDBC API是一种Java API&#xff0c;可以访问任何类型的表格数据&#xff0c;特别是存储在关系数据库中的数据。 JDBC可以帮助我们编写下列三种编程活动的java应用程序&#xff1a; 1.连接到数据源&#xff0c;如数据库;2.发送查询和更新语句到数据库;3.检索并处理从数…
阅读更多...
PaddleOCR在 windows下的webAPI部署方案

PaddleOCR在 windows下的webAPI部署方案

很多小伙伴在使用OCR时都希望能过采用API的方式调用&#xff0c;这样就可以跨端跨平台了。本文将介绍一种基于python的PaddleOCR识方案。喜欢的可以关注公众号&#xff0c;获取更多内容。# 一、 windows环境下部署###1.环境操作系统&#xff1a;windows10&#xff1b;主要软件环…
阅读更多...
Vim的NerdTree插件

Vim的NerdTree插件

一个项目文件多起来时&#xff0c;左边的文件树菜单是必要的。参考&#xff1a;常用文件树快捷键所有命令及推荐键盘映射&#xff1a;官方 在vundle插件管理的方式&#xff0c;直接在~/.vimrc中的Plugin段落中加入Plugin "scrooloose/nerdtree"然后重启Vim并输入Plug…
阅读更多...
java简单投票系统_JSP实现的简单Web投票程序代码

java简单投票系统_JSP实现的简单Web投票程序代码

本文实例讲述了JSP实现的简单Web投票程序。分享给大家供大家参考。具体如下&#xff1a;这里使用文本文件作为数据存储的投票系统。1. vote.java&#xff1a;package vote;import java.io.*;import java.util.*;public class vote {public String filePath "";publi…
阅读更多...
LeetCode139:Word Break

LeetCode139:Word Break

Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words. For example, given s “leetcode”, dict [“leet”, “code”]. Return true because “leetcode” can be segm…
阅读更多...
HTTP2指纹识别(一种相对不为人知的网络指纹识别方法)

HTTP2指纹识别(一种相对不为人知的网络指纹识别方法)

这是关于网络指纹识别的两部分系列的第二部分上一部分我介绍了有关TLS 指纹识别方法&#xff08;以及在不同客户端的指纹有何区别&#xff09;&#xff1a;https://mp.weixin.qq.com/s/BvotXrFXwYvGWpqHKoj3uQHTTP/2 指纹识别和Tls指纹类似也是一种 Web 服务器可以依赖指纹来识…
阅读更多...
中兴智能视觉大数据：人脸识别技术目前处于“用的不够，用的不好”

中兴智能视觉大数据：人脸识别技术目前处于“用的不够，用的不好”

中兴智能视觉大数据报道&#xff1a;在2018年5月30日举行的“人脸识别等AI技术在校园周边安全中的应用”研讨会上&#xff0c;中国人民大学危机管理研究中心主任唐钧指出&#xff0c;人脸识别等AI技术具有“精细识别”、“提前干预”、“及时处置”等优势&#xff0c;有利于促进…
阅读更多...
HAProxy的日志配置以及ACL规则实现负载均衡

HAProxy的日志配置以及ACL规则实现负载均衡

HAProxy配置日志策略 默认情况下,HAProxy是没有配置日志的在centos6.3下默认管理日志的是rsyslog,可以实现UDP日志的接收,将日志写入文件,写入数据库先检测rsyslog是否安装rpm -q rsyslog安后在/etc/rsyslog.d/下创建haproxy.conf,内容如下: 1 $ModLOad imudp 2 $UDPServerRun …
阅读更多...
常见浏览器兼容性问题与解决方案？

常见浏览器兼容性问题与解决方案？

(1)浏览器兼容问题一&#xff1a;不同浏览器的标签默认的外补丁和内补丁不同 问题症状&#xff1a;随便写几个标签&#xff0c;不加样式控制的情况下&#xff0c;各自的margin 和padding差异较大。碰到频率:100%解决方案&#xff1a;CSS里 *{margin:0;padding:0;}备注&#xff…
阅读更多...
C#反射，性能优化，不止于优化

C#反射，性能优化，不止于优化

“ 架构师的价值&#xff0c;在于独立且理性的思考”想要写出灵活而且具有更好适应性的代码&#xff0c;反射是首选方案。反射赋予程序在运行时动态创建实例的能力&#xff0c;可以在程序运行时&#xff08;而非编译时&#xff09;获取实例类型&#xff0c;获取元数据信息&…
阅读更多...
最新文章

Copyright @ 2022~2023