JS 如何使用正则表达式解析html文本？

Question

场景

想要拿到里面的每个a标签的href地址，正则表达式要怎么写？

尝试

// s就是上图里的这一段html文本字符串
const r1 = s.match(/活动开展情况[\s\S]*<\/ul>/g)[0]
const r2 = r1.match(/(?<=href=").*?(?=")/g)

问题

上述两行代码匹配到的r2结果数组中，还包含#、javascript:void(0)，而我希望匹配到的范围就是从 “活动开展情况”开始，到第一个出现的“</ul>”为止。现在的结果显然是不对的。

请问这个正则应该怎么写？

附上要匹配的html代码段

<a href="#">活动开展情况</a>
  <ul>
    <li> <a href="/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=3"
        target="navTab" rel="SportInfo_SportInfo_JSGZ_3" title="安全教育日"> 安全教育日 </a>
    </li>
    <li> <a href="/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=4"
        target="navTab" rel="SportInfo_SportInfo_JSGZ_4" title="防溺水教育"> 防溺水教育 </a>
    </li>
    <li> <a href="/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=6"
        target="navTab" rel="SportInfo_SportInfo_JSGZ_6" title="415国家安全"> 415国家安全 </a>
    </li>
    <li> <a href="/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=9"
        target="navTab" rel="SportInfo_SportInfo_JSGZ_9" title="512防灾减灾"> 512防灾减灾 </a>
    </li>
    <li> <a href="/eduadmin/DevelopActivity/SystemActivityManage/2/-1" target="navTab"
        rel="SystemActivity_Manage2"> 平安暑假 </a> </li>
  </ul>
</li>
<li id="teaccher_special"> <a href="#">其他专题开展情况</a>
  <ul>
    <li> <a href="javascript:void(0)" onclick="return false"> 没有开展专题课 </a> </li>
  </ul>
</li>

Answer 1

自己写正则容易误配，建议用 html 解析器，安全稳妥，浏览器端可以用 document.createElement + innerHTML、DOMParser、jq，以 jq 为例

$(html).find('>li>a').map((_, a) => $(a).attr('href')) // jq
[...$(html).find('>li>a')].map(a => $(a).attr('href')) // Array
// jq 转 Array 可用 [...jq], jq.toArray(), Array.from(jq, mapfn)
// 如需完整 URL, $(a).attr('href') 改为 a.href

[
    "/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=3",
    "/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=4",
    "/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=6",
    "/eduadmin/SpecialInfo/SpecialInfo?AreaID=533167224&AreaType=1&SpecialCode=9",
    "/eduadmin/DevelopActivity/SystemActivityManage/2/-1"
]

Answer 2

/活动开展情况[\s\S]*<\/ul>/g -> /活动开展情况[\s\S]*?<\/ul>/g

JS 正则是默认贪婪的，因此你的正则会匹配到外层 </ul>