什么是正则表达式

  • 正则表达式 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使用cx_Oracle模块操作Oracle数据库--通过sql语句和存储操作

    https://www.jb51.net/article/125160.htm?utm_medium=referral  Python使用cx_Oracle调用Oracle存储过程的方法示例 http ...

  2. js-sequence-diagrams > 时序图

    ... <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  3. ipython和pip,模块安装方法

    先下载 pip-.tar.gz 解压文件 cmd进入这个加压后的文件 执行 python setup.py install 然后配置环境变量 把 python 下的 Scripts 文件目录添加到 P ...

  4. windows桌面图标不显示,左右键无法使用的解决方法

    问题描述: 日常使用软件中,一返回桌面,桌面图标全部不显示,点击鼠标的左键,右键毫无反应 解决方法: 1. Ctrl+Shift+Esc呼出软仵管理器 2. 右键windows资管理器,点击属性 配图 ...

  5. 在cmd中使用vim编译器

    下载地址:http://www.vim.org/download.php#pc 下载GVIM,配置下path环境变量就可以在cmd中使用vim了 把vim.exe复制一份,更名为vi.exe,就可以直 ...

  6. 『学了就忘』Linux软件包管理 — 49、拓展:Linux中通过脚本安装程序

    目录 1.脚本程序简介 2.Webmin安装 (1)简介 (2)安装 (3)使用 1.脚本程序简介 脚本程序包并不多见,所以在软件包分类中并没有把它列为一类.它更加类似于Windows下的程序安装,有 ...

  7. 面试官问我JVM调优,我忍不住了!

    面试官:今天要不来聊聊JVM调优相关的吧? 面试官:你曾经在生产环境下有过调优JVM的经历吗? 候选者:没有 面试官:... 候选者:嗯...是这样的,我们一般优化系统的思路是这样的 候选者:1. 一 ...

  8. 【GitHub】本地代码上传

    本地代码上传GitHub 2019-11-18  20:03:45  by冲冲 1.注册GitHub https://github.com/ 2.安装Git工具 https://git-for-win ...

  9. pycharm两个交互模式

  10. C 语言do while 循环

    do while 循环小练习 1 #include <stdio.h> 2 #include <stdlib.h> 3 4 int main(void) 5 { 6 int a ...