根据关键字正则匹配HTML标签

Question

需要匹配的字符串：

边界值<div id="tag">b</div>边界值
边界值<img id="tag"/>边界值
边界值<img id="tag" />边界值
边界值<div id='tag'>a</div>
<div id='tag' >a</div>边界值

现有需求：根据id值匹配出标签及其内容（单双）例如：<img id="tag"/>或者<div id="tag">b</div>
我的正则：<[^>]+id\=[' | "]tag[' | "].*?[^>]+>; 无法完全匹配
请帮忙修正，谢谢

Answer 1

写的有些丑陋……不过好像匹配出来了

function regTest(reg) {
  var $htmls = [
    '<div id="tag">b</div>',
    '<img id="tag"/>gdf',
    '<img id="tag" />gdf',
    '<div id=\'tag\'>a</div>',
    '<div id=\'tag\' >a</div>'
  ]
  return rets = $htmls.map((el, i) => reg.test(el) && el.match(reg)[0])
}

var regexp = /(<[^>]+id\=('|")tag\1[^<]*\/>)|(<[^<]+id\=('|")tag\2[^<]+<\/[^>]+>)/


console.log(regTest(regexp))

Answer 2

表示或的关系，你怎么写成了[' | "]，直接['"]不就行了？？