JS正则

crainyday

前端 / JS

发布于：2019年4月4日

字数：2.2k字

时长：8分钟

JS中的正则

一.正则表达式简介

百度百科:正则表达式, 又称规则表达式. (英语: Regular Expression, 在代码中常简写为regex、regexp或RE), 计算机科学的一个概念. 正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本.

正则表达式用于定义一些字符串的规则, 计算机根据正则表达式, 来检查是否符合规则, 获取、提取字符串中符合规则的内容.

1.创建RegExp对象

正则表达式对象即RegExp对象, JS内置的对象.

RegExp对象的test()方法, 检索字符串中指定的值, 返回 true 或 false

//语法:
//var 变量名 = new RegExp("正则表达式","匹配模式");
//匹配模式:i 忽略大小写;g 全局匹配;m 多行匹配;
var reg = new RegExp("a","i");
var str = "ABCD";
var result = reg.test(str);//检查字符串中是否含A
console.log(result);//true

2.字面量创建RegExp对象

字面量的方式创建更加简单, 使用构造函数创建更加灵活(可以传参数).

语法: var 变量名 = /正则表达式/匹配模式;

注意: 语法中没有引号

表达式	描述
[abc]	查找方括号之间的任何字符
[^abc]	查找任何不在方括号之间的字符
[0-9]	查找任何从 0 至 9 的数字
[a-z]	查找任何从小写 a 到小写 z 的字符
[A-Z]	查找任何从大写 A 到大写 Z 的字符
[A-z]	查找任何从大写 A 到小写 z 的字符
[adgk]	查找给定集合内的任何字符
[^adgk]	查找给定集合外的任何字符
(red blue green)	查找任何指定的选项

var reg = /a/i;//等价于:var reg = new RegExp("a","i");
//1.创建一个正则表达式检查一个字符串中是否含有a或b
reg = /a|b/;

//2.创建一个正则表达式检查一个字符串中是否含有字母
reg = /[A-z]/;//中括号表示或的意思

//3.检查一个字符串中是否含有abc或adc或aec
reg = /a[bde]c/;//以a开头,c结尾,中间为b或d或e

reg = /[^0-9]/;//检查除了数字之外的内容
reg = /(abc)/;//abc连续出现
reg = /(a|b|c)/;//出现过a或b或c

二.字符串与正则相关的方法

1.split

根据参数将字符串拆分为字符数组
参数可以是正则表达式
正则不需要设置全局匹配, split默认将所有符合条件的拆分

1
2
3

var str = "1a2b3c4d5e6f7g8";
var arr = str.split(/[A-z]/);//根据任意字母拆分
console.log(arr);//1,2,3,4,5,6,7,8

2.search

检索与正则表达式相匹配的值
如果可以搜索到指定内容, 则返回第一次出现过的位置, 没搜索到返回-1
它能接受一个正则表达式作为参数, 然后根据正则表达式检索字符串
search正则查找时不能设置全局匹配

//功能和indexOf()类似
var str = "hello abc hello adc hello aec";
//搜索字符串中是否含有abc或adc或aec
var result = str.search(/a[bde]c/);
console.log(result);//6

3.match

可以根据正则表达式, 从一个字符串中将符合条件的内容提取出来
默认情况下, match只会找第一个符合条件的内容, 找到后停止检索, 我们可以将正则表达式设置为全局匹配模式, 这样match会找到所有符合条件的内容
可以为正则表达式设置多个匹配模式, 且顺序无所谓
match会将匹配到的内容封装到一个数组中返回, 即使只查询到一个结果.
可以将一个没有规则的长串中, 有规则的内容提取出来, 很实用

var str = "1A2B3C4d5e6f7g8";
var result = str.match(/[a-z]/gi);
console.log(Array.isArray(result));//true;
console.log(result);//A,B,C,d,e,f,g
console.log(result[0]);//A

//筛选出所有的QQ号
var str = "826720408abhfe826720407"+
    "freaf826720405C826720"+
    "404d826720405e8267204"+
    "00f826720409g826720401";
var result = str.match(/[0-9]{8,10}/g);
console.log(Array.isArray(result));//true;
console.log(result);

4.replace

将字符串中指定的内容替换为新的内容, 不影响原字符串
参数:①被替换的内容, 可以接受一个正则表达式作为参数
②新的内容
默认只会替换一个,可以为正则表达式设置全局匹配模式替换所有内容

