一、js正则第 1 部分

1、普通方式

let hd = 'debounce';
let a = 'de'
// 检测字符串重是否有a字符,这种写法a不会被识别成变量
console.log(/a/.test(hd))

// 换种写法,除此之外其他写法都是错的
console.log(eval(`/${a}/`).test(hd));

2、对象方式创建

let hd = 'houdunren.com';
let a = '@';
// 创建一个正则，代表一种查询规则，g是全局匹配
let reg = new RegExp(a,'g');
console.log(reg.test(hd));

// 熟悉一下字母替换
console.log('abc'.replace(/\w/g,search => {
  return '你好';
}))

// 例子:实现高亮显示
let con = prompt('请输入要检测的内容，支持正则');
let reg2 = new RegExp(con, 'g');
let div = document.querySelector('div');
div.innerHTML = div.innerHTML.replace(reg2, search => {
  return `<span style="color:red">${search}</span>`
    })

3、增加选择符

let hd = 'hundunren';
// 在hd中匹配aaau或者@符号
console.log(/aaau|@/.test(hd));
let tel = '010-9999999';
// 这里\-是转义'-'符号，\d是匹配数字，后面跟着{7，8}指7到8位
console.log(/(010|020)\-\d{7,8}/.test(tel));

4、原子表与原子组

// 原子表：匹配规则为或,1|2|3|4|5
let reg = /[12345]/;
// 原子组：需要写竖线
let reg2 = /(12|34)/;
let hd = '1111234';
// match方法只匹配一个
console.log(hd.match(reg))
console.log(hd.match(reg2))

5、转义

// 1、字面量形式
let price1 = '23@34';
let price2 = 23.34;
// 不用转义时：.代表所有的字符，包括他自己
// 这里\d指数字，后面跟个加号代表匹配一个或多个数字
console.log(/\d+.\d+/.test(price1));
console.log(/\d+.\d+/.test(price2));
// 用转义时：.代表他自己
console.log(/\d+\.\d+/.test(price1));
console.log(/\d+\.\d+/.test(price2));


// 2、对象形式
// 在字符串中转义字符不起效果会被直接忽略，所以需要加\,也就是双斜杠
let reg = new RegExp('\\d+\\.\\d+');
console.log(reg.test(price1))
console.log(reg.test(price2))


// 3、匹配网址
// ?代表零个或多个，也就前面的s是可以没有的
let url = 'https://www.junjie.com';
console.log(/https?:\/\/\w+\.\w+\.\w+/.test(url));

6、边界约束

<input type="text" name='user'>
  <span/>

  let hd = '3sdfsdfd4';
// ^限定起始边界，$限定结束边界
// 下面这个就是以数字开头，以数字结尾,同时限制了只能有一个数字
console.log(/^\d$/.test(hd));
// 加上起始和结尾意思就是要完全匹配,字符串必须符合三到六位，不在这个范围内的都不合适
document.querySelector('[name=user]').addEventListener('keyup',function() {
  let flag = this.value.match(/^[a-z]{3,6}$/);
  document.querySelector('span').innerHTML = flag ? 'true' : 'false'
})

7、数值与空白元字符

let hd = 'wujunjie jiayou 2010';
// 不加g的话只会匹配到2就停止，加了g就会匹配完所有的数字
console.log(hd.match(/\d/g))
// 可以看下结果这两种匹配都是匹配所有的数字，但是匹配规则是不一样的
console.log(hd.match(/\d+/))

let hh = `张三:010-99999999,李四:
    020-88888888`;
console.log(hh.match(/\d{3}-\d{7,8}/g))

// \D匹配字母,会匹配到空格
console.log(hd.match(/\D+/))
console.log(hd.match(/\D/g))

// 注意换行的写法
console.log(hh.match(/[-\d/\n:,]/g))
// 当起始符放在原子表中指除了这些符号都匹配,还能匹配到换行（\n）
console.log(hh.match(/[^-\d:,]/g))

// 匹配空白：\s代表空格、换行、tab、制表符等
// \S:大写S代表除了空白
console.log(/\s/.test('\nhd'));
console.log(/\S/.test('\n'))

// 注意很好玩的，将空白和之前的搭配使用
console.log(hh.match(/[^-\d:,\s]+/g))

8、W涉及的元字符

// \w匹配字母、数字、下划线
// 当同时有了起始符和截止符，就是说这个字符串要以数字开头以字母、数字或者下划线结尾
// 加起始符和截止符一般是为了做表单验证、邮箱验证需要完全匹配的那种
let email = '2232459332@qq.com';
console.log(email.match(/^\d+@\w+\.\w+$/));
// \W大写指除了字母、数字、下划线

// 注意没有边界限制的时候只要字符串中有符合正则的就
// 匹配，有边界限制那字符串的头尾必须要满足正则的头尾

let hd = 'a1234566*6';
console.log(/^[a-z]\w{4,9}$/.test(hd));

9、点元字符的使用

// . 匹配除了换行符之外的所有的符号
// 单独匹配点就用转义 \.

let hd = '\nwujunjie\n'
console.log(hd.match(/.+/));
console.log(hd.match(/^.+/));

// 模式1： s   视为单行；无论有多少换行符都视为单行
// 当然\s代表空格，直接用空格也可以,连接符也可以直接用
let tel =  '0001 - 0101001'
console.log(tel.match(/\d+ - \d+/));
console.log(tel.match(/\d+\s-\s\d+/));

10、匹配所有字符

// 如何匹配所有字符：[\d\D] 或者 [\s\S]
// 数字以及除了数字用或连接的时候就是所有的字符
let hd = `<span>
      hundunren @@@@
      hdcms
    </span>`
console.log(hd.match(/[\d\D]+/))