js-正则表达式

正则表达式 - JavaScript | MDN (mozilla.org)

一、正则表达式概述

1. 什么是正则表达式#

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

正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)；

正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

其他语言也会使用正则表达式。

2. 正则表达式的特点#

灵活性、逻辑性和功能性非常的强。
可以迅速地用极简单的方式达到字符串的复杂控制。
实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如

用户名: /^[a-z0-9_-]{3,16}$/

二、Js 中创建正则对象

1. RegExp()构造函数创建#

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

方式一：通过调用RegExp对象的构造函数创建

var 变量名 = new RegExp(/表达式/);
//eg
var regexp = new RegExp(/123/);

2. 字面量创建#

方式二：利用字面量创建正则表达式

var 变量名 = /表达式/;
//eg
var rg = /123/;

// 符号中间放表达式就是正则字面量，不管字面量是数值型还是字符串型，都不需要加引号

三、正则表达式规则

1. 正则表达式的组成#

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

特殊字符非常多，可以参考：

MDN

jQuery 手册：正则表达式部分

在线正则表达式测试 (oschina.net)

2. 边界符#

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

如果 ^和 $ 在一起，表示必须是精确匹配。

 // 边界符 ^ $ 
 var rg = /abc/; 
 var reg = /^abc/;
 console.log(reg.test('abc')); // true
 console.log(reg.test('abcd')); // true
 console.log(reg.test('aabcd')); // false

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

3. 字符类#

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

1.) [ ]方括号#

var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false

var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//false

2.) [-] 方括号内部范围符 -#

var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false

方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。

3.) [^] 方括号内部取反符 ^#

var reg2 = /^[^a-zA-Z0-9_-]$/;
console.log(reg2.test('a')); //false
console.log(reg2.test('B')); //false
console.log(reg2.test(8)); //false
console.log(reg2.test('-')); //false
console.log(reg2.test('_')); //false
console.log(reg2.test('!')); //true

方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

注意和边界符 ^ 区别，边界符写到方括号外面。

4.) 字符组合#

var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
console.log(reg1.test('a'));
console.log(reg1.test('B'));
console.log(reg1.test(8));
console.log(reg1.test('-'));
console.log(reg1.test('_'));
console.log(reg1.test('!'));

方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

4. 量词符#

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

量词	说明
*	重复0次或更多次
+	重复1次或更多次
?	重复0次或1次
	重复n次
	重复n次或更多次
	重复n到m次

//*  
var rg1 = /^a*$/;
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aa')); //true
console.log(reg.test('aaaaaa')); //true

//+
var rg2 = /^a+$/;
console.log(reg.test('')); //false
console.log(reg.test('a')); //true
console.log(reg.test('aa')); //true
console.log(reg.test('aaaaaa')); //true

//?
var rg3 = /^a?$/;
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aa')); //false
console.log(reg.test('aaaaaa')); //false

//{3}
var rg4 = /^a{3}$/;
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aa')); //false
console.log(reg.test('aaaaaa')); //false
console.log(reg.test('aaa')); //true

//如下说明：{}默认下只匹配正则字面量的单个字符
 var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
 console.log(reg.test('abc')); //false
 console.log(reg.test('abcabcabc')); //false
 console.log(reg.test('abccc')); //true

//{3,}
var rg5 = /^a{3,}$/;
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aa')); //false
console.log(reg.test('aaaaaa')); //true
console.log(reg.test('aaa')); //true

//{3,6}
var rg6 = /^a{3,16}$/;
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aa')); //false
console.log(reg.test('aaaaaa')); //true
console.log(reg.test('aaa')); //true
console.log(reg.test('aaaaaaaaaaaaaaaaaaaaa')); //false

5. 正则字面量中的括号总结#

大括号：{}，量词符. 里面表示重复次数
中括号：[]，字符集合，匹配方括号中的任意字符.

小括号：表示优先级

var reg = /^(abc){3}$/; // 通过小括号让abc整体重复三次
console.log(reg.test('abc')); //false
console.log(reg.test('abcabcabc')); //true
console.log(reg.test('abccc')); //false

6. 预定义类#

预定义类指的是正则字面量某些常见模式的简写方式。

