ES6 —— 正则表达式

编程语言 2022-06-08 23:45:38 阅读次数: 0

文章目录

一、正则表达式概述

  1. 什么是正则表达式：用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。
  2. 正则表达式通常用来检索、替换那些符合某个模式（规则）的文本。例如验证表单（匹配）、过滤页面中的一些敏感词（替换）、从字符串中获取我们想要的特定部分（提取）。

二、正则表达式的特点

  1. 灵活性、逻辑性和功能性非常的强。
  2. 可以迅速地用极简单的方式达到字符串的复杂控制。
  3. 邮箱：在这里插入图片描述
    用户名：
    在这里插入图片描述

三、正则表达式的使用

在 JavaScript 中，可以通过两种方式创建一个正则表达式。

  1. 通过调用 RegExp 对象的构造函数创建。
	let regexp = new RegExp(/表达式/)
	console.log(regexp) // /123/

在这里插入图片描述

  1. 利用字面量创建正则表达式
	let regexp = /123/
    console.log(regexp)

在这里插入图片描述

四、测试正则表达式

  1. test()： 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。
	let reg = /123/ 
    console.log(reg.test(123)) //true
    console.log(reg.test('xbc')) //false

五、正则表达式中的边界符

  1. 正则表达式的组成：一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊符号的组合，比如 /ab*c/。其中特殊字符也被成为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。
  2. 边界符：正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
    在这里插入图片描述
	//只要包含 abc 就可以
	let reg = /abc/
    console.log(reg.test('abc')) //true
    console.log(reg.test('abcd')) //true

	//必须以 abc 开头
	let reg = /^abc/
    console.log(reg.test('abc')) //true
    console.log(reg.test('abcd')) //true
    console.log(reg.test('cbad')) //false

	//只能是 abc
	let reg = /^abc$/
    console.log(reg.test('abc')) //true
    console.log(reg.test('abcd')) //false

六、正则表达式字符类

  1. 字符类：[] 表示有一系列字符可供选择，只要匹配其中一个就可以了。
    //包含里面的任何一个字符都返回true
    let reg = /[abc]/
    console.log(reg.test('andy')) //true
    console.log(reg.test('baby')) //true
    console.log(reg.test('red')) //false

	//三选一: 只能是a 或者b 或者c 这三个字母才返回 true
    let reg = /^[abc]$/
    console.log(reg.test('b')) //true
    console.log(reg.test('abc')) //false
    console.log(reg.test('andy')) //false
  1. [-] 方括号内部 范围符号 -
	//26个小写英文字母任何一个都返回 true
    let reg = /^[a-z]$/
    console.log(reg.test('a')) //true
    console.log(reg.test('y')) //true
    console.log(reg.test('A')) //false
    console.log(reg.test('abc')) //false

	//26个英文字母任何一个都返回 true
    let reg = /^[a-zA-Z]$/
    console.log(reg.test('a')) //true
    console.log(reg.test('y')) //true
    console.log(reg.test('A')) //true
    console.log(reg.test('abc')) //false
  1. 如果 [] 里面有 ^ 表示取反的意思。
	//如果中括号里面有 ^ 表示取反的意思
    let reg = /^[^a-zA-Z0-9_-]$/
    console.log(reg.test('a')) //false
    console.log(reg.test('y')) //false
    console.log(reg.test('A')) //false
    console.log(reg.test('!')) //true

七、正则表达式量词符

  1. 量词符用来设定某个模式出现的次数。
    在这里插入图片描述

*：重复零次或更多次。

	let reg = /^a*$/
    console.log(reg.test('')) //true
    console.log(reg.test('a')) //true
    console.log(reg.test('aaa')) //true
    console.log(reg.test('abc')) //false

+：重复一次或更多次。

	let reg = /^a+$/
    console.log(reg.test('')) //false
    console.log(reg.test('a')) //true
    console.log(reg.test('aaa')) //true
    console.log(reg.test('abc')) //false

?：重复零次或一次。

	let reg = /^a?$/
    console.log(reg.test('')) //true
    console.log(reg.test('a')) //true
    console.log(reg.test('aaa')) //false
    console.log(reg.test('abc')) //false

