正则提取文章里面的一级标题和对应的一级标题内容

最近公司项目有个需求，富文本编辑器上传一篇文章后，需要对文章内容里面的一级标题和对应的标题内容做提取处理，然后文章展示的时候就可以用来做锚链接导航处理。

此功能主要用到了以下正则

const reg = /<h1(([\s\S])*?)<\/h1>/g

改正则用来提取h1标题及其标签里面的内容，改下标签就可以用来提取任意标签内容了。

一、一级标签提取

具体代码：

const article = '<div data-v-65f82510=""><div data-v-65f82510=""><div data-v-65f82510=""><h1><span id="v-234f23d">扩展现实</span></h1><div>扩展现实（XR）技术将现实世界和数字世界结合前来，创造出新的交互和感知，可细分为虚拟现实（VR）、增强现实（AR）、混合现实（MR）技术。<br/></div><h1>概念</h1><div>扩展现实是连接或融合数字世界和现实世界的一系列技术的总称，包括虚拟现实、增强现实、混合现实技术，可带来包含各种程度数字信息和真实信息的沉浸式体验。<br/></div><h1>使能技术</h1><div>扩展现实技术的发展有赖于一系列使能技术的的发展，如人工智能、5G、边缘计算等。人工智能可以解读大规模数据，为用户提供个性化、高度互动的扩展现实体验。<br/></div><h1>工作原理</h1><div>扩展现实设备向人类感官发送本地存储或通过网络共享、传输的数字信息，也可以使用传感器收集信息并接受指令，主要通过实现对虚拟刺激的实时反应，创造个性化的体验。<br/></div><h1>发展现状</h1><div>尽管扩展现实已经存在几十年，但其并未实现广泛应用。到2022年1月，已有多种扩展现实硬件系统和软件开发平台在市场上可见，其市场正在迅速扩大。<br/></div><h1>机遇和应用</h1><div>扩展现实技术可用于工作场所协作、培训、教育、治疗及数据利用和分析，也支持创建在线世界或称“元宇宙”（用户可以在其中相互交流）。<br/></div><h1>当前挑战</h1><div>一是网络安全和隐私。扩展现实将需要更加多样化和复杂的数据，这就为网络攻击和利用提供了新的目标。<br/></div><h1>军事应用</h1><div>美国军方正在探索一系列扩展现实应用，包括战术、飞行、维修、医疗和其他训练、培训以及作战，每个军种都有研发项目。<br/></div></div></div></div>';

const reg = /<h1(([\s\S])*?)<\/h1>/g;

const menu = article.match(reg); // 此时就可以获取到一级标题了，但是带有h1标签和其他一些不可预见的标签，可以用v-html进行渲染展示，如果是要获取纯文本，还需做如下的一些替换处理

let menuText = []

menu.forEach(item => {
    let s = item.replace('</h1>','').replace(/<h1(([\s\S])*?)>/g,'');
    if(s.indexOf('</span>') !== -1) 
        s = s.replace('</span>','').replace(/<span(([\s\S])*?)>/g,''); // 过滤其他标签
    menuText.push(s);
})

效果：

 二、标题对应内容提取

标题内容提取，可以从</h1>开始匹配到下一个<h1标签，然后再把</h1>和最后一个<h1替换掉，最后通过split切割获取最后一个标题的内容，但是split切割后标签的闭合有可能会有问题（多了闭合的标签，但是发现即使这样，vue的v-html渲染也不会出错，所以就先这样处理了）。大家如果有好的方法欢迎评论指导。

具体代码：

const article = '<div data-v-65f82510=""><div data-v-65f82510=""><div data-v-65f82510=""><h1><span id="v-234f23d">扩展现实</span></h1><div>扩展现实（XR）技术将现实世界和数字世界结合前来，创造出新的交互和感知，可细分为虚拟现实（VR）、增强现实（AR）、混合现实（MR）技术。<br/></div><h1>概念</h1><div>扩展现实是连接或融合数字世界和现实世界的一系列技术的总称，包括虚拟现实、增强现实、混合现实技术，可带来包含各种程度数字信息和真实信息的沉浸式体验。<br/></div><h1>使能技术</h1><div>扩展现实技术的发展有赖于一系列使能技术的的发展，如人工智能、5G、边缘计算等。人工智能可以解读大规模数据，为用户提供个性化、高度互动的扩展现实体验。<br/></div><h1>工作原理</h1><div>扩展现实设备向人类感官发送本地存储或通过网络共享、传输的数字信息，也可以使用传感器收集信息并接受指令，主要通过实现对虚拟刺激的实时反应，创造个性化的体验。<br/></div><h1>发展现状</h1><div>尽管扩展现实已经存在几十年，但其并未实现广泛应用。到2022年1月，已有多种扩展现实硬件系统和软件开发平台在市场上可见，其市场正在迅速扩大。<br/></div><h1>机遇和应用</h1><div>扩展现实技术可用于工作场所协作、培训、教育、治疗及数据利用和分析，也支持创建在线世界或称“元宇宙”（用户可以在其中相互交流）。<br/></div><h1>当前挑战</h1><div>一是网络安全和隐私。扩展现实将需要更加多样化和复杂的数据，这就为网络攻击和利用提供了新的目标。<br/></div><h1>军事应用</h1><div>美国军方正在探索一系列扩展现实应用，包括战术、飞行、维修、医疗和其他训练、培训以及作战，每个军种都有研发项目。<br/></div></div></div></div>';

const reg = /<\/h1>(([\s\S])*?)<h1/g;

const arr = article.match(reg);

let contents = []
arr.forEach(item => {
    const content = item.replace('</h1>','').replace('<h1','')
    contents.push(content)
})

// 再通过split分割获取最后一个标题的内容
const con = article.split('</h1>');
contents.push(con[con.length-1]);

效果：