前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
正则回顾总结
首页
2018-04-10 10:09:43
Front-End
JavaScript正则表达式

# 一、简介

# 1.1 正则表达式的web常见场合

  • 邮箱验证
  • 用户名验证
  • 替换字符串某一部分
  • 信息采集 用来分析有效的代码段

# 1.2 字符串应用正则

  • string.match(reg) 正则查找字符串
  • string.search(reg) 正则查找位置
  • string.replace(reg,'newstr')正则替换
  • string.split(reg)正则拆分

# 1.3 正则表达式3句话

# 1.3.1 要找什么字符?(5中方法)

  • 字面值 比如:hi就是找hi
  • 字符的集合[abcd] 匹配abdc任意一个
  • 用范围来表示字符[0-9] [a-z][A-Z]
  • 字符簇 就是系统为常用的字符集合创建的一个简写
    • 例如:\d 表示[0-9] \w代表[0-9a-zA-Z_] \s代表[\t\v\f\r\n](空白符)
  • 补集的形式来表示字符集合
    • 例如:[0-9] 补集 [^0-9]
    • 对于字符簇只需把字母大写即可表示补集 \d -->\D(非数字) \w–>\W (代表a-z0-9A-Z之外的东西) \s -->\S(代表非空白字符)
  • 点代表 任意字符 (不包括换行符)

# 1.3.2 从哪里找,找到哪?

  • \b 单词边界 \bhi 从单词边界开始匹配hi
  • \B 单词的非边界 把单词的中间某一部分取出来 把中间含有hi的单词取出来 即hi不能再两端
  • ^ 从字符串的起始位置开始匹配
  • $ 匹配到字符串的额结束位置

# 1.3.3 找多少

  • *表示匹配0-无穷==等价(0,)
  • +表示匹配1-无穷 ==等价(1,)
  • ?表示[0,1] == 等价(0,1)
  • a(n): 字符a准确出现n次
  • a(n,):字符a至少出现n次
  • a(n,m):n到m次

# 1.3 贪婪模式

  • 个数修饰符默认是贪婪模式 尽量多找
  • 是指在上面的个数修饰符后面加?,则为非贪婪模式,尽量少的找

模式:

  • 以匹配为例默认情况 match找到一次就结束 能否告诉匹配过程 一直找 在全文范围内一直找
  • g 表示全局模式 global 找所有的 而不是就找一行就结束
  • i ignore 忽略大小写
  • s 单行模式(把整篇文章看成一行)js不支持单行模式
  • m 多行模式

# 二、语法

# 2.1 基本元字符

  • . : 匹配除了换行符之外的任何单个字符
  • \ : 在非特殊字符之前的反斜杠表示下一个字符是特殊的
  • | : 逻辑或操作符
  • [] :定义一个字符集合,匹配字符集合中的一个字符,在字符集合里面像 .,\这些字符都表示其本身
  • [^]:对上面一个集合取非
  • - :定义一个区间,例如[A-Z],其首尾字符在 ASCII 字符集里面

# 2.2 数量元字符

  • {m,n} :匹配前面一个字符至少 m 次至多 n 次重复,还有{m}表示匹配 m 次,{m,}表示至少 m 次
  • + : 匹配前面一个表达式一次或者多次,相当于{1,},记忆方式追加(+),起码得有一次
  • * : 匹配前面一个表达式零次或者多次,相当于{0,},记忆方式乘法(*),可以一次都没有
  • ? : 单独使用匹配前面一个表达式零次或者一次,相当于 {0,1}

# 2.3 位置元字符

  • ^ : 单独使用匹配表达式的开始
  • \$ : 匹配表达式的结束
  • \b:匹配单词边界
  • \B:匹配非单词边界
  • (?=p):匹配 p 前面的位置
  • (?!p):匹配不是 p 前面的位置

# 2.4 特殊元字符

  • \d:[0-9],表示一位数字,记忆方式 digit
  • \D:[^0-9],表示一位非数字
  • \s:[\t\v\n\r\f],表示空白符,包括空格,水平制表符(\t),垂直制表符(\v),换行符(\n),回车符(\r),换页符(\f),记忆方式 space character
  • \S:[^\t\v\n\r\f],表示非空白符
  • \w:[0-9a-zA-Z],表示数字大小写字母和下划线,记忆方式 word
  • \W:[^0-9a-zA-Z],表示非单词字符

# 2.5 标志字符

  • g : 全局搜索 记忆方式global
  • i :不区分大小写 记忆方式 ignore
  • m :多行搜索

fe
Preview

  • 一、简介
    • 1.1 正则表达式的web常见场合
    • 1.2 字符串应用正则
    • 1.3 正则表达式3句话
      • 1.3.1 要找什么字符?(5中方法)
      • 1.3.2 从哪里找,找到哪?
      • 1.3.3 找多少
    • 1.3 贪婪模式
  • 二、语法
    • 2.1 基本元字符
    • 2.2 数量元字符
    • 2.3 位置元字符
    • 2.4 特殊元字符
    • 2.5 标志字符
  • 三、match,test,exec,search的返回值
    • 3.1 match的用法
    • 3.2 exec的用法
    • 3.3 test的用法
    • 3.4 search的用法
  • 四、应用
    • 4.1 例1
    • 4.2 例2-要找什么字符串
    • 4.3 例3-从哪里开始匹配
    • 4.4 例4 正则应用字符串
    • 4.5 例5-预查
    • 4.6 例6-反向引用
    • 4.7 例7-正则练习
    • 4.8 例8-常用正则
  • 五、总结
  • 六、扩展阅读

← 浅析React高阶组件HOCMac下抓包工具Charles的使用 →