前端入门阶段学习(6)

11 篇文章 0 订阅
11 篇文章 0 订阅

我们要讲什么?

  1. 正则表达式基本的关键词
  2. 正则表达式一些进阶用法(预查断言)
  3. 常见正则
  4. 实战场景

正则表达式基本的关键词

  1. 声明一个正则表达式
    1)var reg=new RegExp('规则','条件');
    因为规则是一个字符串,所以可以拼接,比如new RegExp(['违规','骂人','涉黄','涉政'].join('|')).test('正经人涉黄')在这个场景当中,我们需要根据其他词库,来生成过滤正则。

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

  2. 条件

    关键词说明用法
    iignore 忽略大小写一般用在标签匹配比如 <img><IMG>
    gglobal 全局一般用在需要匹配多个区域的时候比如违规词语要替换成**
    mmultiline 多行这个用的比较少
  3. 规则
    里面的所有都是错的,需要自己替换成半角的|

    关键词匹配项 说明用法
    字符串常规字符 直接填入你要匹配的字符即可,关键词需要转义'骂人,骂人的话'.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"之外的任何单个字符。

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

    关键词匹配项 说明用法
    ^标识开始'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提取出来

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

常见正则

  1. 邮箱 /\w+@\w+(\.\w+)+/
  2. 手机号 /^1\d{10}$/.test('15075754545')

实战

  1. 匹配歌词文件

image.png

  1. 获取URL中的参数
    location.search.match(/[?&]q=[^&]*/) q为key


最后,给大家推荐一个前端学习进阶内推交流群685910553前端资料分享),不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)

如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路,越走越远。

更多文章:

前端HTML & CSS 基础入门(1)初识

前端HTML & CSS 基础入门(2)段落及文本

前端HTML & CSS 基础入门(3)列表及其样式

前端HTML & CSS 基础入门(4)边框与背景

前端HTML & CSS 基础入门(5)超链接

前端HTML & CSS 基础入门(6)表格

前端HTML & CSS 基础入门(7)表单

前端HTML & CSS 基础入门(8)CSS盒子

前端HTML & CSS 基础入门(9)布局与定位

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值