Web APIs(正则表达式)

卡耐
371 阅读3分钟

Web APIs

正则表达式

介绍

  • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
  • 在 JavaScript中，正则表达式也是对象
  • 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

正则表达式在 JavaScript中的使用场景：

  • 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
  • 比如用户名: /^[a-z0-9_-]{3,16}$/
  • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

image.png

总结

  1. 正则表达式是什么？
  • 是用于匹配字符串中字符组合的模式
  1. 正则表达式有什么作用？
  • 表单验证 （匹配)
  • 过滤敏感词 （替换）
  • 字符串中提取我们想要的部分 （提取）

语法

  1. 定义规则let reg = /abc/;
  2. 查找console.log(reg); 比如: 查找下面文本中是否包含字符串 '前端'

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

1. 定义正则表达式语法：

let 变量名 = /表达式/; 其中 / / 是正则表达式字面量 比如：

    let reg = /前端/;

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

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

语法： reg.test(被检测的字符串)

let str = 'IT培训，前端培训，web前端培训，软件测试培训';
let reg = /前端/;
// test() 方法 用来查看正则表达式与指定的字符串是否匹配
let re = reg.test(str);
console.log(re);

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

总结

  1. 正则表达式使用分为几步？
  • 定义正则表达式
  • 检测查找是否匹配

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

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

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

let str = 'IT培训，前端培训，web前端培训，软件测试培训';
let reg = /前端/;
let re = reg.exec(str);
console.log(re);

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

总结

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

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

元字符

普通字符:

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

元字符(特殊字符）

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

参考文档：

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

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

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

1. 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

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

image.png

^:用什么开头

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

$:用什么结尾

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

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

    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));

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

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

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

image.png

image.png

image.png

总结

  • +表示重复至少 1 次
  • ? 表示重复 0 次或1次
  • *表示重复 0 次或多次
  • {m, n} 表示复 m 到 n 次
  1. 字符类 （比如 \d 表示 0~9）

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

(1) [ ] 里面加上 - 连字符
  • 使用连字符 - 表示一个范围
    console.log(/^[a-z]$/.test('z'));//true

比如：

  • [a-z] 表示 a 到 z 26个英文字母都可以
  • [a-zA-Z] 表示大小写都可以
  • [0-9] 表示 0~9 的数字都可以 认识下：腾讯QQ
    console.log('腾讯QQ'+/^[1-9][0-9]{4,}$/.test('10000'));
(2)[ ] 里面加上 ^ 取反符号

比如：

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

总结

  1. 字符类.(点)代表什么意思？
  • 匹配除换行符之外的任何单个字符
  1. 字符类 [] 有若干代表什么意思？
  • [abc] 匹配abc其中的任何单个字符
  • [a-z] 匹配26个小写英文字母其中的任何单个字符
  • [^a-z] 匹配除了26个小写英文字母之外的其他任何单个字符
用户名验证案例

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

分析：

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

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

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

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

<input type="text" class="uname"> <span>请输入用户名</span>
 <script>
 //  量词是设定某个模式出现的次数
 var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 中划线
 var uname = document.querySelector('.uname');
 var span = document.querySelector('span');
 uname.onblur = function() {
   if (reg.test(this.value)) {
   console.log('正确的');
   span.className = 'right';
   span.innerHTML = '用户名格式输入正确';
   } else {
   console.log('错误的');
   span.className = 'wrong';
   span.innerHTML = '用户名格式输入不正确';
   }
 }
</script>
(4) 预定义：指的是某些常见模式的简写方式。

预定义类指的是某些常见模式的简写方式. image.png 案例:验证座机号码

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

表单验证案例

//手机号验证:/^1[3|4|5|7|8][0-9]{9}$/;
//验证通过与不通过更换元素的类名与元素中的内容
 if (reg.test(this.value)) {
    // console.log('正确的');
    this.nextElementSibling.className = 'success';
    this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
   } else {
       // console.log('不正确');
      this.nextElementSibling.className = 'error';
      this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确,请从新输入 ';
 }
 
 //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 = '<i class="success_icon"></i> 恭喜您输入正确';
   } else {
     // console.log('不正确');
     this.nextElementSibling.className = 'error';
     this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确,请从新输入 ';
            }
        }
 };

修饰符

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

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

replace 替换

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

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

案例：屏蔽敏感词

  <textarea cols="60" rows="10"></textarea>
  <input type="button" value="点击发布留言">
    <ul>
        <!-- <li>内容</li>
        <li>新的内容</li> -->
    </ul>
 
     
<script type="text/javascript">
 // 获取元素
 let text = document.querySelector('textarea');
 let btn = document.querySelector('input');
 let ul = document.querySelector('ul');
 
       // 监听事件
        btn.addEventListener('click', function () {
       // 创建li
            let li = document.createElement('li');
            // 放到ul
            ul.appendChild(li);
            // 获取内容
            let txt = text.value;
            // 屏蔽敏感字
            txt = txt.replace(/早恋|ZL/gi, '**')
            // 放到li里面
            li.innerHTML = txt;
        });
avatar
文章
阅读
粉丝