JavaScript高级——RegExp正则表达式

正则表达式RegExp介绍

RegExp作用：对字符串进行逻辑规则匹配运算
内置对象：存储一些属性和方法
表达式：对字符串进行逻辑规则匹配运算
RegExp使用流程：
1. 创建正则对象
2. 调用test()方法开始匹配

原义文本字符与元字符

正则表达式规则语法主要分为两大类
1. 原义文本字符：就是字符串本身的含义，没别的意思。
  /abc/ : 检测字符串里面有没有abc.
  不是有a或者有b或者有c，也不是说有a和b和c。就是看有没有字符串叫做abc。
2. 元字符：改变了字符串原本的含义。 (类似于js中的关键字)
  () [] {} + * . | ? ^ $ \

	console.log( /abc/.test('a123456') )//false
	console.log( /abc/.test('a1b2c3123') )//false
	console.log( /abc/.test('ab666c') )//false
	console.log( /abc/.test('cba') )//false
	console.log( /abc/.test('456abc123') )//true

字符类与反向类

字符类： /[ abc ]/
/abc/ : 原义文本字符，检测字符串有没有abc
/[abc]/ : 字符类。将a和b和c这三种字符归为一类，只要满足任何一类即可
- 字符串里面只要有 abc任意一个字符即可

        console.log(/[abc]/.test('abc123'))// true
        console.log(/[abc]/.test('a123'))//true
        console.log(/[abc]/.test('b123'))//true
        console.log(/[abc]/.test('c123'))//true
        console.log(/[abc]/.test('abcabc'))//true
        console.log(/[abc]/.test('123123'))//false

反向类(负向类) : / [^abc] /
/[^abc]/ : 将没有a ，没有b，没有c的字符串归为一类。
- 字符串里面只要有任意一个不是a 、 b 、 c即可

        console.log(/[^abc]/.test('abc123'))// true
        console.log(/[^abc]/.test('a123'))//true
        console.log(/[^abc]/.test('b123'))//true
        console.log(/[^abc]/.test('c123'))//true
        console.log(/[^abc]/.test('abcabc'))//false
        console.log(/[^abc]/.test('123123'))//true

范围类

范围类
/[0-9]/ : 检测是否有数字字符
/[a-z]/ : 检测是否有小写字母
/[A-Z]/ : 检测是否有大写字母
- 注意点：
  a. 范围是一个闭区间： /[0-9]/ 包含0和9
  b. 范围类可以连接 : /[0-9a-zA-Z]/ : 检测字符串有没有数字或者英文字母
  c. 范围类左边 < 右边，否则正则报错
  /[5-8]/ :正确检测5-8范围的数字
  /[8-5]/ :错误报错

        //   /[0-9]/  : 检测是否有数字字符
        console.log(  /[0-9]/.test('abcabc')  );//false
        console.log(  /[0-9]/.test('abc0')  );//true
        

        //   /[a-z]/  : 检测是否有小写字母
        console.log(  /[a-z]/.test('abcabc')  );//true
        console.log(  /[a-z]/.test('abc123')  );//true
        console.log(  /[a-z]/.test('123456')  );//false
        //   /[A-Z]/  : 检测是否有大写字母
        console.log(  /[A-Z]/.test('abcabc')  );//false
        console.log(  /[A-Z]/.test('abc123')  );//false
        console.log(  /[A-Z]/.test('A123456')  );//true


        // console.log( /[8-5]/.test('123'));//false
        // console.log( /[5-8]/.test('6'));//true

预定义类

预定义类：相当于js的api。作者提前封装好的直接使用即可

正则表达式提供好的用来匹配常见的字符类

