javascript - 如何在没有多个 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 的元素，但这只是为了演示。一旦它被解析为合适的元素，您就可以按照您认为合适的方式遍历其层次结构并执行您需要的任何类型的提取。