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

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

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…...

深入学习 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、过期时间续约问题&…...

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

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

TypeScript系列之类型 string

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

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

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

AMS爆炸来袭,上线即巅峰

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

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

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

怒刷LeetCode的第2天(Java版)

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

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

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

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 启…...

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

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

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 变…...

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

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

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

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

Mysql高级——索引优化和查询优化(2)

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

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验…...

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

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

Ubuntu MongoDB账户密码设置

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

指针进阶(3)

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

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

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

APISIX Dashboard实战:从零配置JWT认证网关(含Node.js后端对接)

APISIX Dashboard实战&#xff1a;从零构建JWT认证网关与Node.js后端深度集成 引言&#xff1a;为什么选择APISIX作为API网关&#xff1f; 在现代微服务架构中&#xff0c;API网关扮演着流量调度和安全防护的双重角色。APISIX作为云原生API网关的佼佼者&#xff0c;凭借其动态…...

同架构大数据量HGDB到HGDB数据迁移

文章目录环境文档用途详细信息环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7,银河麒麟 &#xff08;X86_64&#xff09; 版本&#xff1a;4.5.8 文档用途 本文介绍同架构大数据量情况下&#xff0c;为了减少停机时间&#xff0c;先搭建流复制同步数据&…...

WebSocket代理避坑指南:Nginx中proxy_set_header的3个关键配置项

WebSocket代理实战&#xff1a;Nginx中proxy_set_header的3个黄金法则 当在线聊天室的用户突然集体掉线&#xff0c;或是实时协作文档频繁失去同步时&#xff0c;问题往往藏在那些容易被忽视的HTTP头信息里。WebSocket作为现代实时应用的血管&#xff0c;其代理配置的精细程度直…...

CTF是什么?一文带你读懂网络安全大赛

CTF是什么&#xff1f;一文带你读懂网络安全大赛 前言 随着大数据、人工智能的发展&#xff0c;人们步入了新的时代&#xff0c;逐渐走上科技的巅峰。 科技是一把双刃剑&#xff0c;网络安全不容忽视&#xff0c;人们的隐私在大数据面前暴露无遗&#xff0c;账户被盗、资金损失…...

brpc并发编程模型性能对比:基准测试结果

brpc并发编程模型性能对比&#xff1a;基准测试结果 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendation etc. &…...

nlp_structbert_sentence-similarity_chinese-large实战教程:本地知识库向量化检索完整指南

nlp_structbert_sentence-similarity_chinese-large实战教程&#xff1a;本地知识库向量化检索完整指南 你是不是经常遇到这样的问题&#xff1a;面对公司内部堆积如山的文档、产品手册、客服记录&#xff0c;想找某个特定信息时&#xff0c;却像大海捞针一样困难&#xff1f;…...

Pixel Mind Decoder 多模型协作:与Ollama本地模型联合作业

Pixel Mind Decoder 多模型协作&#xff1a;与Ollama本地模型联合作业 1. 引言&#xff1a;当AI模型开始团队合作 想象一下这样的场景&#xff1a;你手头有一份长达50页的市场调研报告&#xff0c;需要快速提炼核心观点并分析其中的情绪倾向。传统做法可能需要先人工阅读总结…...

多模态扩展实验:OpenClaw+Qwen3-32B处理图片描述生成

多模态扩展实验&#xff1a;OpenClawQwen3-32B处理图片描述生成 1. 实验背景与动机 最近在探索如何将OpenClaw的自动化能力扩展到视觉领域。作为一个长期依赖文本交互的框架&#xff0c;OpenClaw能否结合多模态大模型处理图像任务&#xff1f;这引发了我的兴趣。恰好手头有台…...

在构建高并发、海量数据的分布式系统时,数据存储与治理是核心挑战。单机数据库的性能瓶颈、ID 冲突、历史数据膨胀等问题,都需要通过架构层面的设计来解决

在构建高并发、海量数据的分布式系统时&#xff0c;数据存储与治理是核心挑战。单机数据库的性能瓶颈、ID 冲突、历史数据膨胀等问题&#xff0c;都需要通过架构层面的设计来解决。 以下结合具体业务场景&#xff0c;深度解析分布式 ID、分库分表、数据迁移与冷热分离的内部机制…...

使用Dependency Check命令行工具高效检测Java项目中的安全漏洞

1. 为什么Java开发者需要关注依赖库安全&#xff1f; 如果你是一名Java开发者&#xff0c;可能经常遇到这样的情况&#xff1a;项目运行得好好的&#xff0c;突然某天系统被入侵了&#xff0c;排查半天才发现是某个第三方库存在安全漏洞。这种情况在现实开发中并不少见&#xf…...