Как объединить несколько объектов RegEx без нескольких функций try-catch

Question

Переменная htmlStr может содержать различные варианты написания идентификатора:

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-код, затем захватить первого дочернего элемента и проверить его идентификатор.Это работает, даже если у вас есть другой тип атрибута, такой как пользовательский атрибут с именем data-id, или если идентификатор имеет какой-либо вид заглавных букв, или даже если у этого div есть внутренние элементы или что-то еще.

Этот метод не будет работать с недопустимым HTML или если у вас есть несколько элементов, для которых требуется идентификатор, но это просто для демонстрации.После того, как он разбит на соответствующий элемент, вы можете просматривать его иерархию по своему усмотрению и выполнять любые необходимые операции извлечения.

Answer 2

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

Это будет соответствовать всем четырем примерам.