正则

正则表达式, 又名 "规则表达式"
由我们自己来书写 "规则", 专门用来检测 字符串 是否符合 "规则" 使用的
我们使用一些特殊的字符或者符号定义一个 "规则公式", 然后用我们定义好的 "规则公式" 去检测字符串是不是合格

var reg = /\d+/
var str1 = '123'
var str2 = 'abc'
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false

上面的变量 reg 就是定制好的规则
检测 str1 这个字符串的时候, 符合规则
检测 str2 这个字符串的时候, 不符合规则

一、创建一个正则表达式

想制定 "规则", 就必须要按照人家要求的方式来制定
把一些字母和符号写在 // 中间的东西, 叫做正则表达式, 比如 /abcdefg/
创建正则表达式有两个方式 字面量 和 构造函数创建

字面量创建

var reg = /abcdefg/

构造函数创建

var reg = new RegExp('abcdefg')

二、正则表达式里面的符号

1.元字符

.: 表示一位非换行的内容

        const reg = /./     // 表示字符串中需要包含一个 非换行的内容
        console.log(reg.test('\n')) // false
        console.log(reg.test('qwertyui\n')) // true
        console.log(reg.test('1234567\n')) // true
        console.log(reg.test('@#$%^&*\n')) // true

\: 转译符号, 把有意义的符号转换成没有意义的字符, 把没有意义的字符转换成有意义的符号
\s: 表示一位空白内容 (空格缩进)

        const reg = /\s/    // 表示字符串中需要包含一个 空白内容
        console.log(reg.test('qwe123@#$'))  // false
        console.log(reg.test('qwe12 3@#$'))  // true
        console.log(reg.test('          '))  // true

\S: 表示一位非空白内容 (空格;缩进; 之外的)

        const reg = /\S/    // 表示字符串中需要包含一个 非空白内容
        console.log(reg.test('              '))   // false
        console.log(reg.test('      q       '))   // true
        console.log(reg.test('      1       '))   // true
        console.log(reg.test('      @       '))   // true

\d: 表示一位数字 (0-9)

        const reg = /\d/    // 表示字符串中需要包含一个数字(0-9)
        console.log(reg.test('qwertyuiolkjhgfdszxcvbju'))  // false
        console.log(reg.test('qwertyui00000000fdszxcvb'))  // true
        console.log(reg.test('123456789098765432'))  // true

\D: 表示一位非数字 (0-9 之外的)

        const reg = /\D/    // 表示字符串中需要包含一个非数字内容(0-9之外的)
        console.log(reg.test('12345678909543212345678')) // false
        console.log(reg.test('1234567kkkkkkkkk8765432')) // false
        console.log(reg.test('gheysqwertty')); // true

\w: 表示一位数字(0-9)字母(a-zA-Z)下划线

        const reg = /\w/    // 表示字符串中需要包含一个 数字(0-9)字母(a-zA-Z)下划线
        console.log(reg.test('#$%'))    // false
        console.log(reg.test('#$%_'))    // true
        console.log(reg.test('#$%7'))    // true
        console.log(reg.test('#$%a'))    // true
        console.log(reg.test('#$%a5678_____'))    // true

\W: 表示一位非数字(0-9)字母(a-zA-Z)下划线

        const reg = /\W/   // 表示字符串中需要包含一个 非数字(0-9)字母(a-zA-Z)下划线
        console.log(reg.test('#$%^&'))  // true
        console.log(reg.test('qwerty_123456789'))  // false

2.边界符

^: 表示开头

        const reg = /^\d/       // 要求字符串开头是数字0-9其中的某一个
        console.log(reg.test('QF001'))    // false
        console.log(reg.test('123QF'))    // true

$: 表示结尾

        const reg = /\d$/       // 要求字符串的结尾是数字0-9其中的某一个
        console.log(reg.test('QF001'))  // true
        console.log(reg.test('001QF'))  // false

当正则中同时出现开头和结尾, 表明要求我们的字符串必须是和我们的正则规则相同

        const reg = /^\d$/        // 要求字符串只能是一个 0-9 之间的数字
        console.log(reg.test('qwer_@#$%_7'))    // false
        console.log(reg.test('8'))    // true
        console.log(reg.test('10086'))    // false

3.限定符

*: 前一个内容重复至少 0 次, 也就是可以出现 0~正无穷 次

        const reg = /^\d*$/     // 要求字符串只能是 0~正无穷个    数字组成
        console.log(reg.test('qwerty')) // false
        console.log(reg.test('qwe100rty')) // false
        // console.log(reg.test('')) // true      在实际开发中 只有当字符串有值的时候再去做正则的校验
        console.log(reg.test('1')) // true
        console.log(reg.test('123456789654')) // true

+: 前一个内容重复至少 1 次, 也就是可以出现 1~正无穷 次

        const reg = /^\d+$/        // 要求字符串只能是 1~正无穷个    数字组成
        console.log(reg.test('qwertyui')) // false
        console.log(reg.test('qwe12345676543rty')) // false
        // console.log(reg.test('')) // false
        console.log(reg.test('1')) // true
        console.log(reg.test('112345678')) // true

