资讯专栏INFORMATION COLUMN

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

suemi / 3488人阅读

摘要:前端培训初级阶段语法变量值类型运算符语句前端培训初级阶段内置对象函数前端培训初级阶段类模块继承基础内容知识我们会用到。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

该文为前端培训-初级阶段(13、18)的补充内容 (介绍了 ECMAScript 历史,ES6 常用点)。

本文介绍ECMAScript基础知识

前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句)

前端培训-初级阶段(13) - ECMAScript (内置对象、函数)

前端培训-初级阶段(13) - 类、模块、继承

基础内容知识我们会用到。默认已读。

我们要讲什么?

正则表达式基本的关键词

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

常见正则

实战场景

正则表达式基本的关键词

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

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

条件

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

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

关键词 匹配项 说明 用法
字符串 常规字符 直接填入你要匹配的字符即可,关键词需要转义 "骂人,骂人的话".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 v] " f v".replace(/s/g, "*")
 单词边界,类似于$ "lists list".replace(/s/g, "")
D W S B 等同于上面小写的取反
um 匹配之前的分组num为索引,可以用来查找重复字符 "abbcccffffddeffffffff".match(/(w)1+/g)
( ) 分组 可以用来给 um匹配,也可以用来给match函数使用
或 用来标识关键字匹配其中的即可 "x + y = ?".replace(/x|y/g,()=>Math.random()*50>>0)
[xyz] 字符集合 比较常用里面可以放上面的关键词 "x + y = ?".replace(/[xy]/g,()=>Math.random()*50>>0)
. 除“ ”和" "之外的任何单个字符。

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

关键词 匹配项 说明 用法
^ 标识开始 "onchange".match(/^onw+/)
$ 标识结束 "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中的支持的不是很好

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

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

3.

常见正则

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

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

实战

匹配歌词文件

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

后记

主讲人文章-2019.04.18。

我虽然忙没写出来,但是学习我们是一直在做的。赶赶进度。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109395.html

相关文章

  • 前端培训-中级阶段(4)- BOM 浏览器对象模型(2019-07-04期)

    摘要:提供了与浏览器窗口进行交互的对象标签之间不会共享。用于描述当前浏览器的历史记录。表示窗口是否以全屏显示。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 前面我们已经基本掌握常规的语法语义,以及基...

    smallStone 评论0 收藏0
  • 前端培训-中级阶段(4)- BOM 浏览器对象模型(2019-07-04期)

    摘要:提供了与浏览器窗口进行交互的对象标签之间不会共享。用于描述当前浏览器的历史记录。表示窗口是否以全屏显示。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 前面我们已经基本掌握常规的语法语义,以及基...

    h9911 评论0 收藏0
  • 前端培训-中级阶段(11、12)- 跨域请求原理以及实现(2019-08-22期)

    摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...

    binaryTree 评论0 收藏0
  • 前端培训-中级阶段(10)- 同源策略(2019-08-15期)

    摘要:同源策略是什么同源策略是浏览器的一个安全功能,不同源的数据禁止访问。或许你可以说验证,在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的,防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思...

    heartFollower 评论0 收藏0
  • 前端培训-中级阶段(6)- jQuery的事件绑定链式操作及原理(2019-07-25期)

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    Airy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<