【前端】利用正则生成目录,附加解决a链接锚点偏移

前言

从html字符串中提取出来目录。
目标和源内容都很明确,源内容是html字符串,提取目标是html字符串中h1~h6元素和其闭合标签中间的内容

思路

分析

获取html字符串

第一步要获取html字符串内容。

观察html字符串

第二步, 观察html字符串,并设计适合提取所需部分内容的正则

将提取内容转换成a链接列表

第三步,将提取的内容转成a链接列表,这就是目录了,样式和其他附属功能自行设计。

注意 :a链接锚点跳转指定位置,是从视口顶部为基准的,如果你顶部有其他遮挡物,例如固定定位导航栏,则会被遮挡,这时候就需要锚点偏移导航高度的距离。

实现

获取html字符串

我这里直接获取了。类似于这样的内容:

<h1><a id=\"_0\"></a>前言</h1>\n<p>canvas内的显示内容如何拖动?<br />\n这里提供一个 canvas内矩形移动的解决思路。<br />\n<img src=\"https://img-blog.csdnimg.cn/95b67cea8c964e3398c19cc4ff74b393.png\" alt=\"在这里插入图片描述\" /></p>\n<p><img src=\"https://img-blog.csdnimg.cn/89c65dea74dc43b095607f6c57ce8210.png\" alt=\"在这里插入图片描述\" /></p>\n<h1><a id=\"_7\"></a>描述</h1>\n<p><strong>如何选中canvas里的某部分矩形内容,然后进行拖动?</strong><br />

观察字符串

观察上面的字符串,提出h1~h6元素和其中的内容即可作为目录,其中内容可能是任意内容。

正则设计

刚好复习下js的正则。MDN正则链接
正则设计思路:

  1. 前面是"<h1>“…到”<h2>"的内容,则正则为: /<h[1-6]>/。
  2. 后面肯定是前面相对的闭合标签,则正则为:/</h[1-6]>/。
  3. 中间包括任何内容。任何内容我理解为啥都行,啥的匹配,则正则为 [\w | \W]*? ,注意这里很巧妙,[\w|\W]*代表任何内容的0到无数次,*后面再加?则变成非贪婪模式,就是最小(最短)匹配。
  4. 使用全局匹配,加g。
    最后,我设计的正则为
/<h([1-6])>[\w|\W]*?<\/h\1>/g

我前面加了个()捕获组,后面使用\1,可以对应起来,如果你还想将标签内的内容存储起来,则需要()括起来,获取指定捕获组名称(?<Name>x),x为要捕获的正则项。

提取内容转成a链接列表。

let content="<h1><a id=\"_0\"></a>前言</h1>\n<p>canvas内的显示内容如何拖动?<br />\n这里提供一个 canvas内矩形移动的解决思路。<br />\n<img src=\"https://img-blog.csdnimg.cn/95b67cea8c964e3398c19cc4ff74b393.png\" alt=\"在这里插入图片描述\" /></p>\n<p><img src=\"https://img-blog.csdnimg.cn/89c65dea74dc43b095607f6c57ce8210.png\" alt=\"在这里插入图片描述\" /></p>\n<h1><a id=\"_7\"></a>描述</h1>"
const regex = /<h([1-6])>[\w|\W]*?<\/h\1>/glet arr = content.match(regex);

结果和下图类似就成功:
在这里插入图片描述

转a链接

上面提取内容发现a链接没内容,内容再</a>和</h[1-6]>内,所以需要提取下然后替换。

 arr = arr? arr.map((item: string) => {let str = item.replace('id="', 'target="_self" href="#');let s1 = str.match(/<\/a>(?<text>[\w| \W]+)<\/h[1-6]>/);str = str.replace('</a>' + s1.groups.text, s1.groups.text + '</a>');return str;}): [];

转后结果:
在这里插入图片描述
上面的就是a链接html字符串列表。把他和html字符串同一面显示即可生效。

优化

实现锚点链接滚动有简单过渡效果

html {scroll-behavior: smooth;
}

解决锚点跳转偏移。

给html字符串中a链接添加padding-top=要偏移的距离。
实测可行,建议加全局属性需慎重,最后前面加限制范围,刚好只影响你当前页面即可。
例如:

.markdown-body a {padding-top: 88px !important;
}

效果

在这里插入图片描述

结语

结束了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/189839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

breadpad安装

https://github.com/google/breakpad这里的方法&#xff0c;但是有几个问题&#xff0c; 第一&#xff0c;要自己看第一行&#xff0c;fetch你没找到&#xff0c;是因为要安装的 git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git export PATH/pa…

Opencv制作电子签名(涉及知识点:像素过滤,图片通用resize函数,像素大于某个阈值则赋值为其它的像素值)

import cv2def resize_by_ratio(image, widthNone, heightNone, intercv2.INTER_AREA):img_new_size None(h, w) image.shape[:2] # 获得高度和宽度if width is None and height is None: # 如果输入的宽度和高度都为空return image # 直接返回原图if width is None:h_ratio …

flutter 自定义TabBar 【top 0 级别】

flutter 自定义TabBar 【top 0 级别】 前言一、基础widget二、tab 标签三、barView总结 前言 在日常开发中&#xff0c;tab 标签选项&#xff0c;是一个我们特别常用的一个组件了&#xff0c;往往我们在一个项目中&#xff0c;有很多地方会使用到它&#xff0c;每次单独去写&am…

Kibana使用指南

使用介绍主要特点应用场景数据可视化还有哪些类型安装步骤安装配置参数Elasticsearch配置参数注意事项 使用介绍 Kibana是一个开源的分析与可视化平台&#xff0c;设计出来用于和Elasticsearch一起使用的。可以用Kibana搜索、查看、交互存放在Elasticsearch索引里的数据&#…

