资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/js 正则表达式

js 正则表达式

reclay / 1614人阅读

摘要：匹配字符对象属性属性描述对象是否具有标志对象是否具有标志一个整数，标识开始下一次匹配的字符位置对象是否具有标志正则表达式的源文本对象方法检索字符串中指定的值，返回或者。主机名允许数字和英文，长度不确定。

参考资料：http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

创建正则表达式对象

有两种创建正则表达式的方式

字面量

在脚本加载后编译

正则表达式是静态的时候性能会比较高

构造函数

正则表达式运行时编译

适合需要动态更改规则的情况

let reg1 = /ab+c/;                  // 字面量
let reg2 = new RegExp("ab+c");      // 构造函数
let reg3 = new RegExp("/ab+c/");
let reg4 = new RegExp(/ab+c/, i);   // 同等 /ab+c/i
使用构造函数创建正则时，第二个参数只能传 "g"、"i" 和 "m"，否则会出异常。
简单的使用

先看一个匹配qq号的例子，然后再根据这个例子往下看，这样学起来会相对轻松。

qq号的规则：

全是数字

不能以0开头 -> ^[1-9]{1} 简化-> ^[1-9]

最低5位，最高10位 -> [0-9]{4,9}$ 简化-> d{4,9}$ 

let reg = /^[1-9]{1}d{4,9}$/;

reg.test("1234567890");    // true
reg.test("12345678901");    // false
reg.test("0234567890");    // false
修饰符（ i g m ）
名称 描述 例子
i 对大小写不敏感 /abc/i
g 全局匹配（不会在第一次匹配成功后停止） /abc/g
m 多行匹配 /abc/m 
正则表达式默认匹配成功后就不会继续匹配。如果想匹配字符串中所有符合的子串，就要加g
字符范围（ [] ）

使用[]表示定义匹配字符的范围。

let reg = /[a-zA-z0-9]/;    //匹配小写和大写的a-z还有0-9

console.log(reg.test("A"));  // true
console.log(reg.test("@"));  // false
reg.test()方法是RegExp对象方法，匹配成功返回true，否则返回false。
量词
量词 描述 例子
n{x} 匹配包含 X 个 n 的序列的字符串。 /[0-9]{4}/
n{x,y} 匹配包含 X 至 Y 个 n 的序列的字符串。 /[0-9]{4,6}/
n{x,} 匹配包含至少 X 个 n 的序列的字符串。 /[0-9]{4,}/
n* 匹配任何包含零个或多个 n 的字符串。 /n*/
n+ 匹配任何包含至少一个 n 的字符串。 /n+/
n? 匹配任何包含零个或一个 n 的字符串。 /n?/
n$ 匹配任何结尾为 n 的字符串。 /n$/
^n 匹配任何开头为 n 的字符串。 /^n/
?=n 匹配任何其后紧接指定字符串 n 的字符串。 /lo(?= java)/
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。 /lo(?! java)/
{x} {x,y} {x,} 
reg.test()方法，匹配字符串，匹配成功返回true，否则返回false

n{x} 匹配包含 X 个 n 的序列的字符串。

let reg = /[0-9]{4}/; // 匹配4位连续的子串，范围是0-9的数值

reg.test("1234");   // true
reg.test("123");    // false
reg.test("12a45");  // false

{x,y}：匹配包含 X 至 Y 个 n 的序列的字符串。

let reg = /[0-9]{4,6}/; // 匹配4~6位连续的子串，范围是0-9的数值

reg.test("12345");   // true
reg.test("123");    // false
reg.test("123a56");  // false

{x,}：匹配包含至少 X 个 n 的序列的字符串。

let reg = /[0-9]{4,}/; // 匹配最少4位连续的子串，范围是0-9的数值

reg.test("12345");   // true
reg.test("123");    // false
reg.test("123a567");  // false
* + ? 
reg.exec()，这个方法和test()差不多，区别在于返回值。匹配成功会返回一个数组，匹配失败会返回null。  
返回值的数组中还有一个index的参数，这个参数是匹配到的子串所在字符串的起始索引。

*、+、?这仨解释起来有点绕，直接看代码会秒懂。

*：匹配任何包含零个或多个 n 的字符串。

let reg = /n*/;

reg.exec("n");      // ["n"]
reg.exec("nnn");    // ["nnn"]
reg.exec("aaa");    // [""]，字符串中没有n，但是*可以匹配没有n的情况（零个）

+：匹配任何包含至少一个 n 的字符串。

let reg = /n+/;

reg.exec("n");      // ["n"]
reg.exec("nnn");    // ["nnn"]
reg.exec("aaa");    // null

