正则表达式

举例：筛选全部数字：

1
2
3
4
5
6
7
let ad = "yi1024chang8421";

// let nums = [...hd].filter(a=>!Number.isNaN(parseInt(a)));
// console.log(nums.join(""));

console.log(ad.match(/\d/g).join(""));
// "10248421"

创建正则表达式的方法

字面量创建

字符串中查找 “a”

1
2
3
4
5
6
let ad = "yi1024chang8421";

console.log(/a/.test(ad));  // true

let m = "a";
console.log(eval(`/${m}/`).test(ad))  //true

对象创建

1
2
3
4
5
6
let ad = "yi1024chang8421";

let m = "a";

let reg = new RegExp(m,"g");
console.log(reg.test(ad));    //true

参数细节：

RegExp(pattern,[, flags])

  • pattern: 正则表达式的文本
  • [, flags]: 指定要匹配的范围。参数值可以是：
    1. g 全局匹配
    2. i 忽略大小写
    3. m 多行匹配
    4. s 点号匹配所有字符
    5. u unicode
    6. y sticky，粘性匹配

举例：支持正则表达式的样式替换小程序

html:

1
2
3
<div class="content">
  yichang8421.github.io
</div>

JavaScript:

1
2
3
4
5
6
7
8
9
10
let con = prompt("请输入要检测的内容，支持正则");
let reg = new RegExp(con,"g");
let div = document.querySelector("div");
div.innerHTML = div.innerHTML.replace(reg,search =>{
  return(`
    <span style="color:red">
      ${search}
    </span>
  `);
});

选择符

或选择符

1
2
3
let tel = "^010-1234567$";

console.log(/(010|020)\-\d{7,8}/.test(tel));	// true

原子表 [] 和原子组 ()

原子表 [] 中的每个字符之间为“或”链接，按一个字符一个字符的匹配，一旦匹配成功就返回，之后的不再匹配。

1
2
3
4
5
6
let reg = /[123456]/;
let ad = '1';
let ad2 = '12312132';

console.log(ad.match(reg));		// ["1", index: 0, input: "1", groups: undefined]。reg 按一个字符一个字符与 hd 匹配
console.log(ad2.match(reg));	// ["1", index: 0, input: "1", groups: undefined]。按一个字符一个字符的匹配，一旦匹配成功就返回，之后的不再匹配

原子组原子组 () 是按一个整体匹配。

1
2
3
4
let reg = /(123|456)/;
let ad = '5123456789';

console.log(ad.match(reg));		// ["123", "123", index: 1, input: "5123456789", groups: undefined]

转义符 \

字面量转义符

1
2
3
4
5
let price = "12.34";
let errorPrice = "12@34";

console.log(/\d+\.\d+/.test(price));		// true
console.log(/\d+\.\d+/.test(errorPrice));	// false

对象中的转义字符

字符串会将 “\” 符号忽略，因此正则表达式对象中,如果字符串包含 “\” ，达不到转义效果。

1
2
3
4
5
6
7
let price = "12.34";

console.log(/\d+\.\d+/.test(price));	// true

console.log("\d+\.\d+");				// "d+.d+"
let reg = new RegExp("\d+\.\d+");
console.log(reg.test(price));			// false

解决办法是 “\” 再加 \, 表示 给 “\” 添加转义，告诉字符串不要忽略 “\“ 

1
2
3
console.log("\d+\.\d+");				// "\d+\.\d+"
let reg = new RegExp("\d+\.\d+");
console.log(reg.test(price));			// true

字符串边界约束

^ 表示以其后匹配字符开始；$ 表示以其前匹配字符结尾。

举例：限制输入 3-6 位字母，匹配成功则响应 “成功”，匹配失败则响应 “失败”。

html:

1
2
3
<body>
  <input type="text" name = "user"/>
</body>

JavaScript:

1
2
3
4
5
6
document
  .querySelector("[name='user']")
  .addEventListener("keyup",function(){
		let flag =this.value.match(/^[a-z]{3,6}$/);
  		document.querySelector("span").innerHTML = flag?"成功":"失败";
});

数字相关元字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let ad= "Andy 8421";

console.log(ad.match(/\d/));		// ["8", index: 5, input: "Andy 8421", groups: undefined]
console.log(ad.match(/\d/g));		// ["8", "4", "2", "1"]
console.log(ad.match(/\d+/));		// ["8421", index: 5, input: "Andy 8421", groups: undefined]

console.log(ad.match(/\D/));		// ["A", index: 0, input: "Andy 8421", groups: undefined]
console.log(ad.match(/\D/g));		// ["A", "n", "d", "y", " "]
console.log(ad.match(/\D+/));		// ["Andy ", index: 0, input: "Andy 8421", groups: undefined]

let telList = `
  Jackie: 010-9999999,
  Eason: 020-8888888
`;

console.log(telList.match(/\d{3}-\d{7,8}/));	// ["010-9999999", index: 11, input: "\n  Jackie: 010-9999999,\n  Eason: 020-8888888\n", groups: undefined]
console.log(telList.match(/\d{3}-\d{7,8}/g));	// ["010-9999999", "020-8888888"]

console.log(telList.match(/[^-\d:,\s]+/g));		// ["Jackie", "Eason"]

解释：

D :匹配除数字以外的字符;

g : 全局匹配

+ : 整体匹配

[^ ] ：表示匹配除了……以外的字符

​ [^-\d:,\s] : 匹配除了 “-” 数字 “，” 空白 “：” 以外的字符

s : 匹配换行符

S ：匹配非换行符

w 与 W 元字符

w 元字符：匹配字母、数字、下划线；

W 元字符：匹配非（字母、数字、下划线）

1
2
3
let userName = prompt("请输入用户名");

console.log(/^[a-z]\w{4,9}$/.test(userName));

匹配任何字符

[\s\S]+ ：匹配任何字符

[\d\D]+ ：匹配任何字符

[\w\W]+ ：匹配任何字符

m 多行匹配修正符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let list = `
  #1 Jackie,64  #
  #2 Eason,33   #
  #3 andy,18    #
    #ERROR     #   ERROR
  #4 wife,18    #
`;

let message = list.match(/^\s*#\d+\s+.+\s+#$/gm).map(v=>{
  v=v.replace(/\s*#\d+\s*/,"").replace(/\s+#/,"");
  [name,age]=v.split(",");
  return {name,age};
});
console.log(JSON.stringify(message,null,2));

output:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[
  {
    "name": "Jackie",
    "age": "64"
  },
  {
    "name": "Eason",
    "age": "33"
  },
  {
    "name": "andy",
    "age": "18"
  },
  {
    "name": "wife",
    "age": "18"
  }
]
JavaScript
JavaScript

版权声明：本文作者为「Andy8421」.本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！