预定义类	等价类	含义
.	[^\r\n]	除了回车和换行之外的所有字符
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s	[\f\n\r\t\v]	空白字符
\S	[^\f\n\r\t\v]	非空白字符
\w	[a-zA-Z_0-9]	单词字符（字母、下划线、数字）
\W	[^a-zA-Z_0-9]	非单词字符）

    // (1)  /./  :  [^\r\n]   除了回车和换行之外的所有字符
    console.log( /./.test('asfsa') );//true
    console.log( /./.test('\n\r') );//false

    // (2) \d  :[0-9] 数字字符
    console.log(/\d/.test('abcabc'));//false
    console.log(/\d/.test('abc123'));//true
    console.log(/\d/.test('123123'));//true

    // (3) \D  :[^0-9] 非数字字符
    console.log(/\D/.test('abcabc'));//true
    console.log(/\D/.test('abc123'));//true
    console.log(/\D/.test('123123'));//false

    // (4) \s  :[\f\n\r\t\v]  空白字符
    console.log(/\s/.test('abcabc'));//false  字符串没有空格字符
    console.log(/\s/.test('abc abc'));//true  字符串里面有空格
   
    // (5) \S  :[\f\n\r\t\v]  非空白字符
    console.log(/\S/.test('abcabc'));//true   有非空白字符
    console.log(/\S/.test('abc abc'));//true
    console.log(/\S/.test('       '));//false   没有非空白字符，全是空白字符

    // (5) \w  : [a-zA-Z_0-9]  单词字符 （字母、数字、下划线_）
    console.log(/\w/.test('abcabc'));//true
    console.log(/\w/.test('abc123'));//true
    console.log(/\w/.test('_.,.,.,.,'));//true
    console.log(/\w/.test('.,.,.,.,'));//false
    
    // (6) \W  : [a-zA-Z_0-9]  非单词字符 （字母、数字、下划线_）
    console.log(/\W/.test('abcabc'));//false
    console.log(/\W/.test('abc123'));//false
    console.log(/\W/.test('_.,.,.,.,'));//true
    console.log(/\W/.test('.,.,.,.,'));//true

边界

边界：正则表达式提供了几个常用的边界匹配字符

边界字符	含义
^	以xxxx开头
$	以xxxx结束
\b	单词边界
\B	非单词边界

/^abc/ : 开头边界，以xxx开头
/[^abc]/ : 方向类。有非abc任意字符
/^abc/ : 开头边界
正确含义： 以a开头 + bc
千万不要理解错了，错误含义：以abc开头. 看起来效果是一样，但是这样解读就是错的

        console.log( /^abc/.test('a1b1bc1') );//false
        
        console.log( /^abc/.test('abc123') );//true
        
        console.log( /^abc/.test('123abc') );//false

/abc$/ : 结尾边界。以xxx结尾
正确含义： ab + c(结尾)
错误含义：以abc结尾. 虽然效果类似，但是这样解读就是错的

        console.log(  /abc$/.test('a1b1c') );//false
        console.log(  /abc$/.test('abc123') );//false
        console.log(  /abc$/.test('123abc') );//true

正则最重要的知识点： 严格匹配
- /^abc$/ : 严格匹配。只有唯一的正确答案： abc
- 正确含义：以 a(开头) + b + c(结尾)

        console.log( /^abc$/.test('abcabc'));//false
        console.log( /^abc$/.test('abc123'));//false
        console.log( /^abc$/.test('123abc'));//false
        //唯一的正确答案
        console.log( /^abc$/.test('abc'));//true

量词

量词：表示字符出现的数量

量词	含义
?	出现零次或一次（最多出现一次）
+	出现一次或多次（至少出现一次）
*	出现零次或多次（任意次）
{n}	出现n次
{n,m}	出现n-m次
{n,}	出现至少n次（>=n）

    console.log( 'a123456789'.replace(/\d?/,'X')) ;//Xa123456789 
    console.log( '123456789'.replace(/\d?/,'X')) ;//X23456789 

    console.log( '123456789'.replace(/\d+/,'X')) ;//X
    console.log( 'a123456789'.replace(/\d+/,'X')) ;//aX

    console.log( '123456789'.replace(/\d*/,'X')) ;//X
    console.log( 'a123456789'.replace(/\d*/,'X')) ;//Xa123456789

    console.log( '123456789'.replace(/\d{5}/,'X')) ;//X6789
    console.log( '123456789'.replace(/\d{5,8}/,'X')) ;//X9
    console.log( '123456789'.replace(/\d{5,}/,'X')) ;//X
    console.log( '123'.replace(/\d{5,}/,'X')) ;//123  此时数字数量小于五， 正则无法匹配。 无法替换