?: 前一个内容重复 0 或者 1 次, 也就是可以出现 0~1 次

        const reg = /^\d?$/     // 要求字符串只能是 0~1   数字组成
        console.log(reg.test('qwertyui'))   // false
        console.log(reg.test('123456789'))  // false
        console.log(reg.test('7'))  // true
        console.log(reg.test(''))  // true

{n}: 前一个内容重复 n 次, 也就是必须出现 n 次

        const reg = /^\d{3}$/       // 要求字符串只能是 3个   数字组成
        console.log(reg.test('1'))      // false
        console.log(reg.test('12'))     // false
        console.log(reg.test('123'))    // true
        console.log(reg.test('1234'))   // false

{n,}: 前一个内容至少出现 n 次, 也就是出现 n ~ 正无穷 次

        const reg = /^\d{3,}$/       // 要求字符串只能是 3~正无穷次 数字组成
        console.log(reg.test('1'))      // false
        console.log(reg.test('12'))     // false
        console.log(reg.test('123'))    // true
        console.log(reg.test('1234'))   // true

{n, m}: 前一个内容至少出现 n 次至多出现 m 次, 也就是出现 n~m 次

        const reg = /^\d{3,5}$/       // 要求字符串只能是 3~5 数字
        console.log(reg.test('1'))          // false
        console.log(reg.test('12'))         // false
        console.log(reg.test('123'))        // true
        console.log(reg.test('1234'))       // true
        console.log(reg.test('12345'))      // true
        console.log(reg.test('123456'))     // false

4.特殊符号

(): 将括号内的内容, 当成一个整体

        const reg = /^abc$/     // 要求字符串必须是 abc 三个小写字母组成
        console.log(reg.test('abc'))        // true
        console.log(reg.test('abccc'))      // false
        console.log(reg.test('abcabcabc'))  // false

        const reg = /^abc{3}$/     // 要求字符串必须是 abccc 五个小写字母组成
        console.log(reg.test('abc'))        // false
        console.log(reg.test('abccc'))      // true
        console.log(reg.test('abcabcabc'))  // false

        const reg = /^(abc){3}$/     // 要求字符串必须是 abcabcabc 小写字母组成
        console.log(reg.test('abc'))        // false
        console.log(reg.test('abccc'))      // false
        console.log(reg.test('abcabcabc'))  // true

|: 或, 正则里的 a|b 表示字母 a 或者 b 都可以

        const reg = /^a|b$/     // 要求字符串是 a 或者 b
        console.log(reg.test('a'))  // true
        console.log(reg.test('b'))  // true
        console.log(reg.test('c'))  // false

[]: 字符集合, 表示写在 [] 里面的任意一个都行

        const reg = /^[abc]def$/    // 要求字符串是:    adef;    bdef;    cdef
        console.log(reg.test('abcdef')) // false
        console.log(reg.test('adef'))   // true
        console.log(reg.test('bdef'))   // true
        console.log(reg.test('cdef'))   // true
        console.log(reg.test('wdef'))   // false

[^]: 反字符集合, 表示写在 [^] 里面之外的任意一个都行

        const reg = /^abc[^def]$/       // 要求字符串是 abc 开头, 后边跟一个任意字符 但不能是 def 其中的某一个
        console.log(reg.test('abcw'))   // true
        console.log(reg.test('abcd'))   // false
        console.log(reg.test('abce'))   // false
        console.log(reg.test('abcf'))   // false

-: 范围, 比如 a-z 表示从字母 a 到字母 z 都可以

        const reg = /^[0-9]$/   // 要求字符串只能是 0~9 之间的某一个数字
        const reg = /^[a-z]$/   // 要求字符串只能是 a~z 之间的某一个字母
        const reg = /^[^0-9]$/   // 要求字符串是 0~9 以外的任意一个字符

5.重复元字符

\数字: 表示重复第 n 个小括号的内容, 要求和第 n 个小括号的内容一摸一样

/**
 * 表示 \1 位置需要出现一个 和 第1个 小括号 一模一样的额呢绒
 *  小括号位置出现的是 abc, \1 位置也带是 abc
 *  小括号位置出现的是 def, \1 位置也带是 def
*/
var reg = /^(abc|def)\1$/
console.log(reg.test('abcabc')) // true
console.log(reg.test('defdef')) // true
console.log(reg.test('defabc')) // false

const reg = /^<(div|p)><\/\1>$/
console.log(reg.test('<div></div>'))  // true
console.log(reg.test('<p></p>'))    // true
console.log(reg.test('<span></span>'))   // false
console.log(reg.test('<div></p>'))  // false
console.log(reg.test('<p></div>'))  // false

6.标识符

i: 表示忽略大小写
- 这个 i 是写在正则的最后面的, 例如: /\w/i
- 这就是在匹配的时候匹配数字字母下划线, 并且不区分大小写

        const reg = /^[abcd]$/i  // 要求字符串必须是 abcd 四个字母中其中的某一个 (不区分大小写)
        console.log(reg.test('a'))  // true
        console.log(reg.test('c'))  // true
        console.log(reg.test('A'))  // true
        console.log(reg.test('C'))  // true

