API-正则表达式

学习目标：

掌握正则表达式

学习内容：

什么是正则表达式
语法
元字符
修饰符

什么是正则表达式：

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

使用场景

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）

比如用户名： /^[a-zA-Z0-9-_]{6,16}$/

过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。

小结

正则表达式	用于匹配字符串中字符组合的`模式`
正则表达式的作用	表单验证（`匹配`）；过滤敏感词（`替换`）；字符串中获取我们想要的部分（`提取`）

语法：

JavaScript中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

1.定义正则表达式语法

const 变量名 = /表达式/

其中/ / 是正则表达式字面量。

比如：

const reg = /前端/

2.判断是否有符合规则的字符串

test()方法 ：用来查看正则表达式与指定的字符串是否匹配。

regObj.test(被检测的字符串)

比如：

    const str = '要坚持努力学习前端，加油，加油'
    //正则表达式使用：
    //1. 定义规则
    const reg = /前端/
    //2.是否匹配
     console.log(reg.test(str)) //true

如果正则表达式与指定的字符串匹配，返回true，否则false。

小结

正则表达式使用分为几步？

1.定义正则表达式
2.检测查找是否匹配

检索（查找）符合规则的字符串

exec()方法：在一个指定字符串中执行一个搜索匹配。

regObj.exec(被检测的字符串)

比如：

    const str = '要坚持努力学习前端，加油，加油'
    //正则表达式使用：
    //1. 定义规则
    const reg = /前端/
    //2.是否匹配
    // console.log(reg.test(str)) //true
    //3.exec()
    console.log(reg.exec(str))  //返回数组

如果匹配成功，exec()方法返回一个数组，否则返回null。

小结

正则表达式检测查找	区别
`test()方法`	用于判断是否有符合规则的字符串，返回的是`布尔值`。找到返回true，否则false。
`exec()方法`	用于检索（查找）符合规则的字符串，找到`返回数组`，否则为null。

 <title>正则表达式的使用</title>
</head>

<body>
  <script>
    const str = '要坚持努力学习前端，加油，加油'
    //正则表达式使用：
    //1. 定义规则
    const reg = /前端/
    //2.是否匹配
    // console.log(reg.test(str)) //true
    //3.exec()
    console.log(reg.exec(str))  //返回数组
  </script>

</body>

元字符：

普通字符

大多数的字符仅能够描述它们本身，这些字符称作普通字符。

例如所有的字母和数字。

也就是说普通字符只能够匹配字符串中与它们相同的字符。

元字符（特殊字符）

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…
但是换成元字符写法：[a-z]

在这里插入图片描述

小结

元字符	是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
好处	比如英文26个字母，我们使用`元字符[a-z]`简洁和灵活。

元字符-边界符：
表示位置，开头和结尾，必须用什么开头，用什么结尾。

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

边界符	说明
`^`	表示匹配行首的文本（以谁开始）
`$`	表示匹配行尾的文本（以谁结束）

如果 ^ 和$在一起，表示必须是精确匹配。

 //1.边界符
    console.log(/^哈/.test('哈')) //true
    console.log(/^哈/.test('哈哈')) //true
    console.log(/^哈/.test('五哈')) //false
    console.log(/^哈$/.test('哈'))  //true  只有这个情况为true，否则全是false
    console.log(/^哈$/.test('哈哈'))//false
    console.log(/^哈$/.test('五哈'))//false

元字符-量词：
表示重复次数。

量词用来设定某个模式出现的次数。

量词	说明
`*`	重复零次或更多次
`+`	重复一次或更多次
`？`	重复零次或一次
`{n}`	重复n次
`{n，}`	重复n次或更多次
`{n,m}`	重复n到m次

注意：逗号左右两侧千万不要出现空格。

  //量词 * 类似 >=0  次
    console.log(/^哈$/.test('哈'))//true
    console.log(/^哈*$/.test(''))//true
    console.log(/^哈*$/.test('哈'))//true
    console.log(/^哈*$/.test('哈哈'))//true
    console.log(/^哈*$/.test('五哈很傻'))//false
    console.log(/^哈*$/.test('哈很傻'))//false
    console.log(/^哈*$/.test('哈很哈'))//false

    console.log('--------------')
    //量词 + 类似 >=1 次
    console.log(/^哈$/.test('哈'))//true
    console.log(/^哈+$/.test(''))//false
    console.log(/^哈+$/.test('哈'))//true
    console.log(/^哈+$/.test('哈哈'))//true
    console.log(/^哈+$/.test('五哈很傻'))//false
    console.log(/^哈+$/.test('哈很傻'))//false
    console.log(/^哈+$/.test('哈很哈'))//false

    console.log('--------------')
    //量词 ？ 类似 0 || 1
    console.log(/^哈?$/.test(''))//true
    console.log(/^哈?$/.test('哈'))//true
    console.log(/^哈?$/.test('哈哈'))//false
    console.log(/^哈?$/.test('五哈很傻'))//false
    console.log(/^哈?$/.test('哈很傻'))//false
    console.log(/^哈?$/.test('哈很哈'))//false

    console.log('--------------')
    // 量词 {n} 写几，就必须出现几次
    console.log(/^哈{4}$/.test('哈')) //false
    console.log(/^哈{4}$/.test('哈哈')) //false
    console.log(/^哈{4}$/.test('哈哈哈')) //false
    console.log(/^哈{4}$/.test('哈哈哈哈')) //true
    console.log(/^哈{4}$/.test('哈哈哈哈哈')) //false
    console.log(/^哈{4}$/.test('哈哈哈哈哈哈')) //false

    console.log('--------------')
    // 量词 {n,}   >=n
    console.log(/^哈{4,}$/.test('哈')) //false
    console.log(/^哈{4,}$/.test('哈哈')) //false
    console.log(/^哈{4,}$/.test('哈哈哈')) //false
    console.log(/^哈{4,}$/.test('哈哈哈哈')) //true
    console.log(/^哈{4,}$/.test('哈哈哈哈哈')) //true 
    console.log(/^哈{4,}$/.test('哈哈哈哈哈哈')) //true

    console.log('--------------')
    // 量词 {n,m}  逗号左右两侧千万不能有空格    >=n && <= m
    console.log(/^哈{4,6}$/.test('哈')) //false
    console.log(/^哈{4,6}$/.test('哈哈')) //false
    console.log(/^哈{4,6}$/.test('哈哈哈')) //false
    console.log(/^哈{4,6}$/.test('哈哈哈哈')) //true 
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈')) //true 
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈')) //true 
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))  //false

