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

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


基本内容


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

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

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

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

()  分组    
(exp)    匹配exp,并捕获文本到自动命名的组里
(?<name>exp)    匹配exp,并捕获文本到名称为name的组里,也可以写成(?'name'exp)
(?:exp)    匹配exp,不捕获匹配的文本,也不给此分组分配组号
(?=exp)    匹配exp前面的位置,
(?<=exp)    匹配exp后面的位置
(?!exp)    匹配后面跟的不是exp的位置
(?<!exp)    匹配前面不是exp的位置
(?#comment)    这种类型的分组不对正则表达式的处理产生任何影响,用于提供注释让人阅读

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

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

常用方法:
正则自身的方法:
(1)test: 匹配返回true,否则返回false
var reg=/boy(s)?\s+and\s+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验证

相关推荐