JavaScript 正则

前端 · 2020-08-15 ·

1. 什么是正则表达式

正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。

正则表达式通常被用来检索、替换那些符合某个规则的文本,例如验证用户名表单只能输入英文字母、数字或者下划线,必须以字母开头)。此外(匹配),正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),例如新广告法涉及的敏感词:国家级、世界级、最高级、最佳、最大,或从字符串中获取我们想要的特定部分(查找)等。

2. 正则表达式的特点

  • 灵活性、逻辑性和功能性非常强
  • 可以迅速地用极简单的方式达到字符串控制
  • 看起来晦涩难懂。比如 Email地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

3. 创建正则表达式

在JavaScript中,可以通过2种方式创建一个正则表达式。

3.1、通过调用 RegExp 对象的构造函数创建

    //1.利用 RegExp 对象来创建 正则表达式
    var regexp = new RegExp(/123456/);
    console.dir(regexp);

3.2、利用字面量创建

    //2.利用字面量创建
    var regexp = /123456/;
    console.dir(regexp);

4. 测试正则表达式 test()

test() 正则对象方法,用于检测字符串是否符合规则,该对象会返回true或false,其参数是测试字符串

//利用字面量创建
var regexp = /123456/;
console.dir(regexp);
//regexp.test(str);
//test() 方法用来检测字符串是否符合正则表达式要求的规则
console.log(regexp.test(123456)); // true
console.log(regexp.test('abcde')); // false

5. 正则表达式中的特殊字符

正则表达式的组成

一个正则表达式可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,比如/ab*c/、/[abc]/。其中特殊字符也被称为元字符,在正则表达式中具有特殊意义的专用符号,如^、$、+、?、|、\等等。

更多关于正则可以参考 MDN正则表达式

5.1 正则表达式中的特殊字符-边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符。

边界符 说明
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结束)
//边界符 ^ $
//  /abc/ 只要包含abc这个字符串,返回true
var regexp = /abc/;
console.log(regexp.test('abc')); //true
console.log(regexp.test('abcd')); //true
console.log(regexp.test('aabcd')); //true

console.warn("#####################");

var regexp2 = /^abc/;
console.log(regexp2.test('abc')); //true
console.log(regexp2.test('abcd')); //true
console.log(regexp2.test('aabcd')); //false

console.warn("#####################");
var regexp3 = /^abc$/; // 精确匹配,要求必须是 abc字符串才符合规范
console.log(regexp3.test('abc')); //true
console.log(regexp3.test('abcd')); //false
console.log(regexp3.test('aabcd')); //false
console.log(regexp3.test('abcabc')); //false

5.2 正则表达式中的特殊字符-字符类

正则表达式中的字符类:[]

字符类:[]表示有一系列字符可供选择,只要匹配其中一个就返回true

字符类:- 表示一个范围,a-z(表示a 到 z的范围),0-9(表示0 到9的范围)

字符组合: /^[a-zA-Z]$/.test('a') 返回true、/^[a-zA-Z]$/.test('A') 返回true[^] 方括号内部取反 /^[^a-zA-Z]$/.test('a') 返回false、/^[^a-zA-Z]$/.test('ab') 返回true

//  /[abc]/ 只要包含a、b、c三个字符中的任何一个,返回true
var regexp = /[abc]/;
console.log(regexp.test('abc')); //true
console.log(regexp.test('ab')); //true
console.log(regexp.test('cd')); //true
console.log(regexp.test('efg')); //false

console.warn("#####################");

// /^[abc]$/ 只有只包含a、b、c中的任何一个才返回true
var regexp2 = /^[abc]$/;
console.log(regexp2.test('a')); //true
console.log(regexp2.test('b')); //true
console.log(regexp2.test('c')); //true
console.log(regexp2.test('ab')); //false
console.log(regexp2.test('abc')); //false

console.warn("#####################");

// /^[a-z]$/ 只有只包含a、b、c..x、y、z 这26个字母中的任何一个才返回true
var regexp3 = /^[a-z]$/;
console.log(regexp3.test('a')); //true
console.log(regexp3.test('b')); //true
console.log(regexp3.test('y')); //true
console.log(regexp3.test(1)); //false
console.log(regexp3.test('A')); //false
console.log(regexp3.test('ab')); //false
console.log(regexp3.test('abc')); //false

console.warn("#####################");

// 字符组合
var regexp4 = /^[a-zA-Z0-9_-]$/; // 26个英文大小写字母、10个阿拉伯数字、下划线、短横线,中的任何一个返回true
console.log(regexp4.test('a')); //true
console.log(regexp4.test('B')); //true
console.log(regexp4.test('-')); //true
console.log(regexp4.test('_')); //true
console.log(regexp4.test(1)); //true
console.log(regexp4.test('!')); //false
console.log(regexp4.test('abc')); //false

console.warn("#####################");

// 如果[]里面有 ^ 表示取反的意思,不能喝 边界符 ^ 混淆
var regexp5 = /^[^a-zA-Z0-9_-]$/; // 26个英文大小写字母、10个阿拉伯数字、下划线、短横线,中的任何一个返回true
console.log(regexp5.test('a')); //false
console.log(regexp5.test('B')); //false
console.log(regexp5.test('-')); //false
console.log(regexp5.test('_')); //false
console.log(regexp5.test(1)); //false
console.log(regexp5.test('!')); //true
console.log(regexp5.test('abc')); //false

