• 正则表达式相关概念及不可见高度页面的获取

    12.正则

    概念:匹配有规律的字符串,匹配上则正确

    1.正则的创建方式

    构造函数创建
      		// 修饰符 igm
        // i 忽视 ignore
        // g global 全球 全局
        // m 换行
var reg=new RegExp("匹配的内容","修饰符")
  var str = "this is a Box";
        var reg = new RegExp("box", "igm");
        console.log(reg.test(str));//true

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    字面量的创造
      var reg = /box/igm;
        console.log(reg.test("this is a Box"));//true

    • 1
    • 2

    2.正则的方法

    test()条件满足,返回true,否则返回false

    exec()条件满足,返回数组,不满足返回null

    注意:参数为要匹配的字符串

    3.字串符匹配正则的方法(4个)

    1. search()条件满足返回下标,不满足返回-1
    2. match()条件满足返回数组,条件不满足返回null
    3. split()切割,返回新的数组
    4. replace()替换.返回新的字符串

    4.元字符

    1. 点(.) :代表除了换行以为的所有单个字符(一个点,表示一个字符)

    2. 星号(*):配合其他字符使用,可以让其他字符出现任意多次

    3. []:表示字符可以出现的范围

      [a-z]*表示任意0到多个a-z的字母

    4. (非字符):取反[0-9]可以有任意多个非0-9的字符

    5. +:表示至少出现一次

    5.元符号

    1. \w*::匹配任意多个数字字母下划线 , \w : 等价于[a-zA-Z0-9_]
    2. \d*:\d 代表数字, 等价于 [0-9],\d* 表示任意多个数字
    3. \D:匹配非数字, 相当于[^0-9]
    4. \D{7,}: 匹配至少7个非数字, 相当于[^0-9]{7,}

    6.锚元字符

    1. /^ 匹配开始,从头开始匹配
    2. $/ 匹配结尾,从结尾开始匹配
    3. \s 匹配空格
    4. 使用或模式匹配: |, | 代表或者的意思, 匹配其中一种字符串
    5. 分组模式匹配: (), ()加上小括号, 将内容进行分组, 可以作为一个整体进行多次匹配

    案例

    不可见区域的高度获取(封装一个getScroll方法) 固定导航栏案例

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body {
            height: 2000px;
        }
    style>
head>

<body>
    11<br>
    11
    <script>
        //onscroll 滚动条事件 document.documentElement.scrollTop Left
        //声明头使用document.documentElement.scrollTop
        //不带DTD  使用document.body.scrollTop
        //ie9+  使用window.pageYoffset
        //ie678
        // '获取'不可见区域的兼容写法
        function getScroll() {
            // 不管有没有DTD都可以使用,如果不是ie9+.执行false
            if (window.pageYOffset != undefined) {
                return {
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
                // 带有DTD
            } else if (document.compatMode === "CSS1Compat") {
                return {
                    left: document.documentElement.scrollLeft,
                    top: document.documentElement.scrollTop
                }
            }
            // 不带DTD(声明头 )
            return {
                left: document.body.scrollLeft,
                top: document.body.scrollTop
            }
        }
        document.onscroll = function () {
            console.log(document.compatMode);//带有CSS1Compat,不带DTD BackCompat
            var obj = getScroll();
            console.log(obj);
        }

    script>
body>

html>```


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
  • 相关阅读:
    java命令 jmap 堆参数分析
    14.信号量的代码实现
    P3709 大爷的字符串题(莫队+离散)
    前端 vue生命周期
    机器学习-01-机器学习概述
    windows10无线网络未连接打红叉怎么办
    从零开始学习 Java：简单易懂的入门指南之不可变集合、方法引用（二十六）
    【ML on Kubernetes】第 7 章：模型部署和自动化
    [VIM] MiniBufExplorer插件
    CSS常用样式
  • 原文地址：https://blog.csdn.net/qq_46372132/article/details/133101593