?：匹配任何包含零个或一个 n 的字符串。

let reg = /n?/;

reg.exec("n");      // ["n"]
reg.exec("nnn");    // ["n"]，无论有多少个连续的n，都只会匹配到一个。
reg.exec("aaa");    // [""]
^和$（开头和结尾）

^：匹配任何开头为 n 的字符串。

let reg = /^n/;

reg.test("nbcd");   // true
reg.test("efghn");  // fasle

$：匹配任何结尾为 n 的字符串。

let reg = /n$/;

reg.test("nbcd");   // fasle
reg.test("efghn");  // true
?= 和 ?!

?=n：匹配任何其后紧接指定字符串 n 的字符串。

// 匹配 lo，但是这个lo要在" java"之前
let reg = /lo(?= java)/;    // 注意空格

reg.exec("hello javascript");   // ["lo"], index: 3

?!n：匹配任何其后没有紧接指定字符串 n 的字符串。

// 匹配 lo，但是这个lo不能在" java"之前
let reg = /lo(?! java)/;    // 注意空格

reg.exec("hello javascript lo");   // ["lo"], index: 17
提取匹配字符串（ () ）

使用()提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。

可以通过$x的方式提取出来。（x表示一个数字）

let reg = /([w]+?)bc([d])/;
let str = "abc123";

reg.exec(str);  // ["abc1", "a", "1"]，第二个元素是$1，第三个元素是$2

str.replace(reg, "$1$2");   //a123， reg匹配到的是"abc1"，匹配到的字符串用$1和$2替换掉，所以结果是 a123
元字符
元字符 描述 例子
. 查找单个字符，除了换行和行结束符。 /h.t/ -> "hxt"
w 查找单词字符。 /w/
W 查找非单词字符。 /W/
d 查找数字。 /d/
D 查找非数字字符。 /D/
s 查找空白字符。 /s/
S 查找非空白字符。 /S/
 匹配单词边界。 //
B 匹配非单词边界。 /B/
查找 NUL 字符。 //
查找换行符。 / /
f 查找换页符。 /f/
查找回车符。 / /
查找制表符。 / /
v 查找垂直制表符。 /v/
xxx 查找以八进制数 xxx 规定的字符。 /127/ ->匹配"W"字符
xdd 查找以十六进制数 dd 规定的字符。 /x57/ -> 匹配"W"字符
uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 /u0057/ -> 匹配"W"字符
RegExp对象属性
属性 描述
global RegExp对象是否具有标志 g
ignoreCase RegExp对象是否具有标志 i
lastIndex 一个整数，标识开始下一次匹配的字符位置
multiline RegExp对象是否具有标志 m
source 正则表达式的源文本
RegExp对象方法 test()

检索字符串中指定的值，返回true或者false。这个方法比较常用。

let reg = /hello w{3,12}/; // 匹配"hello "（注意空格）后面的 3到12个字符
alert(reg.test("hello js"));    // false
alert(reg.test("hello javascript")) // true
exec()

检索字符串中指定的子串，匹配成功返回一个数组，匹配失败返回null

let reg = /hello/;

console.log(reg.exec("hellojs"));   // ["hello"]
console.log(reg.exec("javascript"));    // null

index: 子串起始位置

input: 被检索的字符串

compoile()

改变RegExp，可以改变检索模式，也可以添加或删除第二个参数

let reg = /hello/;

console.log(reg.exec("hellojs"));   // ["hello"]

reg.compile("Hello");   // 改变为 /Hello/
console.log(reg.exec("hellojs"));   // null

reg.compile("Hello", "i");  // 改变为 /Hello/i
console.log(reg.exec("hello")); // ["hello"]
String对象的正则方法

除了RegExp对象提供方法之外，String对象也提供了四个方法来使用正则表达式。

match()

匹配指定的值，匹配成功返回结果数组，否则返回null。

如果没有设置全局匹配g，则会匹配一次成功立刻返回。

console.log("js js js js".match( /js/i ));      //["js"]

console.log("js js js js".match( /js/gi ));     //["js", "js", "js", "js"]
search()

匹配指定的值，匹配成功返回第一个匹配成功的子串索引，否则返回-1

console.log( "hello,hello".search( /lo/i ) );   // 3
replace()

替换匹配成功的子串，并返回替换后的字符串。

不设置全局匹配g的时候只会替换第一个匹配成功的子串

console.log("hello js, hello html".replace( /hello/i, "hi" ) ); // hi js, hello html

console.log("hello js, hello html".replace( /hello/ig, "hi" ) ); // hi js, hi html
split()

把字符串分割成数组

