如何给一个html字符串添加锚点

  • Z时代
  • 2024-03-15
  • 分类：IT

如何给一个html字符串添加锚点

本来的想法是用antd-vue的Anchor组件，但发现需要的数据为一个数组对象

html字符串片段为(h1-h6都是同样)：

const htmlStr = "<h3><a id="__4"></a>特性</h3><ul><li> 关键字</li>是<li>内部</li></ul><h3><a id="__13"></a>介绍</h3><p>简单</p><span class="hljs-comment">函数</span><p>先使用</p><h3><a id="_39"></a>转换</h3><h3><a id="__65"></a>模式</h3><h4><a id="__70"></a>匿</h4><h4><a id="__88"></a>赋值</h4>"

如何提取h1-h6里面的内容，然后处理为数组对象的数据格式，类似：

const htmlArr = [{id:'', name: ''}, {id: '', name: ''}, ...]

id为自增，name为提取的h1-h6的文字内容

或者有没有其他更好的方法，用这个html字符串实现Anchor组件类似的锚点效果

补充一下：这个字符串是在vue里用v-html渲染在页面上的

回答：

有没有其他更好的方法还需要再研究，提取你要的内容倒比较简单

function getAnchor(str) {
  let res = null;
  const exp = /<(h[1-6])>.*?(?<=<\/a>)(.*?)<\/\1>/g;
  const htmlArr = [];
  while(res = exp.exec(str)) {
    const [, level, name] = res;
    htmlArr.push({
      id: htmlArr.length,
      name,
      level
    })
  }
  return htmlArr
}
getAnchor(htmlStr)

以上是 如何给一个html字符串添加锚点 的全部内容， 来源链接： utcz.com/p/936872.html

回到顶部