淘先锋技术网

首页 1 2 3 4 5 6 7

0.正则匹配规则

  • 字符串从左到右,依次先匹配多再匹配少,如果一旦匹配上就不会回头匹配
  • 贪婪匹配原则:能匹配多个,就不匹配少个

1.创建正则表达式的三种方式

1.1字面量的方式

let reg = /test/;
let str = 'this is a test,test is very good,you can use test to work!'
let bool = reg.test(str);
console.log(bool);//true

1.2系统构造函数的方式

let reg = RegExp('test');
let str = 'this is a test,test is very good,you can use test to work!'
let bool = reg.test(str);
console.log(bool);//true

1.3new系统构造函数的方式

let reg =new RegExp('test');
let str = 'this is a test,test is very good,you can use test to work!'
let bool = reg.test(str);
console.log(bool);//true

2.修饰符

2.1i忽略大小写

2.1.1不使用i

let reg = /TeSt/;
//let reg = RegExp('TeSt');
//let reg = new RegExp('TeSt');
let str = 'this is a test,test is very good,you can use test to work!'
let bool = reg.test(str);
console.log(bool);//false

2.1.2使用i

let reg = /TeSt/i;
//let reg = RegExp('TeSt','i');
//let reg = new RegExp('TeSt','i');
let str = 'this is a test,test is very good,you can use test to work!'
let bool = reg.test(str);
console.log(bool);//true

2.2g全局匹配

2.2.1不使用g

let reg = /test/;
//let reg =RegExp('test');
//let reg =new RegExp('test');
let str = 'this is a test,test is very good,you can use test to work!'
let arr = str.match(reg);
console.log(arr);//["test", index: 10, input: "this is a test,test is very good,you can use test to work!", groups: undefined] 只会匹配一个

2.2.2使用g

let reg = /test/g;
//let reg =RegExp('test','g');
//let reg =new RegExp('test','g');
let str = 'this is a test,test is very good,you can use test to work!'
let arr = str.match(reg);

console.log(arr);//["test", "test", "test"] 有多少匹配多少,都放到一个数组中

2.3m多行匹配

2.3.1不使用m

let reg = /^test/;
//let reg = RegExp('^test');
//let reg =new RegExp('^test');
let str = `this is a test,
test is very good,you can use 
test to work!`
let arr = str.match(reg);
console.log(arr);//null

2.3.2使用m

let reg = /^test/m;
// let reg = RegExp('^test','m');
//let reg =new RegExp('^test','m');
let str = `this is a test,
test is very good,you can use 
test to work!`
let arr = str.match(reg);
console.log(arr);//["test", index: 16, input: "this is a test,↵test is very good,you can use ↵test to work!", groups: undefined]

2.4s增强.能匹配到\n

2.4.1不使用s

let reg = /./;
//let reg=RegExp('.');
//let reg=new RegExp('.');
let str = '\n';
let bool=reg.test(str);
console.log(bool);//false

2.4.2使用s

let reg = /./s;
//let reg=RegExp('.','s');
//let reg=new RegExp('.','s');
let str = '\n';
let bool=reg.test(str);
console.log(bool);//true

3.原子

  • 匹配任意的一个字符

3.1\d\D

3.1.1\d匹配任意数字[0-9]

let reg = /\d/g;
let str = 'alskdjfa3sd54fasdfas231ef65as4df\n——_';
let arr=str.match(reg);
console.log(arr);//["3", "5", "4", "2", "3", "1", "6", "5", "4"]

3.1.2\D匹配任意非数字[^0-9]

let reg = /\D/g;
let str = 'alskdjfa3sd54fasdfas231ef65as4df\n——_';
let arr=str.match(reg);
console.log(arr);//["a", "l", "s", "k", "d", "j", "f", "a", "s", "d", "f", "a", "s", "d", "f", "a", "s", "e", "f", "a", "s", "d", "f", "↵", "—", "—", "_"]

3.1.3匹配任意字符

let reg = /[\d|\D]/g;
let str = 'alskdjfa3sd54fasdfas231ef65as4df\n——_';
let arr=str.match(reg);
console.log(arr);//console.log(arr);//["a", "l", "s", "k", "d", "j", "f", "a", "3", "s", "d", "5", "4", "f", "a", "s", "d", "f", "a", "s", "2", "3", "1", "e", "f", "6", "5", "a", "s", "4", "d", "f", "↵", "—", "—", "_"]