6. 正则表达式中的量词符

量词符用来设定某个模式出现的次数

量词  说明
重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
// 量词符:用来设定模式出现的次数
// 简单理解:就是让下面的a这个字符重复多少次
var regexp0 = /^a$/; // 只有且有a 返回true
console.log(regexp0.test('a')); // true
console.log(regexp0.test('aa')); // false

console.warn("#####################");

// * 相当于 >=0 ,匹配出现 0 次或者很多次
var regexp1 = /^a*$/;
console.log(regexp1.test('')); // true
console.log(regexp1.test('a')); // true
console.log(regexp1.test('aa')); // true
console.log(regexp1.test('aaa')); // true
console.log(regexp1.test('ab')); // false

console.warn("#####################");

// + 相当于 >=1 ,匹配出现 1 次或者很多次
var regexp2 = /^a+$/;
console.log(regexp2.test('')); // false
console.log(regexp2.test('a')); // true
console.log(regexp2.test('aa')); // true
console.log(regexp2.test('aaa')); // true
console.log(regexp2.test('ab')); // false

console.warn("#####################");

// ? 相当于 0||1 ,匹配出现 0 次或者 1次
var regexp3 = /^a?$/;
console.log(regexp3.test('')); // true
console.log(regexp3.test('a')); // true
console.log(regexp3.test('aa')); // false
console.log(regexp3.test('aaa')); // false
console.log(regexp3.test('ab')); // false

console.warn("#####################");

// {3} 相当于 = 3 ,匹配出现 3次
var regexp4 = /^a{3}$/;
console.log(regexp4.test('')); // false
console.log(regexp4.test('a')); // false
console.log(regexp4.test('aa')); // false
console.log(regexp4.test('aaa')); // true
console.log(regexp4.test('ab')); // false

console.warn("#####################");

// {3,} 相当于 >= 3 ,匹配出现 3次或者更多次
var regexp5 = /^a{3,}$/;
console.log(regexp5.test('')); // false
console.log(regexp5.test('a')); // false
console.log(regexp5.test('aa')); // false
console.log(regexp5.test('aaa')); // true
console.log(regexp5.test('aaaaa')); // true

console.warn("#####################");

// {3,5} 相当于 >= 3 且 <=5,匹配出现 3次到5次
var regexp6 = /^a{3,5}$/;
console.log(regexp6.test('')); // false
console.log(regexp6.test('a')); // false
console.log(regexp6.test('aaa')); // true
console.log(regexp6.test('aaaa')); // true
console.log(regexp6.test('aaaaa')); // true
console.log(regexp6.test('aaaaaa')); // false

7. 某个模式匹配出现的次数

// 量词是设定某个模式出现的次数
var regexp0 = /^[a-zA-Z0-9_-]$/; //这个模式用户只能输入英文字母 数字 下划线 短横线,因为有边界符和[] 这就限定了只能选1个
console.log(regexp0.test(0)); // true
console.log(regexp0.test(12)); // false
console.log(regexp0.test('a')); // true
console.log(regexp0.test('aa')); // false

console.warn("#####################");

// [a-zA-Z0-9_-] 模式、{3,5} 次数 某个模式匹配出现的次数
// {3,5} 中间不能有空格
var regexp1 = /^[a-zA-Z0-9_-]{3,5}$/;
console.log(regexp1.test(0)); // false
console.log(regexp1.test(12)); // false
console.log(regexp1.test('a')); // false
console.log(regexp1.test('aa')); // false
console.log(regexp1.test('aa!')); // false
console.log(regexp1.test('aa-_z')); // true
console.log(regexp1.test('--_')); // true
console.log(regexp1.test('007')); // true

8. 正则表达式中的[]、{}、()

// []:字符集合,匹配中括号中的任一字符
var regexp1 = /^[abc]$/; // 相当于 a||b||c
console.log(regexp1.test('a')); // true
console.log(regexp1.test('b')); // true
console.log(regexp1.test('c')); // true

// {}:量词符,表示重复的次数
var regexp2 = /{^abc{3}$/;  // 相当于让 c 重复3次,匹配 abccc,其余全为false
console.log(regexp2.test('abccc')); // true
console.log(regexp2.test('abcabcabc')); // false

// ():优先级
var regexp3 = /{^(abc){3}$/;  // 相当于让 abc 重复3次,匹配 abcabcabc,其余全为false
console.log(regexp3.test('abccc')); // false
console.log(regexp3.test('abcabcabc')); // true

9. 正则表达式中的预定义类

预定义类指的是某些常见模式的简写方式。

预定义类 说明
\d 匹配0-9之间的任一数字,相当于[0,9]
\D 匹配所有0-9以外的字符,相当于[^0-9]
\w 匹配任意的字母、数字和下划线,相当于[a-zA-Z0-9_]
\W  匹配所有字母、数字和下划线以外的字符,相当于[^a-zA-Z0-9_]
\s 匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]
\S  匹配非空格的字符,相当于[^\t\r\n\v\f]
// 座机号码验证:全国座机号码 假设2种格式:010-12345678 或者 0511-1234567
// 正则里面的或者用符号 |
var regexp = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
上一篇:
%