基于binlog实现一些业务(Binlog4j)

前言 今天要跟大家分享的是监控数据变化&#xff0c;实现自己的业务的另一个思路&#xff0c;基于数据库的binglog。我这里是用的Binlog4j实现&#xff0c;希望看总结的&#xff0c;直接看最后。 一、Binlog4j是什么&#xff1f; Binlog4j是轻量级 Mysql Binlog 客户端, 提供宕…

2022年03月22日 Go生态洞察:泛型介绍

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

HT71778 实时音频信号跟踪同步升压转换器的特性

HT71778是一款高功率、全集成升压转换器&#xff0c;集成16mΩ功率开关管和18mΩ同步整流管&#xff0c;为便携式系统提供G效的小尺寸处理方案。 HT71778 实时音频信号跟踪同步升压转换器的特性&#xff1a; ・实时音频信号跟踪的电源供电 SN 短接地, VIN 2.7~4.5V, VOUT 5…

Hdoop学习笔记(HDP)-Part.02 核心组件原理

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

Redis - 多数据源切换

问题描述 最近遇到一个 Redis 多数据源切换问题&#xff0c;不过我这个没有那么动态切换需求&#xff0c;所以就写了一种比较硬编码的方式来做『切换』 其实大概的场景是这样的&#xff1a;不同的开发环境调用 db0、生产环境调用 db1&#xff0c;但是因为业务原因&#xff0c…

python绘制皮卡丘

1.源代码 import turtle as t import time # 皮卡丘 # 基础设置 t.screensize(800, 600) t.pensize(2) # 设置画笔的大小 t.speed(10) # 设置画笔速度为10 # 画左偏曲线函数 def radian_left(ang, dis, step, n):for i in range(n):dis step # dis增大stept.lt(ang) # 向左…

二、ZooKeeper集群搭建

目录 1、概述 2、安装 2.1 第一步&#xff1a;下载zookeeeper压缩包 2.2 第二步&#xff1a;解压 ​​​​​​​2.3 第三步&#xff1a;修改配置文件 ​​​​​​​2.4 第四步&#xff1a;添加myid配置 ​​​​​​​2.5 第五步&#xff1a;安装包分发并修改myid的值…

《微信小程序开发从入门到实战》学习三十八

4.2 云开发JSON数据库 4.2.9 条件查询与查询指令 在查询数据时&#xff0c;有时需要对查找的数据添加一些限定条件&#xff0c;只获取满足给定条件的数据&#xff0c;这样的查询称为条件查询。 可以在集合引用上使用where方法指定查询条件&#xff0c;再用get方法&#xff0…

IBL环境贴图原理及着色器实现【基于图像的照明】

IBL - Image Based Lighting - 也就是基于图像的照明&#xff0c;是一组照亮物体的技术&#xff0c;不是像上一章那样通过直接分析光&#xff0c;而是将周围环境视为一个大光源。 这通常是通过操作立方体贴图环境贴图&#xff08;取自现实世界或从 3D 场景生成&#xff09;来完…

基于hadoop下的hbase安装

简介 HBase是一个分布式的、面向列的开源数据库&#xff0c;该技术来源于Fay Chang所撰写的Google论文“Bigtable&#xff1a;一个结构化数据的分布式存储系统”。就像Bigtable利用了Google文件系统&#xff08;File System&#xff09;所提供的分布式数据存储一样&#xff0c;…

php 使用多线程

fpm cli socket redis PHP多线程-阿里云开发者社区 常驻内存&#xff1a;op cli EasyTask: PHP常驻内存多进程任务管理器&#xff0c;支持定时任务(PHP resident memory multi-process task manager, supports timing tasks) 协程&#xff1a;swoole Swoole - PHP 协…

YOLOv8创新魔改教程(一)如何进行模块创新

YOLOv8创新魔改教程&#xff08;一&#xff09;如何进行模块创新 YOLOv8创新魔改教程 本人研一&#xff0c;最近好多朋友问我要如何修改模型创新模块&#xff0c;就想着不如直接开个专栏歇一歇文章&#xff0c;也算是对自己学习的总结&#xff0c;本专栏以YOLOv8为例&#xf…

「C++」类和对象2

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;前言&#x1f349;构造函数&#x1f34c;参数&#x1f34c;默认构造函数&#x1f95d;两种类型&#x1f95d;编译…

CentOS系统环境搭建(二十四)——借助Git实现一键部署

centos系统环境搭建专栏&#x1f517;点击跳转 文章目录 如何一键部署1.后端1.1 拉取代码1.2 打包1.2.1 如果打包没问题&#xff0c;只看这部分即可1.2.2 maven有问题看这一部分1.2.2.1 安装jdk1.2.2.2 Jdk路径寻找&#xff0c;使用命令1.2.2.3 由此可知&#xff0c;jdk路径为…

优化问题,详解静态优化

优化问题&#xff0c;尤其静态优化问题&#xff0c;在控制系统设计中随处可见&#xff0c;例如基于燃油经济性和驾驶体验的多目标优化的汽车发动机 MAP 标定&#xff0c;基于性能指标优化的飞行器结构设计参数优化&#xff0c;以实验数据与模型输出匹配为目标的电池 RC 等效电路…

K8S集群搭建redis集群的步骤

在Kubernetes&#xff08;K8s&#xff09;集群上搭建Redis集群涉及多个步骤&#xff0c;包括创建配置文件、部署StatefulSets和设置网络。以下是一个基本指南&#xff1a; 1. 准备Redis配置文件 首先&#xff0c;创建一个Redis配置文件&#xff08;redis.conf&#xff09;&am…