3.2\w\W

3.2.1\w匹配任意英文字母数字或者下划线[0-9A-z_]

let reg = /\w/g;
let str = 'alskdjfa3sd54fasdfas231ef65as4df\n——_';
let arr=str.match(reg);
console.log(arr);//["a", "l", "s", "k", "d", "j", "f", "a", "3", "s", "d", "5", "4", "f", "a", "s", "d", "f", "a", "s", "2", "3", "1", "e", "f", "6", "5", "a", "s", "4", "d", "f", "_"]

3.2.2\W匹配非任意英文字母数字或者下划线[^0-9A-z_]

let reg = /\W/g;
let str = 'alskdjfa3sd54fasdfas231ef65as4df\n——_';
let arr=str.match(reg);
console.log(arr);//["↵", "—", "—"]

3.2.3匹配任意字符

let reg = /[\w\W]/g;
let str = `alsk   djfa3s d54f\rasdf\tas231ef6
5as4df\n——_`;
let arr=str.match(reg);
console.log(arr);//["a", "l", "s", "k", " ", " ", " ", "d", "j", "f", "a", "3", "s", " ", "d", "5", "4", "f", "", "a", "s", "d", "f", "	", "a", "s", "2", "3", "1", "e", "f", "6", "↵", "5", "a", "s", "4", "d", "f", "↵", "—", "—", "_"]

3.4\s\S

3.4.1\s匹配任意空白字符[\n\t\r]

let reg = /\s/g;
let str = `alsk   djfa3s d54f\rasdf\tas231ef6
5as4df\n——_`;
let arr=str.match(reg);
console.log(arr);//[" ", " ", " ", " ", "", "	", "↵", "↵"]

3.4.2\S匹配任意非空白字符[^\n\t\r]

let reg = /\S/g;
let str = `alsk   djfa3s d54f\rasdf\tas231ef6
5as4df\n——_`;
let arr=str.match(reg);
console.log(arr);//["a", "l", "s", "k", "d", "j", "f", "a", "3", "s", "d", "5", "4", "f", "a", "s", "d", "f", "a", "s", "2", "3", "1", "e", "f", "6", "5", "a", "s", "4", "d", "f", "—", "—", "_"]

3.4.3匹配任意字符

let reg = /[\s\S]/g;
let str = `alsk   djfa3s d54f\rasdf\tas231ef6
5as4df\n——_`;
let arr=str.match(reg);
console.log(arr);//["a", "l", "s", "k", " ", " ", " ", "d", "j", "f", "a", "3", "s", " ", "d", "5", "4", "f", "", "a", "s", "d", "f", "	", "a", "s", "2", "3", "1", "e", "f", "6", "↵", "5", "a", "s", "4", "d", "f", "↵", "—", "—", "_"]

3.5\b单词边界和\B非单词边界

let reg = /\btest\b/g;//["test", "test", "test"] 以test开头并以test结尾 test
// let reg = /\btest\B/g;//["test"] 以test开头不以test结尾  test+'任意字符'
// let reg = /\Btest\B/g;//["test"] 不以test开头以test结尾 '任意字符'+test
// let reg = /\Btest\b/g;//["test"] 不以test开头以test结尾 '任意字符'+test+'任意字符'
let str = `this is test,test is very good,you can use test to work 1test test2 1test2`;
let arr=str.match(reg);
console.log(arr);

4.元字符

  • 匹配任意的一个字符

4.1.匹配除了换行符\n的任意字符[所有字符]

let reg = /./g;
let str = `this is test,test is very good,\nyou can use test to work 1test test2 1test2 `;
let arr = str.match(reg);
console.log(arr);//["t", "h", "i", "s", " ", "i", "s", " ", "t", "e", "s", "t", ",", "t", "e", "s", "t", " ", "i", "s", " ", "v", "e", "r", "y", " ", "g", "o", "o", "d", ",", "y", "o", "u", " ", "c", "a", "n", " ", "u", "s", "e", " ", "t", "e", "s", "t", " ", "t", "o", " ", "w", "o", "r", "k", " ", "1", "t", "e", "s", "t", " ", "t", "e", "s", "t", "2", " ", "1", "t", "e", "s", "t", "2", " "]少\n

4.2\将其带有特殊含义的字符去掉后匹配

