• Web APIs(正则表达式)

    Web APIs

    正则表达式

    介绍

    • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
    • 在 JavaScript中，正则表达式也是对象
    • 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
    正则表达式在 JavaScript中的使用场景：
    • 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
    • 比如用户名: /^[a-z0-9_-]{3,16}$/
    • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
    总结

    1.正则表达式是什么？

    • 是用于匹配字符串中字符组合的模式

    2.正则表达式有什么作用？

    • 表单验证 （匹配)
    • 过滤敏感词 （替换）
    • 字符串中提取我们想要的部分 （提取）

    1. 为什么需要正则表达式

    
Document用户名：
    密码：
    手机号： 
    邮箱： 
    身份证号码：
    
 

    • 1
    • 2
    • 3

    2. 基本语法

    1.定义规则let reg = /abc/;
    2.查找console.log(reg);
    3.判断是否有符合规则的字符串：* test() 方法 用来查看正则表达式与指定的字符串是否匹配* 语法： reg.test(被检测的字符串)

     

    • 1
    • 2
    总结

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

    • 定义正则表达式
    • 检测查找是否匹配

    2. 定界符

     

    • 1
    • 2

    4. 占位符

     

    • 1
    • 2

    5. 修饰符

     

    • 1
    • 2

    6. 验证中文

    用户名：
    姓名：  
    密码：  
    手机号： 
    邮箱： 
    身份证号码：
    
 

    • 1
    • 2

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

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

      

    • 1

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

    总结

    1.正则表达式检测查找 test方法和exec方法有什么区别？

    • test方法 用于判断是否有符合规则的字符串，返回的是布尔值 找到返回true,否则false
    • exec方法用于检索（查找）符合规则的字符串，找到返回数组，否则为null

    08-模板字符串的替换原理

    
Document
    • {{ name }}
    • {{ age }}
    • {{ gender }}
    
 

    • 1
    • 2
    • 3

    9. 正则替换

     

    • 1

    10. 改变优先级

     

    • 1

    11-正则替换敏感词

     

    • 1
    • 2

    元字符

    普通字符:

    大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。 也就是说普通字符只能够匹配字符串中与它们相同的字符。

    元字符(特殊字符）
    • 一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
    • 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm……
    • 但是换成元字符写法： [a-z]
    参考文档：

    MDN：developer.mozilla.org/zh-CN/docs/…

    正则测试工具: tool.oschina.net/regex

    为了方便记忆和学习，我们对众多的元字符进行了分类：

    1. 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
    • 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

    ^:用什么开头

     let reg = /^abc/;let arr = ['abc'];let re = reg.test(arr);console.log(re); 

    • 1

    $:用什么结尾

     let reg = /abc$/;let arr = ['abc'];let re = reg.test(arr);console.log(re); 

    • 1

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

     let reg = /^abc$/;let arr = ['abc'];let re = reg.test(arr);console.log(re);// let reg = /^abc$/;// console.log(reg.test(123));// console.log(reg.test(123123));// console.log(reg.test(12345)); 

    • 1
    2. 量词 （表示重复次数）

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

    总结
    • +表示重复至少 1 次
    • ? 表示重复 0 次或1次
    • *表示重复 0 次或多次
    • {m, n} 表示复 m 到 n 次

    3.字符类 （比如 \d 表示 0~9）

    3. 字符类 （比如 \d 表示 0~9）
    (1) [ ] 里面加上 - 连字符
    • 使用连字符 - 表示一个范围
     console.log(/^[a-z]$/.test('z'));//true 

    • 1

    比如：

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

    认识下：腾讯QQ

     console.log('腾讯QQ'+/^[1-9][0-9]{4,}$/.test('10000')); 

    • 1
    (2)[ ] 里面加上 ^ 取反符号

    比如：

    • [^a-z] 匹配除了小写字母以外的字符
    • 注意要写到中括号里面
    (3).匹配除换行符之外的任何单个字符

    总结

    1.字符类.(点)代表什么意思？

    • 匹配除换行符之外的任何单个字符

    2.字符类 [] 有若干代表什么意思？

    • [abc] 匹配abc其中的任何单个字符
    • [a-z] 匹配26个小写英文字母其中的任何单个字符
    • [^a-z] 匹配除了26个小写英文字母之外的其他任何单个字符
    用户名验证案例

    需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位

    分析：

    ①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/

    ②：当表单失去焦点就开始验证.

    ③：如果符合正则规范, 则让后面的span标签添加 right 类.

    ④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.

     请输入用户名
  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    (4) 预定义：指的是某些常见模式的简写方式。

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

     var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;var reg = /^\d{3,4}-\d{7,8}$/; 

    • 1

    表单验证案例

    //手机号验证:/^1[3|4|5|7|8][0-9]{9}$/;
//验证通过与不通过更换元素的类名与元素中的内容
 if (reg.test(this.value)) {// console.log('正确的');this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = ' 恭喜您输入正确'; } else { // console.log('不正确');this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '格式不正确,请从新输入 ';
 }
 
 //QQ号验证: /^[1-9]\d{4,}$/; 
//昵称验证:/^[\u4e00-\u9fa5]{2,8}$/
//验证通过与不通过更换元素的类名与元素中的内容 ,将上一步的匹配代码进行封装,多次调用即可
 function regexp(ele, reg) {ele.onblur = function() {if (reg.test(this.value)) {// console.log('正确的');this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = ' 恭喜您输入正确'; } else { // console.log('不正确'); this.nextElementSibling.className = 'error'; this.nextElementSibling.innerHTML = ' 格式不正确,请从新输入 ';}}
 }; 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    修饰符

    修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等 语法： /表达式/修饰符

    • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
    • g 是单词 global 的缩写，匹配所有满足正则表达式的结果
    replace 替换

    replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

    语法：str = str.replace(/c/ig,'&&')字符串.replace(/正则表达式/,‘替换的文本’)

    案例：屏蔽敏感词