元字符-字符类：
比如\d 表示0~9。

1.[ ] 匹配字符集合
后面的字符串只要包含abc中任意一个字符，都返回true。

 // 字符类   [abc]  只选1个
    console.log(/^[abc]$/.test('a'))  // true
    console.log(/^[abc]$/.test('b'))  // true
    console.log(/^[abc]$/.test('c'))  // true
    console.log(/^[abc]$/.test('ab'))  // false
    console.log(/^[abc]{2}$/.test('ab'))  // true

2.[ ] 里面加上 - 连字符：[A-Z]
使用连字符 - 表示一个范围。

console.log(/^[A-Z]$/.test('P')) // true

比如：

`[a-z]`	表示`a到z`26个英文字母都可以
`[a-zA-Z]`	表示大小写都可以
`[0-9]`	表示0~9的数字都可以

// 字符类   [a-z]  只选1个
    console.log(/^[A-Z]$/.test('p'))  // false
    console.log(/^[A-Z]$/.test('P'))  // true
    console.log(/^[0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test('p'))  // true
    console.log(/^[a-zA-Z0-9]$/.test('P'))  // true

3.[ ]里面加上^取反符号：[^a-z]

比如：

`[^a-z]`	匹配除了小写字母以外的字符
注意要写到中括号里面	-

4..匹配除换行符之外的任何单个字符。

小结

字符类`.`(点)	匹配除换行符之外的任何单个字符
`[abc]`	匹配abc其中的任何单个字符
`[a-z]`	匹配26个小写英文字母其中的任何单个字符
`[^a-z]`	匹配除了26个小写英文字母之外的其他任何单个字符

练习

 <title>练习-用户名验证案例</title>
  <style>
    span {
      display: inline-block;
      width: 250px;
      height: 30px;
      vertical-align: middle;
      line-height: 30px;
      padding-left: 15px;
    }

    .error {
      color: red;
      background: url(./images/error1.png) no-repeat left center;
    }

    .right {
      color: green;
      background: url(./images/right.png) no-repeat left center;
    }
  </style>
</head>

<body>
  <input type="text" name="" id="">
  <span></span>
  <script>
    //1.准备正则
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const input = document.querySelector('input')
    const span = input.nextElementSibling
    input.addEventListener('blur', function () {
      // console.log(reg.test(this.value))
      if (reg.test(this.value)) {
        span.innerHTML = '输入正确'
        span.className = 'right'
      } else {
        span.innerHTML = '请输入6-16位的英文数字下划线'
        span.className = 'error'
      }
    })
  </script>

</body>

5.预定义：指的是某些常见模式的简写方式。

预定类	说明
`\d`	匹配0~9之间的任一数字，相当于[0-9]
`\D`	匹配所有0~9以外的字符，相当于[^0-9]
`\w`	匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
`\W`	除所有字母、数字、下划线以外的字符，相当于[^A-Za-z0-9_]
`\s`	匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
`\S`	匹配非空格的字符，相当于[^\t\r\n\v\f]

修饰符：

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等。

/表达式/修饰符

`i`	正则匹配时字母不区分大小写
`g`	匹配所有满足正则表达式的结果

    console.log(/^java$/.test('java')) //true
    console.log(/^java$/i.test('JAVA')) //true
    console.log(/^java$/i.test('Java')) //true

替换 replace替换

字符串.replace(/正则表达式/,'替换的文本')

 <title>修饰符</title>
</head>

<body>
  <script>
    console.log(/^java$/.test('java')) //true
    console.log(/^java$/i.test('JAVA')) //true
    console.log(/^java$/i.test('Java')) //true
    const str = 'java是一门编程语言,学习JAVA过程很难'
    // const re = str.replace(/java|JAVA/g, '前端')
    const re = str.replace(/java/ig, '前端')
    console.log(re)  // 前端是一门编程语言， 学习JAVA过程很难
  </script>

</body>

练习

<title>练习-过滤敏感字</title>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>
  <div></div>
  <script>
    const tx = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function () {
      // console.log(tx.value)
      div.innerHTML = tx.value.replace(/激情|基情/g, '**')
      tx.value = ''
    })
  </script>

</body>