var str = "1A2B3C4d5e6f7g8";
//将所有字母替换为""
var result = str.replace(/[a-z]/gi,"");
console.log(result);//12345678

三.正则表达式语法补充

1.量词

量词: 可以设置一个内容出现的次数, 它只对它前面的一个内容起作用

量词	描述
n+	匹配任何包含至少一个 n 的字符串, 相当于n{1, }
n*	匹配任何包含零个或多个 n 的字符串, 相当于n{0, }
n?	匹配任何包含零个或一个 n 的字符串, 相当于n{0,1}
n{x}	匹配包含 x 个 n 的序列的字符串
n{x,y}	匹配包含 x ~ y 个 n 的序列的字符串
n{x, }	匹配包含至少 x 个 n 的序列的字符串
n$	匹配任何结尾为 n 的字符串
^n	匹配任何开头为 n 的字符串
?=n	匹配任何其后紧接指定字符串 n 的字符串
?!n	匹配任何其后没有紧接指定字符串 n 的字符串

var reg = /a{3}/;
console.log(reg.test("xaaax"));//只有字符串中连续出现3个a时为true
reg = /(ab){3}/;
console.log(reg.test("xabababx"));//只有字符串中连续出现3个ab时为true
reg = /ab{3,5}c/;
console.log(reg.test("xabbbbcx"));//只有字符串中a和c之间有3~5个b时为true
reg = /ab{3,}c/;
console.log(reg.test("xabbbcx"));//只有字符串中a和c之间有2个以上b时为true

reg = /^a$/;
console.log(reg.test("a"));//只有字符串为"a"时,结果为true
reg = /^a|a$/;
console.log(reg.test("abc"));//字符串以a开头或以a结尾时为true

注意: 在正则表达式中同时使用了 ^ 和 $ 量词, 则要求字符串必须完全符合正则表达式.

练习: 手机号的正则表达式

匹配手机号的正则表达式: /^1[3-9][0-9]{9}$/

/*手机号的规则:
 *1. 以1开头
 *2. 第二位为3-9任意数字
 *3. 第三位之后为任意数字9个
 * ^ 和 $ 量词是必须的
 * ^1 [3-9] [0-9]{9}$
 */
var phoneNumReg = /^1[3-9][0-9]{9}$/;
console.log(phoneNumReg.test("15555555555"));//true

2.元字符

元字符	描述
.	查找单个字符, 除了换行和行结束符
\w	查找单词字符(字母、数字、下划线)
\W	查找非单词字符
\d	查找数字
\D	查找非数字字符
\s	查找空白字符
\S	查找非空白字符
\b	匹配单词边界
\B	匹配非单词边界
\0	查找 NULL 字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\xxx	查找以八进制数 xxx 规定的字符
\xdd	查找以十六进制数 dd 规定的字符
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符

//查找字符串中是否有.
//正则字面量:
//由于.是元字符,我们要用\.来代替.
//而\表示转义,要用\\来代替\
var reg = /\./;
console.log(reg.test("adsC.dSf l"));//true

//正则构造函数:
//由于函数的参数为字符串,而在字符串中\代表转义字符
//故在字面量中的一个\要用\\来代替
var reg1 = new RegExp("\\.");//等价于reg
console.log(reg1);//输出:/\./

//查找字符串是否含单词child
reg = /\bchild\b/;
console.log(reg.test("hello children"));//false
console.log(reg.test("hello child ren"));//true

练习: A.去除字符串的前后空格

匹配开头和结尾空格的正则表达式: /^\s*|\s*$/g

//可以考虑replace用空串替换空格
var str = "     Aaron Bob      ";
//str = str.replace(/\s/g,"");//去除所有空格
//str = str.replace(/^\s*/,"");//去除开头的空格
//str = str.replace(/\s*$/,"");//去除结尾的空格

//综合一下:
str = str.replace(/^\s*|\s*$/g,"");
//因为是或的关系,若不加全局匹配,方法匹配完开头的空格就返回了
console.log(str);

练习: B.email的正则表达式

/*电子邮件格式:
 * hello           .hello           @ abc        .com           .cn
 * 
 * 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
 * 
 * \w{3,}          (\.\w+)*         @ [A-z0-9]+  (\.[A-z]{2,5}){1,2}
 */
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "crainyday@qq.com";
console.log(emailReg.test(email));//true