let reg = /(\.|\\)/g;
let str = `\\this.`;
let arr = str.match(reg);
console.log(arr);//["\", "."]

4.3|等同于js中的逻辑或

let reg = /ab|sdf/g;
let str = `abcafdssdf`;
let arr = str.match(reg);
console.log(arr);//["ab", "sdf"]

4.3.1[]只匹配其中的一个原子

let reg = /[abc][def]/g;
let str = `abcdefhig`;
let arr = str.match(reg);
console.log(arr);//["cd"]

4.3.2[^]只匹配除了匹配 原子的所有原子

let reg = /[^abc][def]/g;
let str = `abcd1fefhig`;
let arr = str.match(reg);
console.log(arr);//["1f", "ef"]

5.边界匹配

5.1^开头

let reg = /^[abc]\w/g;//字符串必须是以a或b或c开头
let str = `asdkjfl bsldkf calskd4sdwsa`;
let arr = str.match(reg);
console.log(arr);//["bs"]

5.2$结尾

let reg = /\w[abc]$/g;//字符串必须是以a或b或c结尾
let str = `asdkjfl bsldkf calskd4sdwsa`;
let arr = str.match(reg);
console.log(arr);//["sa"]

6.量词

6.1*重复0次或者多次{0,}

let reg = /abc*/g;
let str = 'abcabccc';
let arr = str.match(reg);
console.log(arr);//["abc", "abc"]

6.2+重复1次或者多次{1,}

let reg = /bc+/g;
let str = 'abcdabcd';
let arr = str.match(reg);
console.log(arr);//["bc", "bc"]

6.3?重复0次或者1次{0,1}

let reg = /bc?/g;
let str = 'abcdabcd';
let arr = str.match(reg);
console.log(arr);//["bc", "bc"]

6.4{n}重复n次

let reg = /^123\d{8}/g;
let str = '12345678912';
let bool = reg.test(str);
console.log(bool);//true
let arr = str.match(reg);
console.log(arr);//["12345678912"]

6.5{n,}重复n次或者更多次

let reg = /^123\d{20,}/g;
let str = '12345678912';
let bool = reg.test(str);
console.log(bool);//false
let arr = str.match(reg);
console.log(arr);//null

6.6{n,m}重复n次到m次

let reg = /^123\d{6,12}/g;
let str = '12345678912';
let bool = reg.test(str);
console.log(bool);//true
let arr = str.match(reg);
console.log(arr);//["12345678912"]

7.子表达式反向引用

let reg = /(\w)\1\1/g;//匹配三个连续的字符串
let str = 'aaaaaaabbbbbdssdfsdfdaasssaaaaddf111223sddfadsssss';
let arr = str.match(reg);
console.log(arr);//["aaa", "aaa", "bbb", "sss", "aaa", "111", "sss"]
let reg = /(\w)\1(\w)\2/g;//aabb
let str = 'aaaaaaabbbbbdssdfsdfdaasssaaaaddf111223sddfadsssss';
let arr = str.match(reg);
console.log(arr);//["aaaa", "aabb", "aass", "aaaa", "1122", "ssss"]

8.正向预查

8.1?=n匹配任何其后紧跟着字符串n的字符串(正向预查)

let reg = /a(?=b)/g;
let str = 'abcdabcd';
let bool = reg.test(str);
console.log(bool);//true
let arr = str.match(reg);
console.log(arr);//["a", "a"]

8.2?!n匹配非任何其后紧跟着字符串n的字符串()

let reg = /a(?!b)/g;
let str = 'abcdabcdansdfsdf';
let arr = str.match(reg);
console.log(arr);//["a"]

8.3?:b不匹配该分组

let reg = /(?:b)(c)/;
let str = 'abcabcabc';
console.log(str.match(reg));//["bc", "c", index: 1, input: "abcabcabc", groups: undefined]

9.贪婪模式和非贪婪模式

9.1贪婪模式(正则匹配默认都是贪婪模式)

let reg = /{{.*}}/gs;
let str = 'abcd{{efg}}abcd{{xyz}}';
let arr = str.match(reg);
console.log(arr);//["{{efg}}abcd{{xyz}}"]

9.2非贪婪模式

let reg = /{{.*?}}/gs;
let str = 'abcd{{efg}}abcd{{xyz}}';
let arr = str.match(reg);
console.log(arr);//["{{efg}}", "{{xyz}}"]

