JavaScript-8(正则表达式)

一、正则表达式

1.定义

• 对字符串进行描述的

2.作用

• 表单验证
• 验证 邮箱/电话/邮编 ....
• WEB编辑器
• 爬虫、数据抓取、小偷程序

3. 定义正则表达式

• 直接量
• 函数
• 构造函数

二、 正则表达式基础

1.原子

• 正则表达式的最小组成单位
• 普通的字母、数字、符号 都是原子
• 转义字符
• 字符类

2.字符直接量(原子)

• 原子的重要组成
• 普通的字母、数字、符号
• 换行
• 制表
• 回车
• v垂直制表
• f换页
• \
•  退格符
• x00
• u0000

3.字符类(原子)

• d 数字 [0-9]
• D 除了数字之外的字符 [^0-9]
• w 数字、字母、下划线 [0-9a-zA-Z_]
• W 除了数字、字母、下划线 之外的字符 [^0-9a-zA-Z_]
• s 空白符 [ v f ]
• S 除了空白符之外的字母 [^ v f ]
• . 除了换行外所有的字符 [^ ]
• [...] [0-9]表示一个范围，只要有一个满足即可
• [^...]除了...都匹配
• [] 匹配退格符

4.重复(对原子的数量修饰)

• + 表示前面原子出现1次或多次 {1,}
• ? 表示前面的原子出现0次或1次 {0,1}
• * 表示前面的原子出现0次1次或多次 任意次 {0,}
• {m} 前面的原子出现m次
• {m,n} 前面的原子出现m到n次
• {m,} 前面出现的原子个数m次以上
• 贪婪匹配
  • 正则默认会贪婪匹配，阻止贪婪匹配在数量修饰符后面加？
  • /w+?e/.exec("orangere") 只会匹配orange而不是orangere

5.指定匹配的位置 (对原子位置的修饰)

•  单词边界

• B 不是单词边界

• ^ 字符串开始边界

• $ 字符串结束边界

• 先行断言（正向预查） (?=)

• 负向先行断言（负向预查） (?!)

    //只能匹配后面的，不能匹配前面
    console.log(/(?=p)apple/.exec("apple"));//null
    console.log(/(?=p)apple/.exec("papple"));//null
    console.log(/apple(?=p)/.exec("applep"));//数组
  
    /*永远不可能满足*/
    console.log(/^apple(?=p)$/.exec("applep"));//null
  

6. 选择修饰符

• |逻辑或
• ab(c|d)ef匹配abcef 或 abdef

7. 模式单元 ()

• 改变优先级

• 把多个原子当做一个原子

• 把模式单元匹配的内容暂存内存 (?:) 可以取消暂存内容

• 暂存内存的内容可以被反向引用

    <script>
    	//改变优先级
    	console.log(/apple|orange/.test("apple"));//true
    	console.log(/appl(e|o)range/.test("apple"));//false
    	console.log(/appl(e|o)range/.test("applerange"));//true
    	console.log("");
  
    	//把多个原子当做一个原子
    	console.log(/abc{4}/.test("abcccc"));//true
    	console.log(/(abc){4}/.test("abcccc"));//false
    	console.log(/(abc){4}/.test("abcabcabcabc"));//true
    	console.log("");
  
    	//模式单元的内容会 单独存储到内存中
    	console.log(/abc/.exec("123abc123abc"));
    	/*["abc", index: 3, input: "123abc123abc"]*/
    	console.log(/a(b)c/.exec("123abc123abc"));
    	/*["abc", "b", index: 3, input: "123abc123abc"]*/
    	console.log(/(ab)c/.exec("123abc123abc"));
    	/*["abc", "ab", index: 3, input: "123abc123abc"]*/
    	console.log(/(ab)(c)/.exec("123abc123abc"));
    	/*["abc", "ab", "c", index: 3, input: "123abc123abc"]*/
    	console.log(/(ab)(?:c)/.exec("123abc123abc"));
    	/*["abc", "ab", index: 3, input: "123abc123abc"]*/
  
    </script>
  

8. 修饰符（模式修正符）

• i 正则表达式不区分大小写

• m 允许多行（换行被当做字符串结束符）

• g 全局匹配

    <script>
    	//i 不区分大小写
    	console.log(/^aAbB$/.test("aabb"));//false
    	console.log(/^aAbB$/i.test("aabb"));//true
    	console.log("");
  
    	//m 多行模式 字符串边界
    	console.log(/^a/.exec("orange
  apple"));null
    	
    	console.log(/^a/m.exec("orange
  apple"));
    	/*["a", index: 7, input: "orange↵apple"]*/
    	console.log(/w$/m.exec("orange
  apple"));
    	/*["e", index: 5, input: "orange↵apple"]*/
    	console.log(/w$/.exec("orange
  apple"));
    	/*["a", index: 7, input: "orange↵apple"]*/
    </script>
  

三、 正则的使用

1.RegExp对象

• test() true/false
• exec() 数组/null

2.String对象

• search() 匹配成功（第一次满足正则的位置） 匹配失败(-1)

• match() 匹配成功（返回数组 全局匹配影响） 失败(null)

• replace() 替换

• split() 把字符串分割为数组

    <script>
    	//search
    	console.log("abc123".search(/d{2}/));//3
    	console.log("abc123".search(/^d{2}/));//-1
  
    	//match
    	console.log("1abc34io".match(/[a-z]{2}/));
    	/*["ab", index: 1, input: "1abc34io"]*/
    	console.log("1abc34io".match(/[a-z](d)/));
    	/*["c3", "3", index: 3, input: "1abc34io"]*/
    	console.log("1abc34io".match(/[a-z]{2}/g));
    	/* ["ab", "io"]*/
    	console.log("1abc34io".match(/[a-z]{9}/g));//null
    	console.log("");
  
    	//replace
    	console.log("helloleelag".replace("l","呀"));
    	/*he呀loleelag*/
    	console.log("helloleelag".replace(/l/,"呀"));
    	/*he呀loleelag*/
    	console.log("helloleelag".replace(/l/g,"呀"));
    	/*he呀呀o呀ee呀ag*/
    	console.log("helloleelag".replace(/w/g,"呀"));
    	/*呀呀呀呀呀呀呀呀呀呀呀*/
    	console.log("");
  
    	//split
    	var message="jim.jack,rose,tom,lili,yanyan";
  
    	console.log(message.split(","));
    	/*["jim.jack", "rose", "tom", "lili", "yanyan"]*/
    	console.log(message.split(/[,.]/));
    	/*["jim", "jack", "rose", "tom", "lili", "yanyan"]*/
    </script>