console.log( "one1-two2-tree3-four".split( /[1-3]-/ ) );    // ["one", "two", "tree", "four"]
匹配国内电话号码

电话号码的规则：

一般都是 区号 + 电话号码

0555-6581752、020-86128488

区号以0开头。 ^0

区号3位或者4位（算上开头的0）。 d{2}

区号的电话号码之间有-符号。 -

电话号码不能以0开头。 [1-9]

3位的区号对应8位的电话号码，4位的区号对应7位的电话号码。d{7}$ 

// let reg1 = /^0d{2}-[1-9]d{7}$/;   // 匹配3位区号的电话号码
// let reg2 = /^0d{3}-[1-9]d{6}$/;   // 匹配4位区号的电话号码

// 合在一起
let numReg = /(^0d{2}-[1-9]d{7}$)|(^0d{3}-[1-9]d{6}$)/;

numReg.test("0555-6581752");    // true
numReg.test("020-86128488");    // true
匹配邮箱

登录名@主机名.域名

邮箱规则：

登录名允许 数字、英文和下划线，长度不确定。[wd_]{1,}

有一个@符号。 @

主机名允许 数字和英文，长度不确定。 [wd]{1,}

有一个.符号。.

域名只允许英文。 w{1,}$ 

let reg = /^[wd_]{1,}@[wd]{1,}.w{1,}$/;

reg.test("example@163.com");
云服务器 GPU云服务器 座机正则表达式 js js域名正则表达式 js类型正则表达式 js网址正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87276.html

相关文章

  • 正则与JS中的正则

    摘要：注意本文将正则与中的正则分开讨论。正则零宽断言更多参考各种语言对于正则不同支持参考单行模式与多行模式通过设置正则表达式后的修饰符可开启对应的匹配模式单行模式和多行模式。 最近这段时间帮同学处理一些文档， 涉及到一些结构化文档的工作大部分都得使用正则表达式， 之前对于正则的认识大多来源于语言书上那几页的介绍， 自己也没有用过几次。这里将我之前感到模糊的概念作个整理。因为对JS了解多点，所...

    firim 评论0 收藏0

  • 正则表达式

    摘要：本文内容共正则表达式火拼系列正则表达式回溯法原理学习正则表达式，是需要懂点儿匹配原理的。正则表达式迷你书问世了让帮你生成和解析参数字符串最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。 JS 的正则表达式 正则表达式 一种几乎可以在所有的程序设计语言里和所有的计算机平台上使用的文字处理工具。它可以用来查找特定的信息（搜索），也可以用来查...

    bang590 评论0 收藏0

  • JS正则表达式一条龙讲解，从原理和语法到JS正则、ES6正则扩展，最后再到正则实践思路

    摘要：控制权和传动这两个词可能在搜一些博文或者资料的时候会遇到，这里做一个解释先控制权是指哪一个正则子表达式可能为一个普通字符元字符或元字符序列组成在匹配字符串，那么控制权就在哪。 温馨提示：文章很长很长，保持耐心，必要时可以跳着看，当然用来查也是不错的。 正则啊，就像一座灯塔，当你在字符串的海洋不知所措的时候，总能给你一点思路；正则啊，就像一台验钞机，在你不知道用户提交的钞票真假的时候，...

    Michael_Lin 评论0 收藏0

  • 正则表达式

    摘要：最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧 本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

    yibinnn 评论0 收藏0

  • 『不再迷茫 - 正则表达式』JS正则要点梳理 持续更新

    摘要：写在前面正在看的源码看到了部分感觉以前看的正则表达式基础知识已经完全不够用了现翻阅博客资料将一些中正则表达式难用的部分总结归纳方便自己和友翻阅正则分组重复匹配对于重复的匹配我们经常使用到正则表达式的分组功能我们使用正则匹配地址来实践一下假 [TOC] 写在前面 - Lionad 正在看VueJS的源码, 看到了HtmlParser部分, 感觉以前看的正则表达式基础知识已经完全不够用了,...

    SQC 评论0 收藏0

  • JS中的正则表达式

    摘要：构造函数可以有两个字符串参数，第一个参数包含正则表达式的主体部分。只读的布尔值，说明这个正则表达式是否带有修饰符。中正则的扩展构造函数在中，只能接受字符串作为参数，允许其直接接受正则表达式作为参数。 上文传送门：初探正则表达式 正则表达式是一个描述字符模式的对象，JavaScript 的 RegExp 类表示正则表达式，String 和 RegExp 都定义了方法，后者使用正则表达式进...

    Soarkey 评论0 收藏0

发表评论

登陆后可评论

0条评论

reclay

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<