把知识记在小本本上

将零散的知识点放在一个集中的地方,不断递归重构,形成一套为己所用的知识系统。

博客首页 | 小本本首页

正则表达式用来干啥?

用来匹配字符串,校验数据来保证安全性,采集一些数据。

在 JS 中用正则的两种风格:

1
2
3
4
5
//JS风格
let re=new RegExp('\\d+', 'g');

//perl风格
let re=/\d+/g;

search 是字符串的方法,用来在字符串中找符合正则表达式的字符,返回一个下标。

1
2
3
let str='Aweaqesdfaerq';
let re=/a/i; // i 忽略大小写
alert(str.search(re));

match

match 也是字符串的方法,用来提取出来字符串中匹配正则表达式的字符,返回的是一个数组,里面是符合要求的字符串。

1
2
3
let str='f34rrfsdf 45tsdgsrdg 5terg56456fdghdr675 dsf3434535645645645674567';
let re=/\d+/g; // g 全局匹配。 \d 是转义字符,表示所有的数字, + 是尽可能多的数字。
alert(str.match(re));

replace

replace 也是字符串的方法,替换掉匹配正则表达式的东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let str='asdfde we fsadfas weAr efAf';
alert(str.replace(/a/gi, '*')); // 用 * 替换掉 str 中所有的 a 忽略大小写

// 去掉所有的空格
let str=' dffsdfsd dfasdfsadf asdf asdf asdf ';
alert(str.replace(/\s+/g, ''));

// 下面的代码,将 ## 分割的东西用 p 标签包裹起来
window.onload=function (){
let oDiv=document.getElementById('div1');
let str='sdfsf##dfasderferfef##dfdfsgdsgf##dgdfbfdghg';

oDiv.innerHTML=str.split(/##/g).map(item=>{
return `<p>${item}</p>`;
}).join('');
};

test

test 是正则的方法,举个🌰:注意test有个毛病,就是有一部分正则符合就让过,这种情况下就要使用修饰符^ $

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 校验 QQ 号,1开头 5-12 个数字
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oTxt=document.getElementById('txt1');
let oBtn=document.getElementById('btn1');

oBtn.onclick=function (){
let re=/^[1-9]\d{4,11}$/;

if(re.test(oTxt.value)){
alert('通过');
}else{
alert('不对');
}
};
};
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="button" value="校验" id="btn1">
</body>
</html>

元字符 []

  1. 任何一个

    1
    2
    /a[abc]q/   匹配的是:aaq,abq,acq
    但是不能匹配 abbq
  2. 范围

    1
    2
    3
    4
    /[a-z]/i
    /[0-9]/
    /[a-z0-9]/
    注意:如果要匹配 3-55 不能这样写 [3-59]
  3. 排除

    1
    [^a-z0-9]		匹配除了 a-z 0-9 以外的东西

转义 \

1
2
3
4
5
6
7
8
\d    [0-9]
\w [a-z0-9_]
\s 空白
. 任意字符

\D [^0-9]
\W [^a-z0-9_]
\S 非空白

量词 {n}

在正则中不加量词,就是一个。

1
2
3
4
5
6
7
8
9
10
{n}       /a{6}/  匹配6个a    /\d{11}/ 匹配11个数字
{n,m} /\d{5,12}/ 匹配5-12个数字
{n,} /\w{6,}/ 匹配6个[a-z0-9_]中的字符
+ {1,} 最少一个,多了不限
? {0,1} 要么有,要么没有

/\.jsx?/ 可以匹配 .js .jsx

a 任何字符5-18个 z
/a.{5,18}z/

修饰符 ^

是用来说明条件的。栗子:校验QQ号

1
2
3
4
5
6
7
^ 行首			⚠️注意: ^ 放在 [] 里面是排除,没在里面就是行首
$ 行尾

/\.js/ 匹配:1.js.png 1.html.js.png
/\.js$/i 匹配:1.js 1231.txt.js

/^https?:\/\// 匹配:http 或者 https

|

⚠️ 注意,或运算符的优先级特别低,要使用()来提升优先级。

1
2
3
4
5
/\.jpg|gif|png$/
如果这么写的话,匹配的是:有 .jpg 或 gif 或 png结尾的字符串
实际上机器认为是这样的 /(\.jpg)|(gif)|(png$)/

所以有:/\.(jpg|gif|png)$/i