优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript全解析——正则表达式_js 正则

nanyue 2025-02-19 13:18:06 技术文章 4 ℃

正则——RegExp

●正则也叫正则表达式，又名 “规则表达式”
●正则是JS中的数据类型, 是一个复杂数据类型
●由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的
●我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格

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/

●这个正则表达式就可以去检测字符串了
●这个正则表达式的意义是字符串中的必须要包含'abcdefg'这个片段

构造函数创建

// 下面就是构造函数创建一个正则表达式
var reg = new RegExp('abcdefg')
console.log(reg) //  /abcdefg/

●使用构造函数方式创建的和字面量创建的，得到的结果一样

两种创建方式的区别
●语法不一样
●书写标识符的时候
○字面量方式直接书写在正则的后面
○内置构造函数, 以第二个参数的方式传递
●拼接字符串
○字面量方式不接受拼接字符串
○内置构造函数方式, 可以拼接字符串
●基本元字符书写
○字面量方式的时候, 直接书写 \s\d\w
○内置构造函数书写的时候, 需要书写 \s\d\w





    
    
    
    Document

正则表达式的方法

●正则提供了一些方法给我们使用
●用来检测和捕获字符串中的内容的
test()方法——匹配
●作用：test方法是用来检测字符串是否符合我们正则的标准
●语法： 正则.test(字符串)
●返回值： boolean
○如果该字符串符合正则的规则, 那么就是 true
○如果该字符串不符合正则的规则, 那么就是 false

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

exec()方法——捕获

●作用：exec方法是把字符串中满足条件的内容捕获出来
●语法： 正则.exec(字符串)
●返回值： 把字符串中符合正则要求的第一项以及一些其他信息，以数组的形式返回
○原始字符串中没有符合正则要求的字符串片段
■null
○原始字符串中有符合正则要求的片段
■正则没有 () 也没有 全局标识符g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 不管捕获多少次, 每次都是从原始字符串的索引 0 开始检索
■正则有全局标识符 g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 第二次捕获是从第一次的结束位置开始向后查询, 直到最后捕获不到为止, 再下一次的时候, 又从字符串的 索引0 开始检索
■有 ()
●返回的是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●从索引 1 开始, 依次是每一个小括号的单独内容
●注意: 按照小括号的开始标志, 来数是第几个小括号





    
    
    
    Document

●扩展: () 有两个意义
○一个整体
○单独捕获
○如果你想只使用一个意义, 整体的所用, 不想在捕获的时候单独捕获出来
○你可以写成 (?:)表示匹配但不捕获

// 单独捕获
var reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|x)/
var res = reg.exec('13072220041010301x')
console.log(res);

正则表达式里面的符号

●知道了怎么创建一个正则表达式以后，我们就来详细的说一下正则表达式里面涉及到的一些符号了
元字符
基本元字符
●. ： 匹配非换行的任意字符 表示字符串中至少要有一个非换行的内容
●\ ： 转译符号，把有意义的 符号 转换成没有意义的 字符，把没有意义的 字符 转换成有意义的 符号
●\s ： 匹配空白字符（空格/缩进/制表符/...）表示字符串中至少包含一位 空白 内容
●\S ： 匹配非空白字符
●\d ： 匹配数字 表示字符串中至少包含一位 数字(0-9)
●\D ： 匹配非数字 表示字符串中至少包含一位 非数字 内容
●\w ： 匹配数字字母下划线 表示 一位 数字(0-9)字母(a-zA-Z)下划线(_) 中的任意一个
●\W ： 匹配非数字字母下划线 表示 一位 非数字字母下划线 中的任意一个
●有了元字符我们就可以简单的制定一些规则了

