正则表达式学习总结

weixin_44241303

于 2024-06-06 15:39:38 发布

阅读量333

点赞数 5

文章标签：正则表达式学习 javascript

本文链接：https://blog.csdn.net/weixin_44241303/article/details/139494225

版权

一.常用方法

re.test(字符串)
re.exec(字符串)

例子：

const  str ="wangdefa"
   //声明方法
   const ret = /wangde/
  const flag =  ret.test(str)  //检测是否有这个数据，有就返回true
  const rgarr =  ret.exec(str) //监测字符串中是否有这个元素，有就返回数组.没有返回空
  console.log(rgarr);

（一）.元字符

1 .^ //以什么开头

2. $ //以什么结尾

例子：

  	console.log(/^wang/.test("wang"));  //true 开头匹配
      console.log(/wang$/.test("wang"));  //true 以什么结尾匹配
      console.log(/^wang$/.test("wang"));  //true 只适合只能是以开头跟结尾只有一个并且是一直才true
      console.log(/^wangwang$/.test("wang"));  //false 只适合只能是以开头跟结尾只有一个并且是一直才true 否则false

（二）量词

在这里插入图片描述
例子：

  console.log(/^wang*$/.test("wang"));  //true * 出现0次到多次
  console.log(/^wang+$/.test("wang"));  //true + 出现1次到多次
  console.log(/^wang?$/.test("wang"));  //true ? 出现0次到1次
  console.log(/^wang{1,4}$/.test("wang"));  //true {n,m} 出现n次到m次  里面不能有空格

（三）字符类

. 代表除了换行符其他任意字符都可以
在[^] 表示取反

  console.log(/^[a-z]$/.test("p"));  //true   - 是代表什么数字或字符到什么字符   a-z  就是选取a到z其中任意一个匹配
  console.log(/^[a-zA-Z]{4}$/.test("wang"));  //true  任意四个大小写字母 
  console.log(/^[a-zA-Z0-9]{4}$/.test("1bav"));  //true  任意四个大小写字母跟数字
  console.log(/^[a-zA-Z0-9]{4}$/.test("1b2av"));  //false  任意四个大小写字母跟数字  这里是五个

3.预定义
在这里插入图片描述
重点注意 \d \w

(四) 修饰符

igonore i. 忽略大小写
gloable g 全局

	const  str = '333fad'
  const  str2   = '33ssbbbs3fad'
  const result =  str.replace(/3|b/i,'*'); //忽略大小写
  const result2 =  str2.replace(/3|b/ig,'*'); //忽略大小写跟全部替换

案例：

输入表单验证案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .right{
            color: green;
            

        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">   <span></span>
</body>
<script>
    //获取表单
  const inp =   document.querySelector('input')
//   获取显示信息元素
 const span =  document.querySelector('span')
 //监听input失去失去焦点事件
  inp.addEventListener('blur',function(){
    //正则表达式
    const reg = /^[a-zA-Z0-9]{6,16}$/
    //判断表单的值输入是否符合规定
     if(reg.test(this.value) ){
        span.innerHTML = '输入正确'
        span.className = 'right'
     }else{
        span.innerHTML = '请输入6 - 16个字母'
        span.className = 'error'
     }
  })
</script>
</html>