0
点赞
收藏
分享

微信扫一扫

day17-正则表达式

墨香子儿 2022-03-11 阅读 44
javascript前端css3
加载失败

JavaScript-DOM-offset家族

  • offset家族用来测量元素的宽高，偏移距离

  • 语法：

    1. offsetWidth
    2. offsetHeight
    3. offsetLeft
    4. offsetTop

  • 获取元素的盒模型宽度高度

    1. 元素外侧：margin

    2. offset测量的宽高，是元素一下三个部分之和

      • 元素最外层：border
      • 元素内部：padding
      • 元素的宽度：content
    3. var box = document.getElementById("box")
// 获取元素的盒模型宽度
var width = box.offsetWidth
console.log(width)
// 获取元素的盒模型高度
var heigth = box.offsetHeight
console.log(heigth)

  • offset 性能问题：

    1. offset在进行元素的宽高、偏移测量的时候浏览器对其操作是，先把元素取出页面，然后再进行测量，测量之后再放入到页面之中
    2. 页面因为元素缺失导致元素重新排列行为我们称之为回流；
    3. 页面因为js操作导致颜色发生改变，那么我们称之为重绘
    4. 这两个行为是浏览器性能杀手，其中回流对浏览器的性能影响最为重大

  • offsetLeft、offsetTop

    1. 测量元素距离当前元素父级元素的偏移距离；

    2. 给元素添加margin值，然后获取元素的offsetLeft、offsetTop

    3. var box1 = document.getElementById("box")
// 获取元素的offsetLeft值
// 我们需要对页面基础样式清零才可以得到精准的元素偏移
var left = box1.offsetLeft
console.log(left)
// 获取元素的offsetTop值
var top = box1.offsetTop
console.log(top)

  • offset家族测量偏移的坑

    1. offset家族测量偏移的时候都是根据参照物元素进行测量的；
    2. 参照物的元素就是：当前元素的定位父级
      • 当前元素的定位父级：当前元素父级之中带有position属性的元素，如果父级之中没有那么就已body为参照物
    3. 和元素定位的参照物几乎完全一致

JavaScript-正则表达式

  • 正则表达式也可以翻译为 => 规则表达式
    1. 所谓的规则表达式，表达是字符串的规则
    2. 规则表达式 abc 怎么编写规则：/abc/;
  • 正则表达式的学习路线；
    1. 创建正则表达式；
    2. 元字符；
    3. 数量关系；
    4. 修饰符；
    5. API学习；

JavaScript-正则表达式-创建正则表达式

  • 创建正则表达式：

    1. 字面量：所见即所得
    2. 构造函数：创建一个对象

  • 字面量创建正则表达式：（推荐使用）

    1. 用字面量创建正则表达式的时候，正则表达式表达的规则不能为空

    2. 判断字符a

    3. // 用字面量创建正则表达式的时候，正则表达式表达的规则不能为空
// 判断字符a
var reg = /a/;
console.log(reg) // 打印结果：/a/

  • 构造函数创建正则表达式

    1. 可以创建一个空的正则表达式

    2. // 构造函数创建正则表达式
// 可以创建一个空的正则表达式
var reg2 = new RegExp();
console.log(reg2) // 打印结果：/(?:)/

JavaScript-正则表达式-正则表达式的应用

  • 主要处理字符串；

  • 一个练习，获取字符串之中所有的字符a；

    1. // 获取字符串之中所有字符a
var str = "alkhakfhakhfpoajll;jadjopalJDJPOAJ;LJAHIOAHDJHANHKAHODHOSSanckafkoanklahoianalkjapo"

    2. 编写正则是 a；

      • 如果获取到所有符合规则的字符，那么我们必须使用修饰符

      • 修饰符我们放在正则的后方，修饰符可以表达我们的查询

      • // 编写正则：规则是a
// 如果获取到所有符合规则的字符，那么我们必须使用修饰符
// 修饰符我们放在正则的后方，修饰符可以表达我们的查询
var reg = /a/g;

    3. 用字符串API = >match；找到符合规则的字符

      • match 会根据正则描述的规则，在字符串之中找到所有符合规则的字符，并放入到数组之中进行返回

      • // API：字符串API match；
