根据 html string 获取所有的 a 标签

[fedono]

extract(`
<div>
    <a>link1< / a><a href="https://bfe.dev">link1< / a>
    <div<abbr>bfe</abbr>div>
    <div>
<abbr>bfe</abbr><a href="https://bfe.dev" class="link2"> <abbr>bfe</abbr>   <span class="l">l</span><span  class="i">i</span>   nk2   </a>
    </div>
</div>
`)

// [
//    '<a>link1< / a>',
//    '<a href="https://bfe.dev">link1< / a>',
//    '<a href="https://bfe.dev" class="link2"> <abbr>bfe</abbr>   <span class="l">l</span><span  //class="i">i</span>   nk2   </a>'
 //]

解答

/**
 * @param {string} str
 * @return {string[]}
 */
function extract(str) {
  // your code here

  let a = new DOMParser();
  let c = a.parseFromString(str, "text/html");
  let d = document.createTreeWalker(c, NodeFilter.SHOW_ELEMENT)
  let curr = d.currentNode;
  let res = [];
  while(curr){
    if(curr.nodeName === "A") res.push(curr.outerHTML);
    curr = d.nextNode()
  }
  return res;
}

这里同样可以获取到所有的节点，使用 d.nextNode() 可以不断获取到整个 DOM 结构所有的节点

当然，还可以使用正则的方式来解决这种问题

function extract(str) {
  return str.match(/<a(\s[^>]*)?>.*?<\s*\/\s*a>/g) || [];
}