javascript - 正则表达式 - 抓取所有 标签

Question

假设我有一个 string(不是 HTML——来自后端，我收到的是字符串。我只是以这种方式格式化以便于阅读 dom 树):

<ul>
    <li>
        <a href="link1">Link1</a>
        <a href="link2>Link2</a>
    </li>
    <li>
        <a href="link3">Link3</a>
        <a href="link4>Link4</a>
    </li>
</ul>

我怎样才能在 li 标签中抓取并按原样检索:

[
    [<a href="link1">Link1</a>, <a href="link2>Link2</a>], 
    [<a href="link3">Link3</a>,  <a href="link4>Link4</a>]
]

我假设您需要正则表达式来实现这一点(没有 jQuery)。

Answer 1

将字符串包装在一个 div 中并使用 DOM 方法访问链接。不建议使用 RegEx 解析 HTML

var html = `<ul>
  <li>
    <a href="link1">Link1</a>
    <a href="link2">Link2</a>
    </li>
    <li>
        <a href="link3">Link3</a>
        <a href="link4">Link4</a>
  </li>
</ul>`;

var div = document.createElement('div');
div.innerHTML=html;

// version 1 - just get all links in the string/div
var linksCollection = div.querySelectorAll("a"); // will have some more stuff in it

// version 2 loop each LI and then each A
var lis = div.querySelectorAll("li"),liArr = [];
for (var i = 0; i < lis.length; i++) { // querySelectorAll is array-like
  var links = lis[i].querySelectorAll("a"), hrefArr=[];
  for (var j = 0; j < links.length; j++) {
    hrefArr.push(links[i].outerHTML);
  }
  liArr.push(hrefArr);
}
console.log(linksCollection)
console.log(liArr)