// match 会根据正则描述的规则，在字符串之中找到所有符合规则的字符，并放入到数组之中进行返回
var res = str.match(reg);
console.log(res)

    4. 如果还想要获取字符串之中别的字符

      • 需要使用 | 来增加规则可以匹配的条件

      • // 需要使用 | 来增加规则可以匹配的条件;
var reg = /a|k/g;

JavaScript-正则表达式-元字符

  • 元字符：就是可以表达一个字符多种情况的写法

  • 什么是元字符：[ ] 元字符就是中括号，只不过用在正则之中我们把这种计算规则称之为元字符

    1. 我们可以再元字符之中填写n个字符，这些字符表示一个字符的n种情况；
    2. 重要认知：元字符只能表示一个字符的多种情况，只有一个字符

  • 用元字符来进行一个小练习

    1. var str = "吴彦祖比杨彦祖,刘彦祖，吕彦祖，张彦祖，程彦祖帅很多!但是差距也不那么太大"

    2. 我们希望在字符串之中匹配到所有的彦祖

    3. 用元字符来进行查找更为方便

    4. var str = "吴彦祖比杨彦祖,刘彦祖，吕彦祖，张彦祖，程彦祖帅很多!但是差距也不那么太大";
// 我们希望在字符串之中匹配到所有的彦祖
// 用元字符来进行查找更为方便
// - 什么是元字符 : [] 元字符就是中括号，只不过用在正则之中我们把这种计算规则称之为元字符; 
// - 我们可以在元字符之中填写 n 个字符, 这些字符表示一个字符的n种情况; 
// - 重要认知 : 元字符只能表示一个字符的多种情况，只有一个字符! 
var reg = /[吴杨刘吕张程]彦祖/g;
// 使用match在字符串之中进行查找;
var res = str.match(reg);
console.log(res);

  • 元字符的高级使用技巧：

    1. 范围符：-

      • 获取字符串之中的所有数字

      • var str = "ljdhajhoahiohi2992khakhfohfk23klfhsklahfoiefeoi9kheohfiof30khfioahfo888;fjoaojf2joop2oipi4hdsohoi7"

      • // 获取字符串之中的所有数字
var str = "ljdhajhoahiohi2992khakhfohfk23klfhsklahfoiefeoi9kheohfiof30khfioahfo888;fjoaojf2joop2oipi4hdsohoi7";
var reg = /[0-9]/g;
var res = str.match(reg)
console.log(res)

      • 如果数字范围恰好是0-9 那么我可以用 \d 简写来直接表达这个规则

      • // 如果数字范围恰好是0-9 那么我可以用 \d 简写来直接表达这个规则
