如何在没有多个try-catch函数的情况下合并多个RegEx对象

Question

变量htmlStr可能包含id的不同拼写：

var htmlStr = "<div id="demo_div"></div>";

var htmlStr = "<div id='demo_div'></div>";

var htmlStr = "<div id=demo_div class="demo"></div>";

var htmlStr = "<div id=demo_div></div>";

在没有许多try-catch函数的情况下，我该怎么写呢？我可以合并模式吗？它可以工作-但看起来并不漂亮。

var idname;
try {
    idname = /(id="(.*?)(\"))/g.exec(htmlStr)[2]
} catch (e) {
    try {
        idname = /(id='(.*?)(\'))/g.exec(htmlStr)[2]
    } catch (e) {
        try {
            idname = /(id=(.*?)(\ ))/g.exec(htmlStr)[2]
        } catch (e) {
            try {
                idname = /(id=(.*?)(\>))/g.exec(htmlStr)[2]
            } catch (e) {
                console.log(e);
            }
        }
    }
}

console.log(idname);

Answer 1

您可以通过简单地解析HTML而无需使用正则表达式来做到这一点。

const htmlStrings = [
  '<div id="demo_div"></div>',
  "<div id='demo_div'></div>",
  "<div id=demo_div class='demo'></div>",
  '<div data-id="not_a_real_id"></div>', //note: doesn't have an ID 
  "<div data-id=not_an_id ID= demo_div></div>", 
  "<div id= demo_div><span id=inner_id></span></div>"
];

function getId(html) {
  const parser = document.createElement('div');
  parser.innerHTML = html;
  
  return parser.firstChild.id;
}

htmlStrings.forEach(x => console.log(getId(x)));

如您所见，您可以创建一个元素，将HTML放入其中，然后抓住第一个孩子并检查其ID。即使您具有另一种类型的属性（如名为data-id的自定义属性），或者ID具有任何大写形式，或者即使该div具有内部元素或其他任何内容，它也可以使用。

此技术不适用于无效的HTML，或者如果您有多个元素想要ID，但这只是为了演示它。将其解析为适当的元素后，您可以遍历其认为合适的层次结构并执行所需的任何提取。

Answer 2

/id=["']?([^\s"'>]+)/g

这将匹配所有四个示例。