预定义类	说明
\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]`

//eg: 创建一个 符合座机号码相关规则的正则字面量 正则对象
//座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
 var reg = /^\d{3,4}-\d{7,8}$/;

7. | (或)#

正则字面量中若出现|，则表示或者的意思。

//eg:再创建一个号码匹配的 正则对象
 var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;//“ | ” ：被匹配的字符串按照 ^\d{3}-\d{8}$ 或 ^\d{4}-\d{7}$, 满足其中任意一个返回true

8. 正则表达式参数#

/正则字面量/[switch]

switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：

g：全局匹配
i：忽略大小写
gi：全局匹配 + 忽略大小写

var str = 'abcaAbc';
var newStr1 = str.replace(/a/,'6');
var newStr2 = str.replace(/a/gi,'6');
console.log(newStr1); //6bcaAbc
console.log(newStr2); //6bc66bc

example:

//eg：敏感词过滤 
//在文本框内输出字符串，点击触发事件，替换文本框内字符串，打印到div
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function() {
    div.innerHTML = text.value.replace(/激情|gay/g, '**');
}

四、正则对象常用 API

test()#

测试正则表达式 test()

test() 正则对象方法，用于检测字符串是否符合该规则，

regexObj.test(str)

regexObj 是创建的正则表达式对象
参数：str 我们要测试的文本
返回值：
- 只要str中包含正则字面量，那么久返回true，否者返回false

var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123  出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false
console.log(rg.test(11234));//true

正则表达式在线测试 | 菜鸟工具 (runoob.com)

exec()#

RegExp.prototype.exec()
exec() 作用: 检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回 包含该匹配值的数组，否则返回 null。

RegExpObject.exec(string)

示例代码如下：

var str = 'hello world'
var pattern = /o/
console.log(pattern.exec(str))
/*
[
	0: "o",
	groups: undefined,
	index: 4,
	input: "hello"
]
*/

❕注意：上述中课件 exec() 并不会匹配 str 字符串中的间断性非首次出现的匹配字符

分组#

正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 相关的分组信息
/* [
	0: "{{name}}", 
	1: "name", 
	groups: undefined,
	index: 7, 
	input: "<div>我是{{name}}</div>"
	]

*/

replace()#

replace() 方法可以实现在字符串中替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

stringObject.replace(regexp/substr,replacement);

参数说明：

regexp/substr：正则表达式 / 被替换的字符串
replacement：替换为的字符串

返回值：返回值是一个替换完毕的 新字符串

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
// 输出的内容是：<div>我是name</div>
console.log(str)

while循环多次replace()#

由于 exec()的局限性（无法一次匹配到字符中所有匹配的部分间隔字符），需要多次通过exec()匹配并配合多次replace() 来 实现字符中的正则匹配字符的替换

var str = '<div>{{name}}今年{{ age }}岁了</div>';
var pattern = /{{\s*([a-zA-Z]+)\s*}}/;

var patternResult = pattern.exec(str);
str = str.replace(patternResult[0], patternResult[1]);
console.log(str); //'<div>name今年{{ age }}岁了</div>'

patternResult = pattern.exec(str);
str = str.replace(patternResult[0], patternResult[1]);
console.log(str); //'<div>name今年age岁了</div>'

patternResult = pattern.exec(str);
console.log(patternResult); //null

通过while循环更便捷实现该功能

var patternResult = null;
while(patternResult = pattern.exec(str)){
	str = str.replace(patternResult[0], patternResult[1]);
}
console.log(str); // <div>name今年age岁了</div>

作者：Hong•Guo

出处：https://www.cnblogs.com/ghnb1/p/15848442.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @ 2022-01-26 23:11 Hong•Guo 阅读(57) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· js-对象

· js-变量

· js之正则表达式

· 【JS高级】正则表达式

· JavaScript进阶——面向对象ES6（四）

公告

😫本人概述：
22届🐮🐴大专，📍深圳，《低学历➕互联网寒冬》👉 毕业即失业最后沦落转行，编程也就图一乐，收收心找个电子厂打螺丝了
博客园的文章都是在校学习时写的，往后不再更新与回复了💀，虽然都是水文🤡 @ 2024-06-10

⚡转告:
博客园陪伴了我们多年, 最近博客园“遭遇困难❗”，博客园或许能到你的帮助❤️，点开这个官方链接
(https://www.cnblogs.com/cmt/p/17320765.html)
看看吧！ @ 2023-04-15

昵称： Hong•Guo
园龄： 4年5个月
粉丝： 6
关注： 3

+加关注

Loading

Ｈｏｎｇ

欢迎来到我的博客🤞🌹~

js-正则表达式

一、正则表达式概述

1. 什么是正则表达式#

2. 正则表达式的特点#

二、Js 中创建正则对象

1. RegExp()构造函数创建#

2. 字面量创建#

三、正则表达式规则

1. 正则表达式的组成#

2. 边界符#

3. 字符类#

1.) [ ]方括号#

2.) [-] 方括号内部范围符 -#

3.) [^] 方括号内部取反符 ^#

4.) 字符组合#

4. 量词符#

5. 正则字面量中的括号总结#

6. 预定义类#

7. | (或)#

8. 正则表达式参数#

四、正则对象常用 API

test()#

exec()#

分组#

replace()#

while循环多次replace()#

公告

搜索

常用链接

合集

随笔分类

随笔档案

Loading

Ｈｏｎｇ

欢迎来到我的博客🤞🌹~

js-正则表达式

一、正则表达式概述

1. 什么是正则表达式#

2. 正则表达式的特点#

二、Js 中创建正则对象

1. RegExp()构造函数创建#

2. 字面量创建#

三、正则表达式规则

1. 正则表达式的组成#

2. 边界符#

3. 字符类#

1.) [ ]方括号#

2.) [-] 方括号内部 范围符 -#

3.) [^] 方括号内部 取反符 ^#

4.) 字符组合#

4. 量词符#

5. 正则字面量中的括号总结#

6. 预定义类#

7. | (或)#

8. 正则表达式参数#

四、正则对象常用 API

test()#

exec()#

分组#

replace()#

while循环多次replace()#

公告

搜索

常用链接

合集

随笔分类

随笔档案

2.) [-] 方括号内部范围符 -#

3.) [^] 方括号内部取反符 ^#