var reg = /\d/g;
var res = str.match(reg)
console.log(res)

      • 用[0123456789]和[0-9]还有 \d 表达的规则是完全一致的

    2. 反向匹配：

      • 获取字符串之中所有非数字字符；

      • 尖：^

      • 如果在元字符之中出现了 ^ 符号则表示，除了元字符之中规定的字符，其他字符都可以

      • 反向匹配范围非常大，所以在使用的时候一定想好了在用，不要盲目使用反向匹配

      • 匹配非数字字符

        • ```js
          // 反向匹配
          var str = “ljdhajhoahiohi2992khakhfohfk23klfhsklahfoiefeoi9kheohfiof30khfioahfo888;fjoaojf2joop2oipi4hdsohoi7”;
          // 匹配非数字字符
          var reg = /[^0-9]/g;
          var res = str.match(reg)
          console.log(res)

      • 非数字匹配和数字匹配的简写很近似，非数字匹配就是数字匹配简写大写 \D

  • 元字符范围简写：

    1. \w：数字字母下划线
    2. \W：非数字字母下划线
    3. \s：空白字符（换行符、回车符、空格符、制表符、……）
    4. \S：非空字符

  • 任意字符：.

    1. 这个 . 是不包含部分空白字符的；

  • 转义字符：\

    1. 如果我们的规则就是字符 ”.“ 并且 “.” 恰好是正则表达式的运算规则，那么我们就需要使用 \进行转义

正则表达式应用

JavaScript-正则表达式-量词(限定符)

  1. 所谓量词就是单个规则出现的次数

    • 可以限定单个字符的规则：默认限定的是单个字符的规则
    • 可以限定多个字符共同组成的规则；(我们需要用到小括号进行范围的限制)

  2. 量词语法：{字符规则重复的数量}

  3. 量词语法非常灵活：

    • {min ，max}最少出现min次，最多出现max次
    • {min ， }最少出现min次，最多可以出现无数次

  4. 量词存在简写

    • {1,} = 简写为> + ：最少出现一次，最多不限出现次数
    • {0,} = 简写为> * ：可以不出现也可以出现无限多次，这种量词少用，我们不应该在规则限定的时候让规则过于宽松
    • {0,1} = 简写为> ? ：可有可无；
  5. var str = "4jkhfhdiofh5lkfao6fh88io8okfhi963seof5ifhihfi98"
// 获取所有的数字
// 可以用量词表示数字的位数
// 量词语法：{字符规则重复的数量}

// 量词语法非常灵活：
// - {min ，max}最少出现min次，最多出现max次
// - {min ， }最少出现min次，最多可以出现无数次
var reg = /\d{2,}/g;
var res = str.match(reg)
console.log(res)

JavaScript-正则表达式-固话规则正则表达式

  1. 区号规则：三位树顶区号，另外一种是四位数的区号；

    • 固话号码规则：7位数

  2. 固话规则：

    • 难点：区号可以不写
    • 范围限定符：()；通常配合量词使用，可以限定一个范围规则出现的次数

  3. 固话规则易错点：

    • 在使用test验证字符串规则的时候，如果字符串之中有一部分符合了正则表达式的规则，那么判断结果就为true

    • 为了让我们的test判断严谨，我们需要让正则表达式表达字符串完全符合正则规则才可以

      • ^ ：在元字符之中表示非，在元字符之外表示开头
      • $ ：表示字符串结尾

    • 我们需要在正则表达式之中加入开头结尾限定，这样表示让字符串完整符合正则规则

    • var reg_telephone = /^(0\d{2,3}-)?\d{7,8}$/;

  4. 判断字符串是否符合正则描述的规则：

    • 正则表达式的API：语法 正则.test(字符串)

    • 计算结果是true 或者 false 代表字符串符合或者不符合正则表达式规则

    • // 判断字符串是否符合正则描述的规则：
// - 正则表达式的API：语法 正则.test(字符串)
// 计算结果是true 或者 false 代表字符串符合或者不符合正则表达式规则
var str = prompt("请输入您的固定电话号码")
console.log(str)
// - 用字符串匹配正则规则
if(reg_telephone.test(str)){
    // 如果正确执行这里的代码
    alert("您输入的电话号码正确")
}else{
    // 如果错误执行的是这里的代码
    alert("电话号码都不会写？？？？")
}

  5. 注意：我们在使用test的时候尽量给正则表达式添加开头结尾，让我们的正则表达式表达规则

    • 同时不要使用 g 修饰符，会让程序出现很多诡异的bug

JavaScript-正则表达式-字符串API

  1. 字符串API：字符串提供一些专门配合正则表达式使用的API，这些API需要我们具备了正则表达式知识之后才可以使用自如

    • search：根据正则规则，找到字符串之中符合规则的字符位置；
    • match：根据正则规则，找到字符串之中符合规则的字符并以数组的形式进行返回；
    • replace：根据正则规则，找到字符串之中符合规则的字符并进行替换；

  2. search 案例：

    • search 返回值是字符串第一个符合规则字符的下标

    • // - search 案例：
var str = "hello world";
var reg = /l/;
var res = str.search(reg)
// search 返回值是字符串第一个符合规则字符的下标
console.log(res) // 打印结果：1 l的下标

  3. match 案例：

    • 不带 g 正则表达式的match结果：是一个字符的完整查询信息

    • 带 g 正则表达式match结果：所有符合规则字符的数组

    • // - match 案例：
var reg2 = /l/g;
var res2 = str.match(reg2);
console.log(res2);
// 不带 g 正则表达式的match结果：是一个字符的完整查询信息
// 带 g 正则表达式match结果：所有符合规则字符的数组

  4. replace 案例：

    • 想要屏蔽 hello world 之中的所有o，把o替换成 **

    • // - replace 案例：
// - 想要屏蔽 hello world 之中的所有o，把o替换成 **
// - 正则之中添加 g 则表示 全局匹配，替换所有字符串之中符合规则的字符
// - 不添加 g 表示就近匹配，匹配符合规则的结果之后立即终止匹配
var reg3 = /o/g;
var res3 = str.replace(reg3 , "*")
console.log(res3)

JavaScript-正则表达式-字符串API-练习标记重点文字

  1. 两个注意的点

    • replace高级应用
    • 组的应用

  2. 需求：

    • 通过输入的文字。创建正则表达式；
    • 并且根据正则表达式匹配到的结果进行字符的替换，把匹配结果外部添加上 span标签

  3. replace高级应用写法：

    • <!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{
    background-color: tomato;
}
</style>
</head>
<body>
<p id="article">
我家的后面有一个很大的园，相传叫作百草园。现在是早已并屋子一起卖给朱文公的子孙了，连那最末次的相见也已经隔了七八年，其中似乎确凿只有一些野草；但那时却是我的乐园。
不必说碧绿的菜畦，光滑的石井栏，高大的皂荚树，紫红的桑椹；也不必说鸣蝉在树叶里长吟，肥胖的黄蜂伏在菜花上，轻捷的叫天子（云雀）忽然从草间直窜向云霄里去了。单是周围的短短的泥墙根一带，就有无限趣味。
油蛉在这里低唱，蟋蟀们在这里弹琴。翻开断砖来，有时会遇见蜈蚣；还有斑蝥，倘若用手指按住它的脊梁，便会拍的一声，从后窍喷出一阵烟雾。何首乌藤和木莲藤缠络着，木莲有莲房一般的果实，何首乌有臃肿的根。
有人说，何首乌根是有像人形的，吃了便可以成仙，我于是常常拔它起来，牵连不断地拔起来，也曾因此弄坏了泥墙，却从来没有见过有一块根像人样。如果不怕刺，还可以摘到覆盆子，像小珊瑚珠攒成的小球，又酸又甜，色味都比桑椹要好得远。
</p>
<script>
// 1. replace高级应用
// 2. 组的应用

// - 通过输入的文字。创建正则表达式；
// - 并且根据正则表达式匹配到的结果进行字符的替换，把匹配结果外部添加上 span标签；

// 1. 获取匹配字符串
var p = document.getElementById("article")
// - 1.1 获取标签内部的文字
var str = p.innerHTML

// 2. 编写符合规则的正则表达式
// - 外部输入的规则
// - 接受匹配字符串的变量
var reg_string = prompt("请输入要标记的字符");

// - 字符串不可以和正则相拼接
// - 我们可以用构造函数配合字符串创建正则
var reg = new RegExp(reg_string , "g");

// - 把文章进行replace文本替换；
var res = str.replace(reg , "<span>" + reg_string + "</span>")

// - 把处理好的文本放入到p标签之中
p.innerHTML = res;
</script>
</body>
</html>

  4. 正则表达式之中的组-组的写法：

    • 这个组只有在replace里面好用：我们在替换数据的时候可以使用到匹配到的数据

    • 组的使用方法分成两个部分：

      • 正则表达式之中用 () 限定起来的部分被称之为组规则；
      • 组从左到右分别为 组1 组2 …… 依次类推，但是最多不能超过20个组
    • // 组的写法

// 1. 获取匹配字符串
 var p = document.getElementById("article")
// - 1.1 获取标签内部的文字
var str = p.innerHTML

// 2. 编写符合规则的正则表达式
// - 外部输入的规则
// - 接受匹配字符串的变量
var reg_string = prompt("请输入要标记的字符");

// - 字符串不可以和正则相拼接
// - 我们可以用构造函数配合字符串创建正则
// - 我们给正则添加组：在字符串外部拼接一个小括号
var reg = new RegExp("(" + reg_string +")", "g");
console.log(reg)

// - 把文章进行replace文本替换；
var res = str.replace(reg , "<span>$1</span>")

// - 把处理好的文本放入到p标签之中
p.innerHTML = res;

    JavaScript-正则表达式-表单验证

    1. 表单验证广泛应用于前端的各个项目之中，这个案例非常重要

    2. 案例的必备知识点：

      • 必须具备事件知识；
      • 必须具备DOM操作；

    3. 输入框事件

      • 获取焦点：focus；让input获取光标的操作行为会触发获取焦点事件；

        • ```JS
          // 获取焦点
          // handler：处理
          // handlerFocus：处理聚焦事件
          function handlerFocus(){
          // console.log(“输入框获取焦点”)
          tip.style.display = “block”
          }
          ipt.onfocus = handlerFocus

      • 失去焦点：blur；让input失去光标的操作行为会触发失去焦点事件；

        • ```JS
          // 失去焦点
          function handlerBlur(){
          // 隐藏提示
          tip.style.display = “none”

          // 判定用户输入内容是否符合规则
          // - 1. 编写固话规则正则
          var reg_telephone = /^(0\d{2,3}-)?\d{7,8}$/;
          // - 2. 判定用户输入的内容是否符合正则规则
          // - 获取用户输入的内容需要使用 dom.value 进行获取
          if(reg_telephone.test(ipt.value)){
          // 执行这里的代码表示用户输入内容正确
          // - 提示方式：让输入框的边框颜色变成绿色
          ipt.style.borderColor = “green”
          }else{
          // 执行这里的代码表示用户输入内容错误
          // - 提示方式：让输入框的边框颜色变成红色
          ipt.style.borderColor = “red”
          }
          }
          ipt.onblur = handlerBlur


      • 给dom对象添加事件的语法：dom.事件名 = 事件处理函数

      • 事件处理函数：事件触发的时候会执行的函数

    4. 整体流程

      • <!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>
        #tip{
            font-size: 15px;
            color: black;
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" id="ipt">
    <p id="tip">请输入固话号码</p>
    <script>
        // 给dom对象添加事件的语法：dom.事件名 = 事件处理函数
        // 事件处理函数：事件触发的时候会执行的函数
        var ipt = document.getElementById("ipt")
        var tip = document.getElementById("tip")
        // 获取焦点
        // handler：处理
        // handlerFocus：处理聚焦事件
        function handlerFocus(){
            // console.log("输入框获取焦点")
            tip.style.display = "block"
        }
        ipt.onfocus = handlerFocus

        // 失去焦点
        function handlerBlur(){
            // 隐藏提示
            tip.style.display = "none"

            // 判定用户输入内容是否符合规则
            // - 1. 编写固话规则正则
            var reg_telephone = /^(0\d{2,3}-)?\d{7,8}$/;
            // - 2. 判定用户输入的内容是否符合正则规则
            // - 获取用户输入的内容需要使用 dom.value 进行获取
            if(reg_telephone.test(ipt.value)){
                // 执行这里的代码表示用户输入内容正确
                // - 提示方式：让输入框的边框颜色变成绿色
                ipt.style.borderColor = "green"
            }else{
                // 执行这里的代码表示用户输入内容错误
                // - 提示方式：让输入框的边框颜色变成红色
                ipt.style.borderColor = "red"
            }
        }
        ipt.onblur = handlerBlur
    </script>
</body>
</html>
举报

相关推荐

day-17正则表达式

开发语言python

17、正则表达式

正则表达式Linux正则表达式扩展正则表达式Linux系统/运维yyds干货盘点

17种正则表达式

正则表达式浮点数字符串下划线云平台云计算

正则表达式—基础正则表达式

字符串正则表达式元字符Linux运维

正则表达式-正则表达式的使用

linuxbash运维

Java 正则表达式详解_正则表达式

2.2.2 java基础正则表达式搜索字符串Java编程语言

[正则表达式] 常用正则表达式总结

正则表达式字符串IPPython后端开发

Day16正则表达式

正则表达式

day18-正则表达式

正则表达式

day18 - 正则表达式

正则表达式python
0 条评论
加载失败