// 基本元字符
// \d
// 表示验证的字符串内必须包含一位数字
var reg = /\d/
console.log(reg.test('sfdgdfgfdhfgh'));
console.log(reg.test('sfdgdfgfg4dhfgh7'));
console.log(reg.test('123sfdgdfgfg4dhfgh7'));
// \D
// 表示验证的字符串中必须包含一位非数字
var reg = /\D/
console.log(reg.test('45613165465'));
console.log(reg.test('45613 165465'));
console.log(reg.test('45613d165465'));
console.log(reg.test('45613%165465'));
// \s
// 表示验证的字符串中必须要包含一位空白内容
var reg = /\s/
console.log(reg.test('sgsdfhfgh'));
console.log(reg.test('sgsdf hfgh'));
console.log(reg.test('sgsdf     hfgh'));
console.log(reg.test(`sdgs
dfg`));
// \S
// 表示验证的字符串中必须要包含一位非空白内容
var reg = /\S/
console.log(reg.test('             '));
console.log(reg.test('      d       '));
console.log(reg.test('      #       '));
console.log(reg.test('      .       '));
// \w
// 表示验证的字符船串中必须要包含一位数字字母和下划线
var reg = /\w/
console.log(reg.test('@#%#$%&^*&(*'));
console.log(reg.test('@#%#$%&^2*&(*'));
console.log(reg.test('@#%#$%&^b*&(*'));
console.log(reg.test('@#%#$%&^_*&(*'));
// \W
// 表示验证的字符串中必须要包含一位非数字字母和下划线
var reg = /\W/
console.log(reg.test('asgd353454__'));
console.log(reg.test('asgd353 454__'));
console.log(reg.test('asgd353$454__'));
// .
// 表示验证的字符串中必须要包含一位非换行以外的内容
var reg = /./
console.log(reg.test('\n'));
console.log(reg.test('\ns'));
console.log(reg.test('\n '));
console.log(reg.test('\n@'));
// \
// 表示把有意义的点转成了没有意义的点
var reg = /\d\.\d/
console.log(reg.test('1.5'));
console.log(reg.test('1#5'));

