网站搭建技术要求,爱做网站网址,网上做网站网站代理赚钱吗,软件开发人员外包前言
从html字符串中提取出来目录。 目标和源内容都很明确#xff0c;源内容是html字符串#xff0c;提取目标是html字符串中h1~h6元素和其闭合标签中间的内容。
思路
分析
获取html字符串
第一步要获取html字符串内容。
观察html字符串
第二步#xff0c; 观察html字…前言
从html字符串中提取出来目录。 目标和源内容都很明确源内容是html字符串提取目标是html字符串中h1~h6元素和其闭合标签中间的内容。
思路
分析
获取html字符串
第一步要获取html字符串内容。
观察html字符串
第二步 观察html字符串并设计适合提取所需部分内容的正则
将提取内容转换成a链接列表
第三步将提取的内容转成a链接列表这就是目录了样式和其他附属功能自行设计。 注意 a链接锚点跳转指定位置是从视口顶部为基准的如果你顶部有其他遮挡物例如固定定位导航栏则会被遮挡这时候就需要锚点偏移导航高度的距离。 实现
获取html字符串
我这里直接获取了。类似于这样的内容
h1a id\_0\/a前言/h1\npcanvas内的显示内容如何拖动br /\n这里提供一个 canvas内矩形移动的解决思路。br /\nimg src\https://img-blog.csdnimg.cn/95b67cea8c964e3398c19cc4ff74b393.png\ alt\在这里插入图片描述\ //p\npimg src\https://img-blog.csdnimg.cn/89c65dea74dc43b095607f6c57ce8210.png\ alt\在这里插入图片描述\ //p\nh1a id\_7\/a描述/h1\npstrong如何选中canvas里的某部分矩形内容然后进行拖动/strongbr /观察字符串
观察上面的字符串提出h1~h6元素和其中的内容即可作为目录其中内容可能是任意内容。
正则设计
刚好复习下js的正则。MDN正则链接 正则设计思路
前面是h1“…到”h2的内容则正则为 /h[1-6]/。后面肯定是前面相对的闭合标签则正则为//h[1-6]/。中间包括任何内容。任何内容我理解为啥都行啥的匹配则正则为 [\w | \W]*? ,注意这里很巧妙[\w|\W]*代表任何内容的0到无数次*后面再加则变成非贪婪模式就是最小最短匹配。使用全局匹配加g。 最后我设计的正则为
/h([1-6])[\w|\W]*?\/h\1/g我前面加了个捕获组后面使用\1可以对应起来如果你还想将标签内的内容存储起来则需要括起来获取指定捕获组名称(?Namex)x为要捕获的正则项。
提取内容转成a链接列表。
let contenth1a id\_0\/a前言/h1\npcanvas内的显示内容如何拖动br /\n这里提供一个 canvas内矩形移动的解决思路。br /\nimg src\https://img-blog.csdnimg.cn/95b67cea8c964e3398c19cc4ff74b393.png\ alt\在这里插入图片描述\ //p\npimg src\https://img-blog.csdnimg.cn/89c65dea74dc43b095607f6c57ce8210.png\ alt\在这里插入图片描述\ //p\nh1a 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;
}效果 结语
结束了。