10.正则表达式的几个方法

10.1replace

  • replace默认是只能匹配一次

10.1.1基本使用

let reg = /\w??/gs;
let str = `两匹马各拉一辆大车。前面的一匹马奋力前行,走的很快,而后面的一匹马磨磨蹭蹭,还常常停下来休息。主人觉得也许是后面的马力气小,就一次又一次地把后面那辆车上的货物挪到前面的车上去。等到车上的东西都搬完了,后面那匹马便轻快地前进,并且嘲笑前面那匹马说:“你力气大就好好流汗吧,你越是努力干,人家给你的任务就越重。”



  来到旅店休息的时候,主人说:“既然只用一匹马拉车,我养两匹马干吗?不如把另一匹宰掉,总还能拿到一张皮吧。”于是,他便把那匹爱偷懒的马送到屠宰场了。`;
let newStr=str.replace(/匹马/g,'只牛').replace(/匹/g,'只').replace(/马/g,'牛');
console.log(newStr);

10.1.2aabbccdd=>bbaaddcc

10.1.2.1非命名捕获
10.1.2.1.1方法一
let str = 'aabbccdd';
let reg = /(\w)\1(\w)\2/g;
console.log(str.match(reg));//["aabb", "ccdd"]
let newStr = str.replace(reg, '$2$2$1$1');
console.log(newStr);//bbaaddcc
10.1.2.1.2方法二
let str = 'aabbccdd';
let reg = /(\w)\1(\w)\2/g;
console.log(str.match(reg));//["aabb", "ccdd"]
let newStr = str.replace(reg, function ($, $1, $2) {
  console.log($, $1, $2);//当次匹配的字符串 反向引用1 反向引用2 ...
  return $2 + $2 + $1 + $1;
});
console.log(newStr);//bbaaddcc
10.1.2.2命名捕获
10.1.2.2.1方法一
let str = 'aabbccdd';
let reg = /(?<key1>\w)\1(?<key2>\w)\2/g;
console.log(str.match(reg));//["aabb", "ccdd"]
let newStr = str.replace(reg, '$<key2>$<key2>$<key1>$<key1>');
console.log(newStr);//bbaaddcc
10.1.2.2.2方法二
let str = 'aabbccdd';
let reg = /(?<key1>\w)\1(?<key2>\w)\2/g;
console.log(str.match(reg));//["aabb", "ccdd"]
let newStr = str.replace(reg, function (...arr) {
  console.log(arr[0]);//当次匹配的字符串
  let json = arr[arr.length - 1];
  console.log(json);//{key1: "a", key2: "b"} {key1: "c", key2: "d"}
  return json.key2 + json.key2 + json.key1 + json.key1;
});
console.log(newStr);//bbaaddcc

10.1.3js-plus-plus=>jsPlusPlus

10.1.3.1非命名捕获
let str = 'js-plus-plus';
let reg = /-(\w)/g;
console.log(str.match(reg));//["-p", "-p"]
let newStr = str.replace(reg, function($,$1){
  console.log($,$1);
  return $1.toLocaleUpperCase();
});
console.log(newStr);//jsPlusPlus
10.1.3.2命名捕获
let str = 'js-plus-plus';
let reg = /-(?<key>\w)/g;
console.log(str.match(reg));//["-p", "-p"]
let newStr = str.replace(reg, function(...arr){
  console.log(arr[0]);
  let json=arr[arr.length-1];
  return json.key.toLocaleUpperCase();
});
console.log(newStr);//jsPlusPlus

10.1.4jsPlusPlus=>js_plus_plus

10.1.4.1非命名捕获
let str = 'jsPlusPlus';
let reg = /([A-Z])/g;
console.log(str.match(reg));//["P", "P"]
let newStr = str.replace(reg, function($,$1){
  return '_'+$1.toLocaleLowerCase();
});
console.log(newStr);//js_plus_plus
10.1.4.2命名捕获
let str = 'jsPlusPlus';
let reg = /(?<key>[A-Z])/g;
console.log(str.match(reg));//["P", "P"]
let newStr = str.replace(reg, function (...arr) {
  console.log(arr[0]);
  let json = arr[arr.length - 1];
  return '_' + json.key.toLocaleLowerCase();
});
console.log(newStr);//js_plus_plus

