JavaScript-正则表达式

2019-03-25

在JS中使用正则。

正则表达式用来干啥？

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

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

//JS风格
let re=new RegExp('\\d+', 'g');

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

search

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 也是字符串的方法，替换掉匹配正则表达式的东西。

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有个毛病，就是有一部分正则符合就让过，这种情况下就要使用[修饰符^ $](#修饰符 ^ $)

// 校验 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 2	/a[abc]q/ 匹配的是：aaq,abq,acq 但是不能匹配 abbq

范围

/[a-z]/i
/[0-9]/
/[a-z0-9]/
注意：如果要匹配 3-55 不能这样写 [3-59]

排除

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

转义 `\`

\d    [0-9]
\w    [a-z0-9_]
\s    空白
.     任意字符

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

量词 `{n}`

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

{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号

^ 行首			⚠️注意： ^ 放在 [] 里面是排除，没在里面就是行首
$ 行尾

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

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

或 `|`

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

/\.jpg|gif|png$/
如果这么写的话，匹配的是：有 .jpg 或 gif 或 png结尾的字符串
实际上机器认为是这样的 /(\.jpg)|(gif)|(png$)/
              
所以有：/\.(jpg|gif|png)$/i

search

match

replace

test

元字符 []

转义 \

量词 {n}

修饰符 ^

或 |

元字符 `[]`

转义 `\`

量词 `{n}`

修饰符 `^`

或 `|`