分组

()元字符在正则表达式中有三种含义

分组 :将多个字符分为一组(默认情况下，量词只能对单个字符生效。如果希望量词可以对多个字符生效，就可以使用()将多个字符分为一组。)

        console.log(/love{3}/.test('lovelovelove'));//fasle
        console.log(/love{3}/.test('loveee'));//true

        console.log(/(love){3}/.test('lovelovelove'));//true
        console.log(/(love){3}/.test('loveee'));//false

提升优先级：提升优先级：需要结合 | 一起使用
| : 或。默认会被两边所有的字符生效。如果只希望对某个字符生效，就可以使用()提升|的优先级

        
        /*需求： 匹配 出现love 或者 live的单词
        /lo|ive/ :   匹配 lo  或者  ive的单词
        /l(o|i)ve/ :   匹配 l + o或者i + ve的单词
        */

        console.log(/lo|ive/.test('lo1111'));//true
        console.log(/lo|ive/.test('222ive'));//true
        console.log(/lo|ive/.test('love'));//true

        console.log(/l(o|i)ve/.test('lo1111'));//false
        console.log(/l(o|i)ve/.test('222ive'));//false
        console.log(/l(o|i)ve/.test('love'));//true

反向引用 ：正则表达式会把小括号中匹配到的内容给存起来。存入$1-$9中。用于反向引用。

/*
场景 ： 日期格式  大陆日期格式 yyy-mm-dd   香港日期格式：dd-mm-yyyy
        2020-08-15  转换成  15/08/2020
*/
        console.log( '2020-08-15'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$3/$2/$1') );//15/08/2020

修饰符

修饰符：影响整个正则规则的特殊符号（对正则起修饰作用）
i : intensity 不区分大小
g : global 全局匹配
m : multiple 检测换行符(需要和边界一起使用)
修饰符语法： /正则表达式/修饰符

        //1.  i : intensity   不区分大小 
        
        console.log( 'AaAAAaaa'.replace(/a/,'X') );// AXAAAaaa  默认情况下正则区分大小写

        console.log( 'AaAAAaaa'.replace(/a/i,'X') );// XaAAAaaa i:不区分大小写

        //2.  g : global  全局匹配
        console.log( 'AaAAAaaa'.replace(/a/,'X') );// AXAAAaaa 默认情况下正则只能匹配第一个

        console.log( 'AaAAAaaa'.replace(/a/g,'X') );// AXAAAXXX g:全局匹配

        /* 细节： 修饰符支持同时写多个 */
        console.log( 'AaAAAaaa'.replace(/a/ig,'X') );//XXXXXXX 不区分大小写，全局匹配

        //3 m : multiple 检测换行符 
        /* 
        让边界 能够识别换行符
        */

        //每一行的第一个我，改成你字
        let str = '我爱她\n我爱她\n我爱她';
        console.log(str);

        console.log( str.replace(/^我/gm,'你') );

贪婪模式与非贪婪模式（一般用于量词）

贪婪模式：正则表达式在匹配成功的前提下，尽可能多的匹配（默认模式）
非贪婪模式:正则表达式匹配成功的前提下，尽可能少的匹配（在量词后面加上 ?）

	//1.贪婪模式：正则表达式在匹配成功的前提下，尽可能多的匹配

    var reg = /\d{3,6}/;//匹配3-6位数字

    console.log ( "1234567890".replace ( reg, "X" ) );//X7890   (正则表达式会匹配6位数字)

    //2.非贪婪模式:正则表达式匹配成功的前提下，尽可能少的匹配
    //语法：在量词后面加上 ?

    var reg1 = /\d{3,6}?/;//匹配3-6位数字
    console.log ( "1234567890".replace ( reg1, "X" ) );//X4567890   (正则表达式会匹配3位数字)

JavaScript高级——RegExp正则表达式

正则表达式RegExp介绍

原义文本字符与元字符

字符类与反向类

范围类

预定义类

边界

量词

分组

修饰符

贪婪模式与非贪婪模式（一般用于量词）

正则表达式在线生成

猜你喜欢