{n}：重复 n 次。

	let reg = /^a{3}$/
    console.log(reg.test('a')) //false
    console.log(reg.test('aaa')) //true
    console.log(reg.test('abc')) //false

{n,}：重复 n 次或更多次。

	let reg = /^a{3,}$/
	console.log(reg.test('a')) //false
    console.log(reg.test('aaa')) //true
    console.log(reg.test('aaaaaa')) //true
    console.log(reg.test('abc')) //false

{n,m}：重复大于等于 n 次且小于等于 m 次。

	let reg = /^a{3,5}$/
    console.log(reg.test('a')) //false
    console.log(reg.test('aaa')) //true
    console.log(reg.test('aaaaa')) //true
    console.log(reg.test('abc')) //false

量词重复出现

	//这个模式用户只能输入英文字母 数字 下划线 短横线 且 6-16 位
	let reg = /^[a-zA-Z0-9_-]{6,16}$/
	console.log(reg.test('study')) //false
    console.log(reg.test('andy-666')) //ture
    console.log(reg.test('andy!666')) //false

八、用户名验证

  1. 如果用户名输入合法，失去焦点后，提示合法，且颜色为绿色。
  2. 如果用户名输入不合法，失去焦点后，提示不合法，且颜色为红色。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
    
    
            color: #aaa;
        }
        .right {
    
    
            color: green;
        }
        .wrong {
    
    
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" class="uname"><span>请输入用户名</span>
    <script>
        let input = document.querySelector('input')
        let span = document.querySelector('span')
        let reg = /^[a-zA-Z0-9_-]{6,16}$/
        input.onblur = function(){
    
    
            if(reg.test(this.value)){
    
    
                span.innerHTML = '格式正确'
                span.className = 'right'
            }else{
    
    
                span.innerHTML = '格式错误'
                span.className = 'wrong'
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

九、预定义类

  1. 预定义类是某些常见模式的简写方法。
    在这里插入图片描述

\d：匹配 0-9 之间的任一数字，相当于 [0-9]

	let reg = /^\d{1,5}$/
    console.log(reg.test(123)) //true
    console.log(reg.test('aa123')) //false

\D：匹配所有 0-9 以外的字符，相当于 [^0-9]

	let reg = /^\D{1,5}$/
    console.log(reg.test('a-!')) //true
    console.log(reg.test('777')) //false

\w：匹配任意的字符、数字和下划线，相当于 [A-Za-z0-9_]。

	let reg = /^\w{1,5}$/
    console.log(reg.test('a-!')) //false
    console.log(reg.test('Aa66_')) //true

\W：匹配除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]

	let reg = /^\W{1,5}$/
    console.log(reg.test('!')) //true
    console.log(reg.test('Aa66_')) //false

\s：匹配空格(包括换行符、制表符、空格符等)，相当于 [\t\r\n\v\f] 。

	let reg = /^\s{1,5}$/
    console.log(reg.test(' ')) //true
    console.log(reg.test('hi')) //false

\S：匹配非空格(包括换行符、制表符、空格符等)字符，相当于 [^\t\r\n\v\f]。

	let reg = /^\s{1,5}$/
    console.log(reg.test(' ')) //false
    console.log(reg.test('hi')) //true

十、座机号码验证

  1. 全国座机号码两种格式：010-12345678 或者 0530-1234567
	//正则里面的或者符号 | (一个杠)
	let reg = /^\d{3}-\d{8}|^\d{4}-\d{7}$/

十一、字符串替换

  1. replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或者一个正则表达式。
	stringObject.replace(regexp/substr,replacement)
  1. 第一个参数：被替换的字符串或者正则表达式
  2. 第二个参数：替换为的字符串
  3. 返回值是一个替换完毕的新字符串
	<textarea name="" id="message"></textarea> <button>提交</button>
	
	let text = document.querySelector('textarea');
    let btn = document.querySelector('button');
    let div = document.querySelector('div');
    btn.onclick = function() {
    
    
        div.innerHTML = text.value.replace(/激情|gay|jiqing/g, '**');
    }

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45902692/article/details/124518523
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022