10.1.5xxyyzz=>XxYyZz

10.1.5.1非命名捕获
let str = 'xxyyzz';
let reg = /(\w)\1/g;
console.log(str.match(reg));//["xx", "yy", "zz"]
let newStr = str.replace(reg, function ($, $1) {
  console.log($, $1);
  return $1.toLocaleUpperCase() + $1;
});
console.log(newStr);//XxYyZz
10.1.5.2命名捕获
let str = 'xxyyzz';
let reg = /(?<key>\w)\1/g;
console.log(str.match(reg));//["xx", "yy", "zz"]
let newStr = str.replace(reg, function (...arr) {
  console.log(arr[0]);
  let json = arr[arr.length - 1];
  return json.key.toLocaleUpperCase() + json.key;
});
console.log(newStr);//XxYyZz

10.1.6aabbcc=>a$b$c$

10.1.6.1非命名捕获
let str = 'aabbcc';
let reg = /(\w)\1(\w)\2(\w)\3/g;
console.log(str.match(reg));//["aabbcc"]
let newStr = str.replace(reg, '$1$$$2$$$3$');
console.log(newStr);//a$b$c$
10.1.6.2命名捕获
let str = 'aabbcc';
let reg = /(?<key1>\w)\1(?<key2>\w)\2(?<key3>\w)\3/g;
console.log(str.match(reg));//["aabbcc"]
let newStr = str.replace(reg, '$<key1>$$$<key2>$$$<key3>$');
console.log(newStr);//a$b$c$

10.1.7aaaaaaaabbbbbbbbbbcccccccc=>abc

10.1.7.1非命名捕获
let str = 'aaaaaaaabbbbbbbbbbcccccccc';
let reg = /(\w)\1*/g;
console.log(str.match(reg));//["aaaaaaaa", "bbbbbbbbbb", "cccccccc"]
let newStr = str.replace(reg, '$1');
console.log(newStr);//abc
10.1.7.2命名捕获
let str = 'aaaaaaaabbbbbbbbbbcccccccc';
let reg = /(?<key>\w)\1*/g;
console.log(str.match(reg));//["aaaaaaaa", "bbbbbbbbbb", "cccccccc"]
let newStr = str.replace(reg, '$<key>');
console.log(newStr);//abc

10.1.8数字变成账户余额模式

let str = '100100402000011';
let reg = /(?=(\B)(\d{3})+$)/g;//匹配空格(非单词边界,三个字符为一组)
console.log(str.match(reg));//["aaaaaaaa", "bbbbbbbbbb", "cccccccc"]
let newStr = str.replace(reg, '.');
console.log(newStr);//abc

10.1.9字符串替换

let reg = /{{(.+?)}}/gs;
let str = `
  <h2>{{title}}</h2>
  <p>{{describe}}</p>
  `;
console.log(str.match(reg));//["{{title}}", "{{describe}}"]
let newStr = str.replace(reg, function (node, key) {
  console.log(node, key);
  return {
    title: '新闻',
    describe: '这是一条有味道的新闻'
  }[key]
});
console.log(newStr);//<h2>新闻</h2><p>这是一条有味道的新闻</p>

11.验证密码

let inputDOM = document.querySelector('input');

inputDOM.addEventListener('keyup', function () {
  let reg = /^(?=.*\d)(?=.*[A-z])[0-9A-z]{6,18}$/g;//必须存在字母和数字,并且6-18位
  let inputValue = this.value;
  console.log(reg.test(inputValue));
}, false);

12.校验身份证

let inputDOM = document.querySelector('input');

inputDOM.addEventListener('keyup', function () {
  let reg = /^[1-9]\d{5}((18|19|20)\d{2})(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])(\d{3})[0-9Xx]$/g;
  let inputValue = this.value;
  console.log(reg.test(inputValue));
}, false)

13.校验日期

  • /(\d{4})([-/\.])(0[1-9]|1[0-2])\2([12][0-9]|0[1-9]|3[01])/g

14.匹配微信号

  • /^[A-z][A-z0-9_-]{5,19}$/g

15.匹配车牌号

  • /^[京津沪渝冀豫云辽黑湘皖新鲁苏浙晋赣鄂桂甘蒙陕吉闽贵粤青藏川宁琼][A-Z][A-Z0-9]{5}$/g;