限定符
注意: 一个限定符只能修饰符号前面的一个内容的出现次数
●* ： 前一个内容重复至少 0 次，也就是可以出现 0 ～ 正无穷 次
●+ ： 前一个内容重复至少 1 次，也就是可以出现 1 ～ 正无穷 次
●? ： 前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次
●{n} ： 前一个内容重复 n 次，也就是必须出现 n 次
●{n,} ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次
●{n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次
●限定符是配合元字符使用的

// 下面正则表示验证数字出现 0 ～ 正无穷次都可以
var reg = /\d*/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 1 ～ 正无穷次都可以
var reg = /\d+/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 0 ~ 1 次都可以
var reg = /\d?/
var str = 'abc'
var str2 = 'abc1'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true

// 下面正则表示验证数字必须出现 3 次
var reg = /\d{3}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true

// 下面正则表示验证数字出现 3 ～ 正无穷次
var reg = /\d{3,}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abcd1234567'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

// 下面正则表示验证数字只能出现 3 ～ 5 次
var reg = /\d{3,5}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

边界符
●^ ： 表示开头
●$ ： 表示结尾
●边界符是限定字符串的开始和结束的


// 下面表示从开头到结尾只能有数字，并且出现 3 ～ 5 次
var reg = /^\d{3,5}$/
var str = 'abc'
var str2 = 'abc123'
var str3 = '1'
var str4 = '1234567'
var str5 = '123'
var str6 = '12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // false
console.log(reg.test(str4)) // false
console.log(reg.test(str5)) // true
console.log(reg.test(str6)) // true

特殊符号
●() ： 限定一组元素
●[] ： 字符集合，表示写在 [] 里面的任意一个都行
●[^] ： 反字符集合，表示写在 [^] 里面之外的任意一个都行
●- ： 范围，比如 a-z 表示从字母 a 到字母 z 都可以
●| ： 或，正则里面的或 a|b 表示字母 a 或者 b 都可以
●现在我们就可以把若干符号组合在一起使用了

// ()
    var reg = /^(abc){2}$/
    console.log(reg.test('abcabc'));
    console.log(reg.test('aabbcc'));
    console.log(reg.test('abcc'));

    // |
    var reg = /^abc|def$/
    console.log(reg.test('abcabc'));
    console.log(reg.test('abc'));
    console.log(reg.test('def'));
    console.log(reg.test('abcdef'));
    console.log(reg.test('defdef'));
    console.log(reg.test('sddhdggfhdgsf'));

    var reg = /^(abc|def)$/
    console.log(reg.test('abcabc'));
    console.log(reg.test('abcdef'));
    console.log(reg.test('defdef'));
    console.log(reg.test('abcsddhdggfhdgsf'));
    console.log(reg.test('sddhdggfhdgsdef'));
    console.log(reg.test('abc'));
    console.log(reg.test('def'));

    // []
    var reg = /^[abcd]$/
    console.log(reg.test('a'));
    console.log(reg.test('b'));
    console.log(reg.test('c'));
    console.log(reg.test('d'));
    console.log(reg.test('e'));

    // [^]

    var reg = /^[^abcd]$/
    console.log(reg.test('a'));
    console.log(reg.test('b'));
    console.log(reg.test('c'));
    console.log(reg.test('d'));
    console.log(reg.test('e'));

    // -
    var reg = /^[0-9]$/
    console.log(reg.test('01'));
    console.log(reg.test('1'));
    console.log(reg.test('2'));
    console.log(reg.test('3'));
    console.log(reg.test('4'));
    console.log(reg.test('5'));
    console.log(reg.test('6'));
    console.log(reg.test('7'));
    console.log(reg.test('8'));
    console.log(reg.test('9'));

标识符(修饰符)
●书写在正则表达式的外面, 专门用来修饰整个正则表达式的符号
●i ：ignore的简写 表示忽略大小写
○这个 i 是写在正则的最后面的
○/\w/i
○就是在正则匹配的时候不去区分大小写
●g ： global的简写 表示全局匹配
○这个 g 是写在正则的最后面的
○/\w/g
○就是全局匹配字母数字下划线


var reg = /^[a-z]$/i
console.log(reg.test('s'));
console.log(reg.test('g'));
console.log(reg.test('y'));
console.log(reg.test('u'));
console.log(reg.test('A'));

// 有全局修饰符 g
var str = 'sda123fdhm456fnbvb789gdghj345khmgn666bxcvxb'
var reg = /\d{3}/g
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

字符串和正则合用的方法

●字符串中有一些方法也是可以和正则一起使用的
search
●作用：search 是查找字符串中是否有满足正则条件的内容
●语法：
○字符串.search(正则)
○字符串.search(字符串片段)
●返回值 ： 有的话返回开始索引，没有返回 -1

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

match

●作用：match 找到字符串中符合正则条件的内容返回
●语法：
○字符串.match(正则)
○字符串.match(字符串片段)
●返回值 ：
○没有标示符 g 的时候，是和 exec 方法一样
○有标示符 g 的时候，是返回一个数组，里面是匹配到的每一项

var reg = /\d{3}/
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", index: 5, input: "hello123wor456", groups: undefined]
console.log(str2.match(reg)) // null


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

replace

●作用：replace 是将字符串中满足正则条件的字符串替换掉
●语法：
○字符串.replace('换下字符', '换上字符')
○字符串.replace(正则表达式, '换上字符')
●返回值 ： 替换后的字符串
○当你的第一个参数传递字符串的时候, 只能替换一个
○当你的第一个参数传递正则表达式的时候, 只能替换一个
○但是如果你的正则表达式有全局标识符 g, 那么有多少替换多少

案例——密码强度校验






    
    
    
    Document
    




    

        
        

            弱
            中
            强

案例——表单验证






    
    
    
    Document

正则预查(扩展)
正向预查
●正向肯定预查:(?=)
●正向否定预查:(?!)
负向预查
●负向肯定预查:(?<=)
●负向否定预查:(?


var str = 'windows2012windows2000windowsXPwindowsVistawindows98windows'
// 1. 正向肯定预查
// 需求: 我需要的是 windows, 但是是后面带有数字的 widnows
// var reg = /windows(?=\d+)/g
// 2. 正向否定预查
// 需求: 我需要的是 windows, 但是后面不是数字的 windows
// var reg = /windows(?!\d+)/g
// 3. 负向肯定预查
// 需求: 我需要的是 windows, 但是前面是数字的 windows
var reg = /(?<=\d+)windows/g
// 4. 负向否定预查
// 需求: 我需要的是 windows, 但是前面不是数字的 windows
var reg = /(?



Tags：

猜你喜欢

最近发表
标签列表