什么是正则表达式

  • 正则表达式 Regular Expression (构造函数 RegExp)
  • 用于字符串匹配规则
  • 要么匹配字符,要么匹配位置

如何新建正则表达式

  1. 字面量 /[ab]/gim
const reg = /[\w\*\.]{2}/;
console.log(reg.test('**')); //true
  1. 构造函数 new RegExp([ab${c}]\\d,'gim'); 注意:用构造函数内部表示字符串,当使用\w,\d 等特殊转译字符时候,\默认是当作转译字符串来处理的,所以要多加一个\ 再进行转译。 当正则创建要用到变量时候,必须使用构造函数形式创建!
const reg = new RegExp('[\\w\*\.]{2}','gim');

// 在正则中插入变量,只能使用构造函数方式新建
const value = '永远的43';
const reg = new RegExp(`^${value}号$`);
const reg.test('永远的43号'); // true

正则字符

  1. 元字符 ( ) [ ] +|{ }. * ? ^ $

    元字符表示在正则中有特殊意义,如果需要使用到元字符的字符串匹配,需要使用转译字符。

  2. 特殊字符(\w, \W, \d, \D, \s, \S等)

  • \w 单词字符[a-zA-Z_0-9]
  • \W 非单词字符[^a-zA-Z_0-9]
  • \d 数字字符[0-9]
  • \D 非数字字符[^0-9]
  • \s 空格字符(空格,制表符等)
  • \S 非空格字符

一 匹配位置

位置字符:

^ $ \b \B (?=P) (?!p) (?<=p) (?<!p)

  • ^ 表示字符串第一个字符之前位置
  • $表示字符串最后一个字符之后的位置
// 在字符串开头位置添加一个字符¥,末尾加一个.00 字符
const str = '5600';
const money = str.replace(/^/,'¥').replace(/$/,'.00');
console.log(money); // ¥5600.00
  • \b 表示单词字符\w与非单词字符\W之间的位置,也包括\w字符与^和$之间的位置(与\w 一起使用,表示单词边界)

  • \B 表示单词字符之间的位置,非单词字符与^ 和|之间的位置,非单词字符之间的位置(与\w 一起使用,表示单词内部位置)

  • (?=P) 表示 P之前的位置;(?!P)表示除开P之前位置的所有位置

  • (?<=P)表示 P之后的位置;(?<!P)表示除开P之后的位置的所有位置

// 格式化金额,例如 500000 -> 500,000;-500000->-500,000;
// 分析:加的,字符不能在头部,也不能在-后面
// 步骤一
const reg = /(?=(\d{3})+$)/g;
const str = '500000';
const money = str.replace(reg,','); // ,500,000; // 步骤二:处理,不能出现在字符串首部
const reg = /(?!^)(?=(\d{3})+$)/g;
const str = '500000';
const money = str.replace(reg,','); // 500,000;
// 貌似满足要求了,bug -500000测试发现...
const str = '-500000';
const money = str.replace(reg,','); // -,500,000; // 步骤三处理不能在-号后
const reg = /(?!^)(?<!-)(?=(\d{3})+$)/;
const str = '-500000';
const money = str.replace(reg,','); // -500,000;
// okay! 貌似功能确实了,但是 太过复杂了,有没有简单点的方法呢 // 优化: 利用\B,\b
const reg = /\B(?=(\d{3})+\b)/; // 大功告成

二 匹配字符

量词

量词 次数 标准写法
* 大于等于0次 {0,}
+ 大于等于1次 {1,}
? 0次或者1次 {0,1}
5次 精准匹配5次 {5}

贪婪模式 和 惰性模式

  • 贪婪模式:一次匹配尽量匹配量词最多,直到匹配不下,才算一次匹配结束。/g 全局模式,会从上次匹配字符之后继续进行匹配。 默认的量词模式就是贪婪模式。

  • 惰性模式:只匹配量词最少情况,也就是一旦条件满足就结束本轮匹配,/g模式会自动从已经匹配的字符之后开始下一轮匹配。

    如何开启惰性模式,在 量词后面加 ?, 比如 \d[2,4]?

    分支选择模式默认为惰性模式 (a|b|c)当匹配到了分支a,就不会再去匹配分支b或者c

惰性模式有什么用?

例如: /a.*?b/g 匹配以a开头,以b结尾 ,中间内容最少 的字符串

const a = 'abcdacb'
const reg1 = /a.*b/g
const reg2 = /a.*?b/g
console.log(a.match(reg1)); //['abcdacb']
console.log(a.match(reg2)); //['ab', 'acb']

分组匹配()

非捕获括号(?: )

const phone = '18582556244';
const reg = /(\d{3})(\d{4})(\d{4})/;
const formatedphone = phone.replace(reg,(str,$1,$2,$3)=>{
return `${$1}-${$2}-${$3}`
}); // '185-8255-6244'