g: 表示全局匹配
- 这个 g 是写在正则的最后面的, 例如: /\w/g
- 就是全局匹配数字字母下划线

三、正则的两大特性 (懒惰与贪婪)

懒惰
- 每次捕获都会从字符串 [0] 的位置开始检索
- 解决:
  - 给正则添加全局标识符
贪婪
- 每次捕获内容的时候会尽可能地多的去捕获内容
- 解决:
  - 使用非贪婪限定符(在原有限定符后面多加一个 ?)
- 贪婪限定符
  - *; +; ?; {n,}; {n,m}
- 非贪婪限定符
  - *?; +?; ??; {n,}?; {n,m}?

var str = `<div class="box" id="box"><span></span></div>`

// 贪婪捕获
var reg = /<div.*>/
console.log(reg.exec(str))

// 非贪婪捕获
var reg1 = /<div.*?>/
console.logIreg1.exec(str)

四、正则表达式的方法

test 用来检测字符串是否符合我们正则的标准

语法: 正则.test(字符串)
返回值: boolean

console.log(/\d+/.test('123'))

exec 把字符串中符合条件的内容捕获出来

语法: 正则.exec(字符串)
返回值:
1. 当原始字符串内没有符合正则规范的片段的时候, 返回值为 null
2. 当原始字符串内有符合正则规范的判断的时候
  - 返回值一定是一个数组: 数组内的 [0] 是捕获出来的字符串片段
  - 没有 () 没有标识符g
    - 只能获取第一组匹配到的字符串片段
    - 不管匹配多少回, 都是从字符串 [0] 的位置开始检索
  - 有 () 会在返回值数组的 [1] 开始依次是每一个 () 内的单独内容
  - 有 g
    - g 叫做全局标识符
    - 第二次捕获会从第一次捕获的结束位置开始进行检索
    - 直到找不到内容, 返回 null
    - 在下一次捕获的时候, 会从字符串 [0] 开始检索
扩展: 匹配但不捕获
- 当我们需要使用 () 的一个整体这个作用的时候, 但是又不想单独捕获出来
- 可以这样书写: (?:)

var reg = /\d{3}/
var str = 'hello123word456你好789'
var res = reg.exec(str)
console.log(res)
/*
    ['123', index: 5, input: 'hello123word456你好789', groups: undefined]
        0: "123"
        groups: undefined
        index: 5
        input: "hello123word456你好789"
        length: 1
*/

数组第 0 项就是匹配到的字符串内容
index 属性表示从字符串的索引几开始是匹配到的字符串

五、字符串的方法

字符串中有一些方法是可以和正则一起使用

search: 查找字符串中是否有满足条件的内容

语法: 字符串.search(正则)
返回值: 有的话返回开始索引, 没有返回 -1

var reg = /\d{3}/
var str1 = 'hello123'
var str2 = 'hello'
console.log(str1.search(reg))   // 5
console.log(str2.search(reg))   // -1

match: 找到字符串中符合正则条件的内容返回

语法: 字符串.match(正则)
返回值:
- 没有标识符 g 的时候, 是和 exec 方法一样
- 有标识符 g 的时候, 是返回一个数组, 里面是匹配到的每一项, 没有匹配到内容是返回的是 null

var reg = /\d{3}/
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.match(reg))
/*
['123', index: 5, input: 'hello123world456', groups: undefined]
    0: "123"
    groups: undefined
    index: 5
    input: "hello123world456"
    length: 1
*/
console.log(str2.match(reg))    // -1

var reg = /\d{3}/g
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.match(reg))    // ['123', '456']
console.log(str2.match(reg))    // null

replace: 是将字符串中满足正则条件的字符串替换掉

语法: 字符串.replace(正则, 要替换的字符串)
返回值: 替换后的字符串

var reg = /\d{3}/
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.replace(reg, '哈哈哈哈'))    // hello哈哈哈哈world456
console.log(str2.replace(reg, '哈哈哈哈'))    // hello world

var reg = /\d{3}/g
var str1 = 'hello123world456'
var str2 = 'hello world'
console.log(str1.replace(reg, '哈哈哈哈'))    // hello哈哈哈哈world哈哈哈哈
console.log(str2.replace(reg, '哈哈哈哈'))    // hello world

JS---正则

正则

一、创建一个正则表达式

字面量创建

构造函数创建

二、正则表达式里面的符号

1.元字符

2.边界符

3.限定符

4.特殊符号

5.重复元字符

6.标识符

三、正则的两大特性 (懒惰与贪婪)

四、正则表达式的方法

test 用来检测字符串是否符合我们正则的标准

exec 把字符串中符合条件的内容捕获出来

五、字符串的方法

search: 查找字符串中是否有满足条件的内容

match: 找到字符串中符合正则条件的内容返回

replace: 是将字符串中满足正则条件的字符串替换掉