前端知识分类收纳(1)-正则表达式

yy13818512006 发布于2019-08-22 18:48 / 2855人阅读

摘要：最近迷上了收纳，买了好多的箱子，开始整理屋里的东西。同时，返回的这个数组同时还是一个对象，它拥有两个属性，分别为表示当前匹配到的子字符串所处的位置，属性表示被匹配的原始字符串。

最近迷上了收纳，买了好多的箱子，开始整理屋里的东西。好友甚至借给我一本日本作家的关于收纳的书籍，又摩拳擦掌地要周末来帮我收拾～～。好吧，那就整理起来吧！
回头再看看从事的前端工作，都说前端的知识点大而杂，那这么多的知识点是不是也可以收纳整理一下呢？在头脑中逐步形成一个有战斗力的兵团，当碰到敌军进犯时，都争先恐后的跳出来请战，而我熟悉他们的每一个优点，更能审时度势，运筹帷幄！多说无益，开始行动吧！
第一个收纳箱从“正则表达式”开始
在网上看看一个非常详细的树形图介绍，也引用下来。原图片的地址如下：https://files.jb51.net/file_i...

基本内容

定义：
（1） 构造函数方式：new RegExp("abc", "gi")
（2） 字面量方式： var reg = /abc/gi

常用的元字符:
.    匹配除换行符以外的任意字符
w    匹配字母、数字、下划线或汉字
W    匹配任意不是字母，数字，下划线，汉字的字符
s    匹配任意的空白符
S    匹配任意不是空白符的字符
d    匹配数字
D    匹配任意非数字的字符
    匹配单词的开始或结束
B    匹配不是单词开头或结束的位置
^    匹配字符串的开始
$    匹配字符串的结束

重复的限定符：
*重复零次或更多次
+重复一次或更多次
?    重复零次或一次
{n}    重复n次
{n,}    重复n次或更多次
{n,m}    重复n到m次

[aeiou]    匹配字符集    
|    分支条件

()  分组    
(exp)    匹配exp,并捕获文本到自动命名的组里
(?exp)    匹配exp,并捕获文本到名称为name的组里，也可以写成(?"name"exp)
(?:exp)    匹配exp,不捕获匹配的文本，也不给此分组分配组号
(?=exp)    匹配exp前面的位置，
(?<=exp)    匹配exp后面的位置
(?!exp)    匹配后面跟的不是exp的位置
(?

3个标识(flags):
g  全局模式
i  不区分大小写
m  多行模式


捕获分组: 
后向引用：重复搜索前面某个分组匹配的文本。
零宽度断言: 查找某些内容之前和之后的东西，也就是说指定一个位置，这个位置应该满足一定条件(断言)
懒惰和贪婪：贪婪-匹配尽量多的字符。懒惰-加?


常用方法：
正则自身的方法：
（1）test: 匹配返回true，否则返回false
var reg=/boy(s)?s+ands+girl(s)?/gi;
console.log(reg.test("boy    and   girl"));

（2）exec:
该方法属于一个比较复杂的方法，它接受一个字符串，返回的是一个数组，数组中第0个元素是匹配的子字符串，第二个元素是正则中的第一个子分组匹配的结果（如果有子分组，即正则中存在用圆括号括起来的分组），第三个是正则中第二个子分组匹配的结果（如果有第二个子分组）...以此类推，如果没有正则子分组，那么该数组长度仅仅为1，就是匹配到的那个子字符串。同时，返回的这个数组同时还是一个对象，它拥有两个属性，分别为index表示当前匹配到的子字符串所处的位置，input属性表示被匹配的原始字符串。最后，该方法中的正则对象如果不是全局匹配，即没有g修饰符，则每次调用只会从字符串开头处匹配第一个结果，且每次调用结果都是一样的。
var reg=/(w)l(w)/g;
var str="hello world hello 123 hello programmer hello test";
var arr=reg.exec(str);

 js方法：
（3）match: 全局下把全部的搜索以数组方式返回。
（4）search:返回第一次匹配的index, 不匹配则返回-1

var str="hello world";
console.log(str.search(/o/g));
（5）replace
str.replace(/hello/g,"hi")
（6）split：当拆分规则不统一时使用
var str="how|old*are    you";
var arr=str.split(/||*|s+/);






ES6扩展
实例
（1）只输入中文
（2）只数组中文和英文
（3）邮箱验证
（4）IP验证

idc机房托管混合云正则正则表达式正则匹配正则表达式 -正则表达式正则表达式?

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

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

前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
重学前端学习笔记（二十七）--JavaScript的词法

摘要：模板语法四种词法定义二空白符号空白符号分类或称是，是缩进符，字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱...

jayzou 2019-08-30 11:04 评论0 收藏0