如何在没有多个 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

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

这将匹配所有四个示例。

Answer 2

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

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

How to combine multiple RegEx Objects without multiple try-catch functions

javascript

regex

try-catch

exec