当前位置： 首页 > news >正文

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

news 2026/2/10 13:30:21

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
字面量的创造
  var reg = /box/igm;console.log(reg.test("this is a Box"));//true

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>Document</title><style>body {height: 2000px;}</style>
</head><body>11<br>11<script>//onscroll 滚动条事件 document.documentElement.scrollTop Left//<!DOCTYPE html>声明头使用document.documentElement.scrollTop//不带DTD  使用document.body.scrollTop//ie9+  使用window.pageYoffset//ie678// '获取'不可见区域的兼容写法function getScroll() {// 不管有没有DTD都可以使用,如果不是ie9+.执行falseif (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(声明头 <!DOCTYPE html>)return {left: document.body.scrollLeft,top: document.body.scrollTop}}document.onscroll = function () {console.log(document.compatMode);//带有CSS1Compat,不带DTD BackCompatvar obj = getScroll();console.log(obj);}</script>
</body></html>```

相关文章：

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

12.正则 概念:匹配有规律的字符串,匹配上则正确 1.正则的创建方式 构造函数创建 // 修饰符 igm// i 忽视 ignore// g global 全球 全局// m 换行 var regnew RegExp("匹配的内容","修饰符")var str "this is a Box";var reg new RegExp(&qu…...

编程日记 2023/9/21 0:20:18

深入学习 Redis - 分布式锁底层实现原理，以及实际应用

目录 一、Redis 分布式锁 1.1、什么是分布式锁 1.2、分布式锁的基础实现 1.2.1、引入场景 1.2.2、基础实现思想 1.2.3、引入 setnx 1.3、引入过期时间 1.4、引入校验 id 1.5、引入 lua 脚本 1.5.1、引入 lua 脚本的原因 1.5.2、lua 脚本介绍 1.6、过期时间续约问题&…...

编程日记 2023/9/21 0:18:17

Hive行转列[一行拆分成多行/一列拆分成多列]

场景&#xff1a; hive有张表armmttxn_tmp&#xff0c;其中有一个字段lot_number&#xff0c;该字段以逗号分隔开多个值&#xff0c;每个值又以冒号来分割料号和数量&#xff0c;如&#xff1a;A3220089:-40,A3220090:-40,A3220091:-40,A3220083:-40,A3220087:-40,A3220086:-4…...

编程日记 2023/9/21 0:17:16

TypeScript系列之类型 string

文章の目录 背景写在最后 背景 与JavaScript不同的是&#xff0c;TypeScript使用的是静态类型&#xff0c;比如说它指定了变量可以保存的数据类型。如下面代码所示&#xff0c;如果在JavaScript中&#xff0c;指定变量可以保存的数据类型&#xff0c;会报错&#xff1a;类型注…...

编程日记 2023/9/21 0:15:14

【C++】动态内存管理 ③ ( C++ 对象的动态创建和释放 | new 运算符 为类对象 分配内存 | delete 运算符 释放对象内存 )

文章目录 一、C 对象的动态创建和释放1、C 语言 对象的动态创建和释放 的方式2、C 语言 对象的动态创建和释放 的方式 二、代码示例 - 对象的动态创建和释放 一、C 对象的动态创建和释放 使用 C 语言中的 malloc 函数 可以为 类对象 分配内存 ; 使用 free 函数可以释放上述分配…...

编程日记 2023/9/21 0:14:13

AMS爆炸来袭，上线即巅峰

1.关于首发项目Antmons(AMS)空投结果 Gate.io Startup 首发项目Antmons代币AMS于Aug15th,AM 07:00开始下单&#xff0c;24小时内下单同等对待总共有15,950人下单&#xff0c;下单总价值超过1,000万美金分发系数约为0.001640495298341。根据上线规则AMS项目认购成功&#xff0c;…...

编程日记 2023/9/21 0:13:11

是面试官放水，还是公司实在是太缺人？这都没挂，华为原来这么容易进...

华为是大企业&#xff0c;是不是很难进去啊&#xff1f;” “在华为做软件测试&#xff0c;能得到很好的发展吗&#xff1f; 一进去就有9.5K&#xff0c;其实也没有想的那么难” 直到现在&#xff0c;心情都还是无比激动&#xff01; 本人211非科班&#xff0c;之前在字节和腾…...

编程日记 2023/9/21 0:12:11

怒刷LeetCode的第2天（Java版）

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;滑动窗口 方法二&#xff1a;双指针加哈希表 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;二分查找 方法二&#xff1a;归并排序 方法三&#xff1a;分治法 第三题 题目来源 题目内容 解…...

编程日记 2023/9/21 0:09:08

AUTOSAR汽车电子嵌入式编程精讲300篇-车载CAN总线网络的异常检测（续）

目录 车载 CAN 总线网络异常检测技术 3.1 车载 CAN 总线网络异常检测技术概述 3.1.1基于统计的异...

编程日记 2023/9/21 0:07:06

mojo安装

docker安装mojo 官网 https://developer.modular.com/login 很奇怪登录页面不显示 类似于网站劫持 docker 安装mojo带jupyterlab的方式 https://hub.docker.com/r/lmq886/mojojupyterlab 拉取镜像 docker pull lmq886/mojojupyterlab docker pull lmq886/mojojupyterlab:1.2 启…...

编程日记 2023/9/21 0:06:05

【探索Linux】—— 强大的命令行工具 P.8（进程地址空间）

阅读导航 前言一、内存空间分布二、什么是进程地址空间1. 概念2. 进程地址空间的组成 三、进程地址空间的设计原理1. 基本原理2. 虚拟地址空间 概念 大小和范围 作用 虚拟地址空间的优点 3. 页表 四、为什么要有地址空间五、总结温馨提示 前言 前面我们讲了C语言的基础知识&am…...

编程日记 2023/9/21 0:05:05

vue3 - Element Plus 切换主题色及el-button hover颜色不生效的解决方法

GitHub Demo 地址 在线预览 Element Plus 自定义主题官方文档 如果您想要通过 js 控制 css 变量&#xff0c;可以这样做&#xff1a; // document.documentElement 是全局变量时 const el document.documentElement // const el document.getElementById(xxx)// 获取 css 变…...

编程日记 2023/9/21 0:03:03

【C++面向对象侯捷】1.C++编程简介

文章目录 视频来源&#xff1a;我的百度网盘...

编程日记 2023/9/21 0:02:02

年龄大了转嵌入式有机会吗？

年龄大了转嵌入式有机会吗&#xff1f; 首先&#xff0c;说下结论&#xff1a;年龄并不是限制转行嵌入式软件开发的因素&#xff0c;只要具备一定的编程和电子基础知识&#xff0c;认真学习和实践&#xff0c;是可以成为优秀的嵌入式软件开发工程师的。最近很多小伙伴找我&…...

编程日记 2023/9/20 23:56:56

Mysql高级——索引优化和查询优化（2）

5. 排序优化 5.1 排序优化 问题&#xff1a;在 WHERE 条件字段上加索引&#xff0c;但是为什么在 ORDER BY 字段上还要加索引呢&#xff1f; 优化建议&#xff1a; SQL 中&#xff0c;可以在 WHERE 子句和 ORDER BY 子句中使用索引&#xff0c;目的是在 WHERE 子句中避免全表…...

编程日记 2023/9/20 23:55:55

SpringMVC的拦截器和JSR303的使用

目录 一、JSR303 二、拦截器&#xff08;interceptor&#xff09; 一、JSR303 1.1.什么是JSR303 JSR 303&#xff0c;它是Java EE&#xff08;现在称为Jakarta EE&#xff09;规范中的一部分。JSR 303定义了一种用于验证Java对象的标准规范&#xff0c;也称为Bean验证。 Bean验…...

编程日记 2023/9/20 23:54:54

servlet中doGet方法无法读取body中的数据

servlet中doGet方法不支持读取body中的数据。...

编程日记 2023/9/20 23:53:53

Ubuntu MongoDB账户密码设置

1.创建用户 在MongoDB中&#xff0c;可以使用db.createUser()方法来创建用户。该方法接受一个包含用户名、密码和角色等信息的文档作为参数。 // 连接到MongoDB数据库 mongo// 切换到admin数据库 use admin// 创建用户 db.createUser({user: "admin",pwd: "adm…...

编程日记 2023/9/20 23:52:53

指针进阶（3）

9. 模拟实现排序函数 这里我们使用冒泡排序算法&#xff0c;模拟实现一个排序函数&#xff0c;可以排序任意类型的数据。 这段代码可以排序整型数据&#xff0c;我们需要在这段代码的基础上进行改进&#xff0c;使得它可以排序任意类型的数据。 #define _CRT_SECURE_NO_WARN…...

编程日记 2023/9/20 23:49:46

信息检索与数据挖掘 | （二）布尔检索与倒排索引

文章目录 &#x1f4da;词项-文档关联矩阵&#x1f407;相关名词&#x1f407;词项-文档关联矩阵的布尔查询处理 &#x1f4da;倒排索引&#x1f407;关于索引&#x1f407;建立索引&#x1f407;基于倒排索引的布尔查询处理&#x1f407;查询优化 &#x1f4da;字典数据结构&a…...

编程日记 2023/9/20 23:48:45

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/8 20:42:46

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/2/9 4:25:05