三、js正则第 3 部分

发布日期: 2024-12-03

更新日期: 2024-12-03

文章字数: 1k

阅读时长: 5 分

阅读次数:

21、正则操作DOM元素

<body>
  <input type="text" name="username">
  <p>pppp</p>
  <h1>h11111</h1>
  <h2>222222</h2>
  <h3>3333333</h3>
</body>
<script>
	// 删除DOM元素
	let body = document.body;
	let reg = /<(h[1-6])>[\s\S]*<\/\1>/gi;
	console.log(body.innerHTML);
	body.innerHTML = body.innerHTML.replace(reg,'');
	console.log(body.innerHTML);
</script>

22、认识原子组

// 参考上面的列子，原子组就是();

23、邮箱验证中原子组的使用

<body>
  <input type="text" name="mail" value="223-2459-332@qq.com">
  <input type="text" name="otherMail" value="22-32-459332@qq.com.cn">
</body>
<script>
  // 邮箱验证
  let mail = document.querySelector(`[name='mail']`).value;
  let reg = /^[\w\-]+@[\w\-]+\.(com|org|cc|cn|net)$/i;
  console.log(mail.match(reg));

  // 其他场景的邮箱
  let otherMail = document.querySelector(`[name='otherMail']`).value;
  let otherReg = /^[\w\-]+@([\w\-]+\.)+(com|org|cc|cn|net)$/i;
  console.log(otherMail.match(otherReg));
</script>

24、原子组引用完成替换操作

// 这个替换很有意思
let hd = `
  <h1>wujunjie.com</h1>
  <span>hahaha</span>
  <h2>hihihihi</h2>
  `;
// 第一种替换
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
console.log(hd);
console.log(hd.match(reg));
console.log(hd.replace(reg, `<p>$2</p>`));

// 第二种替换：函数形式
let res = hd.replace(reg, (p0,p1,p2) => {
  console.log(p0,p1,p2);
  return `<p>${p2}</p>`;
});
console.log(res);

25、嵌套分组与不记录组

// 利用 ?: 使得某一分组不被记录
let str = `https://www.junjie.fun
  http://wujunjie.com
  https://yuanxiaorong.com
  `;
let reg = /https?:\/\/((\w+\.)?\w+\.(fun|com|cn|org))/gi
// 注意看结果数组中有几个原子组
console.log(str.match(reg));

let newReg = /https?:\/\/(\w+\.\w+\.(?:fun|com|cn|org))/
// 注意看结果数组中有几个原子组
console.log(str.match(newReg));

// 循环遍历打印域名结果
while(res = reg.exec(str)) {
  console.log(res[1]);
}

26、多种重复匹配基本使用

// + ：贪婪匹配，根据具体情况匹配一个到多个

// * : 匹配零个或多个

// {number}: 匹配number个

// {number1，number2}: 匹配number1个到number2个，注意number1可以为零

// {number1，}: 匹配number1个到无数个

// ? : 零个或一个

27、批量使用正则完成密码验证

<body>
  <input type="text" name="password">
</body>
<script>
  // 很厉害，很有意思
  const userPW = document.querySelector(`[name=password]`);
  userPW.addEventListener('keyup',(e) => {
    const value = e.target.value;
    // 字符串包含6-11个小写字母(不区分大小写)或数字，字符串包含大写字母以及数字
    const regs = [/^[a-z0-9]{5,10}$/i, /[A-Z]/, /[0-9]/];
    let state = regs.every(e => e.test(value));
    console.log(state ? '正确' : '错误');
  })
</script>

28、禁止贪婪

// 禁止贪婪
let hd = 'hdddd';
console.log(hd.match(/hd*/));
console.log(hd.match(/hd+/));
// 偏向0
console.log(hd.match(/hd*?/));
// 偏向1
console.log(hd.match(/hd+?/));
// 偏向起始值
console.log(hd.match(/hd{2,3}?/));

// 禁止问好贪婪,一个问好就是零个或一个，再加一个问好就是偏向零个
console.log(hd.match(/hd??/))

29、标签替换的禁止贪婪使用

<body>
  <p>
    <span>wujunjie.fun</span>
    <span>junjie.com</span>
    <span>wu.cn</span>
  </p>
</body>
<script>
  const main = document.querySelector('p');
  const reg = /<span>[\s\S]+<\/span>/gi;
  const newReg = /<span>[\s\S]+?<\/span>/gi;
  //对比一下两种结果 
  main.innerHTML.replace(reg, v => {
    console.log(v);
  })
  main.innerHTML.replace(newReg, v => {
    console.log(v);
  })
  // 以span开始，以span结束，并且中间内容尽可能的少,这就是禁止贪婪的作用
</script>

30、使用matchAll完成全局匹配

<body>
  <p>
    <span>wujunjie.fun</span>
    <span>junjie.com</span>
    <span>wu.cn</span>
  </p>
</body>
<script>
  // 获取每个标签的内容,利用原子组以及迭代器
  let reg = /<span>([\s\S]+?)<\/span>/gi;
  const p = document.querySelector('p');
  const hd1 = p.innerHTML.match(reg);
  // 这种的拿不到分组中的值
  console.log(hd1);
  const hd = p.innerHTML.matchAll(reg);
  // 返回值是一个迭代器对象
  console.log(hd);
  // 需要通过遍历得到方式取值，并且是可以拿到分组中的值的
  for(const iterator of hd) {
    console.log(iterator);
    console.log(iterator[1]);
  }
</script>