前端培训-初级阶段(13) - 正则表达式

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。该文为前端培训-初级阶段(13、18)的补充内容 (介绍了 ECMAScript 历史,ES6 常用点)。本文介绍ECMAScript基础知识。前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句)前端培训-初级阶段(13) - ECMAScript (内置对象、函数)前端培训-初级阶段(13) - 类、模,继承

我们要讲什么?



  1. 正则表达式基本的关键词


  1. 正则表达式一些进阶用法(预查断言)


  1. 常见正则


  1. 实战场景


正则表达式基本的关键词



  1. 声明一个正则表达式


1)var reg=new RegExp('规则','条件');
因为规则是一个字符串,所以可以拼接,我们需要根据其他词库,来生成过滤正则。


2)var reg=/规则/条件;
一般来说我们使用这个,方便快捷


  1. 条件


关键词 说明 用法
i ignore 忽略大小写 一般用在标签匹配比如 <img><IMG>
g global 全局 一般用在需要匹配多个区域的时候比如违规词语要替换成**
m multiline 多行 这个用的比较少


  1. 规则


里面的所有都是错的,需要自己替换成半角的|


关键词 匹配项 说明 用法
字符串 常规字符 直接填入你要匹配的字符即可,关键词需要转义 '骂人,骂人的话'.replace(/骂人/g, '**')
\d 数字0-9的缩写,也等价于[0-9] '0313-0000000'.replace(/\d/g, '*')
\w 单词,也等价于[a-zA-Z0-9_] 'tel: 0313-;URI: lilnong.top'.replace(/\w/g, '*')
\s 任何不可见字符,包括空格、换行等。等价于[ \f\n\r\t\v] ' \f\n\r\t\v'.replace(/\s/g, '*')
\b 单词边界,类似于$ 'lists list'.replace(/s\b/g, '')
\D \W \S \B 等同于上面小写的取反
\num 匹配之前的分组num为索引,可以用来查找重复字符 'abbcccddddeffffffff'.match(/(\w)\1+/g)
( ) 分组 可以用来给\num匹配,也可以用来给match函数使用
或 用来标识关键字匹配其中的即可 'x + y = ?'.replace(/x|y/g,()=>Math.random()*50>>0)
[xyz] 字符集合 比较常用里面可以放上面的关键词 'x + y = ?'.replace(/[xy]/g,()=>Math.random()*50>>0)
. 除“\n”和"\r"之外的任何单个字符。


  1. 上面介绍了常见的规则,其实还有一些匹配的量词


关键词 匹配项 说明 用法
^ 标识开始 'onchange'.match(/^on\w+/)
$ 标识结束 'abc.mp4.avi'.match(/\.\w+$/)
* 0或多个,等价于{0,} 'abbccc'.match(/a*/g)
+ 1或多个,等价于{1,} 'abbccc'.match(/a+/g)
? 0活1个,等价于{0,1} 'abbccc'.match(/a?/g)
{n,m} n和m可以省略一个,也可以都写上,限定个数


正则表达式一些进阶用法(预查)



js中的支持的不是很好


  1. 将简单的网址:www.abc.com中的中间部分abc提取出来


  1. 正向零宽先行断言 'https://segmentfault.com/write'.match(/\w+(?=\.com)/)


常见正则



  1. 邮箱 /\w+@\w+(\.\w+)+/


  1. 手机号 /^1\d{10}$/.test('15075754545')


实战



  1. 匹配歌词文件


bVbsorR.webp.jpg


  1. 获取URL中的参数
    location.search.match(/[?&]q=[^&]*/) q为key
相关文章
|
5天前
|
前端开发 JavaScript
前端JavaScript入门-day08-正则表达式
前端JavaScript入门-day08-正则表达式
41 0
|
2天前
|
前端开发 JavaScript
前端 js 经典:正则表达式
前端 js 经典:正则表达式
9 2
|
5天前
|
前端开发 关系型数据库 MySQL
前端知识笔记(二十九)———MySQL通配符和正则表达式
前端知识笔记(二十九)———MySQL通配符和正则表达式
32 0
|
前端开发
前端知识案例86-javascript基础语法-正则表达式
前端知识案例86-javascript基础语法-正则表达式
48 0
前端知识案例86-javascript基础语法-正则表达式
|
前端开发
前端知识案例92-javascript基础语法-常见正则表达式
前端知识案例92-javascript基础语法-常见正则表达式
52 0
前端知识案例92-javascript基础语法-常见正则表达式
|
前端开发 数据安全/隐私保护
前端常用的正则表达式
前端常用的正则表达式
|
JavaScript 前端开发 数据安全/隐私保护
前端常用的正则表达式大全
前端常用的正则表达式大全
271 0
|
SQL JavaScript 前端开发
正则表达式--QQ微信、优酷前端 邮箱正则表达式验证 Bug
但凡稍微有点资历的程序员,都免不了要写正则表达验证算法。最近见到好几个正则表达式的Bug,抽空写出来 拿邮箱验证来说,网上绝大部分人写的邮箱验证正则表达式代码都不能验证这邮箱
|
前端开发 JavaScript
前端学习:javascript正则表达式及前端组件
前端学习:javascript正则表达式及前端组件
117 0
|
自然语言处理 前端开发 JavaScript
web前端学习(三十八)——JavaScript正则表达式、异常处理的相关设置
web前端学习(三十八)——JavaScript正则表达式、异常处理的相关设置
web前端学习(三十八)——JavaScript正则表达式、异常处理的相关设置