什么是正则表达式

  • 正则表达式 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. C/C++ Qt 选择夹TabWidget组件应用

    在Qt中通过使用选择夹组件可以实现在一个页面中集成多种功能,我们以TabWidget选择夹组件为例,实现在单个页面中集成多个功能,并给每一个子夹增加对应的Ico图标. 如果我们使用选择夹组件,必须提前 ...

  2. nrf52810/52832开发板能跑,自己的PCB不能跑的原因

    1.PCB图片对比 这是我的开发板原理图: 这是我画的PCB原理图: 发现其实开发板上就是比我的多了两个外部晶振. 例程代码一般都是用外部晶振作为时钟,所以用例程的代码跑不通我的PCB. 2.解决办法 ...

  3. 前端---梳理 http 知识体系 2

    为什么要有HTTPS HTTP 天生具有明文的特点,整个传输过程完全透明,任何人都能够在链路中截获.修改或者伪造请求 / 响应报文,数据不具有安全性.仅凭HTTP 自身是无法解决的,需要引入新的HTT ...

  4. html图片动态增加文字

    <body> <!-- <div class="logo"> <img src="${imagePath}/disc.PNG" ...

  5. MySQL全面瓦解28:分库分表

    1 为什么要分库分表 物理服务机的CPU.内存.存储设备.连接数等资源有限,某个时段大量连接同时执行操作,会导致数据库在处理上遇到性能瓶颈.为了解决这个问题,行业先驱门充分发扬了分而治之的思想,对大库 ...

  6. Feed系统设计分析(类似微博的用户动态分享问题)

    Feed系统 最近在研究一个个人动态分享平台,对动态的推送方式有些疑惑,于是研究到了以下结果. 简介 在信息学里面,Feed其实是一个信息单元,比如一条朋友圈状态.一条微博.一条资讯或一条短视频等,所 ...

  7. JOI 2020 Final 题解

    T1. 只不过是长的领带 大水题,把 \(a_i,b_i\) 从小到大排序. 发现最优方案只可能是大的 \(a_i\) 跟大的 \(b_i\) 匹配,小的 \(a_i\) 与小的 \(b_i\) 匹配 ...

  8. 第42篇-JNI引用的管理(1)

    在本地函数中会使用Java服务,这些服务都可以通过调用JNIEnv中封装的函数获取.我们在本地函数中可以访问所传入的引用类型参数,也可以通过JNI函数创建新的 Java 对象.这些 Java 对象显然 ...

  9. Python基础笔记1

    这篇笔记来自廖雪峰的Python教程. 一.Python基础 Python使用缩进来组织代码块,务必遵守约定俗成的习惯,坚持使用4个空格的缩进. 在文本编辑器中,需要设置把Tab自动转换为4个空格,确 ...

  10. R语言与医学统计图形-【31】动态交互绘图

    1.plotly包 动态散点图 library(plotly) # 交互散点图 plot_ly(data=iris, x=~Sepal.Length, y=~Petal.Length, marker= ...