反向引用

通常在分支模式中,表示后续的匹配与上次匹配上的分支保持一致,使用\1,\2表示从左到右第一个括号匹配的内容

匹配模式 gim

  • g 全局匹配
  • i 忽略大小写
  • m 多行模式

使用正则方式

  1. 正则的方法

    test 验证 字符串是否满足改正则表达式,返回ture/false

  2. 字符串的方法

    replace,根据正则匹配特定的字符串进行替换,第二个参数可以是函数(在括号分组中有用)

match,返回满足正则表达式的数组 (/g模式和非/g模式返回的值不同)

search,搜索返回满足正则表达式的字符串在 原字符串中的起始位置

split,根据正则进行字符串拆分成数组

正则小练习

  1. 用正则实现str.trim()功能
  2. 讲金币转化为 ¥1,223,234.98 格式,截取保留两位小数
  3. 将transform_new_data 转化为小驼峰命名
  4. 验证密码(8到12位,数字,小写字母,大写字母,且至少由两种组合而成 )

正则表达式入门(js版)的更多相关文章

  1. Python 正则表达式入门(中级篇)

    Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...

  2. Python 正则表达式入门(初级篇)

    Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. 转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达 ...

  3. Twitter面试题蓄水池蓄水量算法(原创 JS版,以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  4. 【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  5. 分享录制的正则表达式入门、高阶以及使用 .NET 实现网络爬虫视频教程

    我发布的「正则表达式入门以及高阶教程」,欢迎学习. 课程简介 正则表达式是软件开发必须掌握的一门语言,掌握后才能很好地理解到它的威力: 课程采用概念和实验操作 4/6 分隔,帮助大家理解概念后再使用大 ...

  6. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  7. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  8. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  9. 使用正则表达式匹配JS函数代码

    使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...

  10. PureMVC(JS版)源码解析:总结

    PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...

随机推荐

  1. Python知识整理(一)

    一.Python交互模式(终端上进行) python # 进入到Python交互模式,提示符是 >>> exit() # 退出Python交互模式 python xxx.py # 执 ...

  2. C#与dotNET项目想要另存为一个新项目sln文件丢了怎么办

    如下图所示,我想要另存一个工程,把 V4.4整个的项目另存为V4.5,我可以把解决方案文件(.sln)改名字,但是我没法把文件夹改名字,改了打开sln就说找不到. 很简单的一个思路是反正sln是多余的 ...

  3. php简单手机商品发布系统

    原本还说学学angular2的,没想到上一公司呆了两月就走了,现在在这个公司做了一个小型的商品发布系统,,php实现的,比较简单,功能不多,是以手机模板发布商品网站的,需要的可以拿去 http://p ...

  4. 团队内部密码共享方案:KeePassXC+微盘(企业微信)

    目录 需求描述 适用场景 安装使用 KeePassXC初始化 浏览器插件安装设置 1.火狐 2.Edge 3.Chrome 软件-插件的链接 登陆网站并保存密码 (企业微信)微盘共享内部数据库 其他 ...

  5. [atARC076E]Connected

    首先,如果没有这个平面的限制,考虑不断插入一对点,将与这两点连线有交的线从左到右,依次"移动"到左端点边上,因此一定是可行的 但当存在界限后,对于两个端点都在边界上的点对(一个端点 ...

  6. bilibili动画下载视频批量改名(python)

    bilib应用 在微软商店中下载哔哩哔哩动画,虽然软件UI古老,但是贵在稳定和支持下载 安装以后搜索自己想要的视频,然后缓存下载 下载后进入下载的路径 视频文件重命名 打开自动命令的程序或者py脚本, ...

  7. java 装饰器模式实现代码

    目录 1.实现装饰器模式 1.1.公共接口 1.2.接口实现 1.3.装饰器 1.4.装饰构件 1.5.测试装饰器 上图展示的是io流中的一个装饰者模式的代码结构 1.实现装饰器模式 汽车厂生产汽车实 ...

  8. 有限元边界 Dirichlet 条件处理

    参考自百度文档,这里只考虑 Dirichlet 边界条件情况. 有限元法基本方法就是是构造线性方程组 \[\begin{equation} Au = f \end{equation}\] 进行求解.其 ...

  9. nginx_日志切割脚本

    #!/bin/bash NGINX_LOG=/usr/loca/nginx/logs/access.log RE_LOG=/data/backup/`data +%Y%m%d` echo -e &qu ...

  10. requests+bs4爬取豌豆荚排行榜及下载排行榜app

    爬取排行榜应用信息 爬取豌豆荚排行榜app信息 - app_detail_url - 应用详情页url - app_image_url - 应用图片url - app_name - 应用名称 - ap ...