前端正则表达式入门

无论是前端还是后端，我们开发中，经常会遇到字符串的查找、匹配、替换、检索等操作。以JavaScript为例，对一大段的字符串进行替换，也许需要进行进行一次循环次啊可以，很是麻烦。所以，我们大多数是由正则表达式进行这部分工作。

1、前言

本人资质愚钝，在加上生性懒惰。在很长一段时间中，难以入门正则表达式，看各种教材老是不得法门。工欲善其事必先利其器，我写了一个简单的正则表达式模拟器，上传到Github，其中也有一些或入门或常见的例子（正则表达式）。强烈建议大家在学习之前，下载工具，避免了不断测试的麻烦。点击可这里 ->正则表达式学习模拟器

2、基础入门

入门例子：

// 定义规则
let testRule = new RegExp("blog")

// 测试例子
let tesStr = "xxxblog"
console.log(testRule.test(testRule ))  // true

入门例子 2

// 定义规则
let testRule = /blog/ 

// 测试例子
let tesStr = "xxxblog"
console.log(testRule.test(testRule ))  // true

正则表达式的学习分为原子、量词、模式修饰符、开头结尾、转义等学习。

3、详细使用

原子

名字	作用
\w	任意一个字母，数字，下划线
\d	数字
\s	一个空白字符(可能是空格、制表符、其他空白)
[0-9]	数字 0~9
[a-z]	字母a-z
[a,b,c]	字母a,b,c

这里例举最常见的，而不是为了大而全。入门学会操作，才能谈其他的学习。

学习例子

let rule  = /\w/    	// 匹配 任意一个字母，数字，下划线 
let rule  = /\d/		// 匹配数字
let rule  = /\s/        // 匹配空白字符
let rule  = /[a,b,c]/   // 匹配到 a,b,c

量词

名字	作用
*	0 个或多个
+	一个或多个
?	0个或一个
|	或者
()	一当成一个整体
{2,5}	2~5个
{2,}	2个以上

学习例子

let rule  = /a{2,5}/    	// 匹配 2-5 个 a
let rule  = /a{2,}/    		// 匹配 2 个以上的 a
let rule  = /a*/    		// 匹配  0 个或多个 a
let rule  = /a+/    		// 匹配 1 个以上的 a

模式修饰符

名字	作用
/i	不区分大小
/m	匹配字符串当作多行看
/g	全局查找

let rule  = /aA/i   	// 匹配 2-5 个 a
let str = "aa"
rule.test(str)		   // true

let rule  = /a/m    		// 匹配字符串当作多行看
let str = "a
		   a
		   a"

let rule  = /a/g   		// 全局匹配
let str = aa
str.replace(rule,"m")       // mm

开发结尾

名字	作用
^	开头标识
$	结尾标识

let rule1 = /^\d$/		// 匹配 纯数字 字符串
let rule2 = /^\d/	    // 匹配 以数字开头 的字符串
let rule2 = /\d$/	    // 匹配 以数字结尾 的字符串
let rule2 = /\d/		// 匹配 数字 字符串 ，有数字即可

转义字符

[]  {}  ()  ^  $  / 等算特殊字符，如果规则是想匹配这类型的字符串
需要进行转义  \{ \} \[ 操作

内置API

test()

• 作用：是否匹配成功
• 返回：Boolean

exec()

• 作用：返回匹配成功字符串的详细内容
• 返回：数组

4、搭配语言API使用

我本人是搞前端，这里找了一些JS中涉及到正则表达式的字符串API，如下：
以下的API均支持正则表达式

search()

• 作用：字符串查找
• 是否全局使用： 否

match()

• 作用：字符串查找
• 是否全局使用： 是

split()

• 作用：字符串拆分成数组
• 是否全局使用： 默认全局

replace()

• 作用：字符串替换
• 是否全局使用： 是