Как оптимизировать такое регулярное выражение?

Question

[Михаил Р.]

Приветствую!

Пытаюсь разобрать html тег (строку текста, похожую на html тег) на составные части.
Пример тега: <div class="test" data-status="false">
Мое регулярное выражение:

<([a-z]+)(?:\s*)(?:(class)="(.*?)")(?:\s*)(?:(data-.*)="(.*?)").*>

Вопросы:
1. Учитывая, что все идет по шаблону (например атрибуты id|class|data-), то как лучше оптимизировать|улучшить регулярное выражение? Возможно 2 раза "искать, но не запоминать пробел" не нужно...
2. Имеется ли возможность помещать содержимое атрибутов сразу в дополнительный массив, который следует сразу за родительским атрибутом? Например было: {'class', 'vasya petya'}, стало: {'class': {vasya petya}}. На настоящий момент, произвожу данную операцию в дополнительном цикле.

Спасибо!

UPD: это не html тег, а строка текста похожая на него. Изучаю регулярные выражения и для примера взял подобного рода задачу. То, что для парсинга html лучше использовать другие инструменты - вкурсе.

Comments

[Алексей Уколов]

Судя по тегу javascript, вы это в браузере делаете? Почему бы не использовать для решения этой задачи готовое и удобное браузерное API?

[Роман]

Mike Ro, если же вы парсите html не в браузере а в nodejs, то для этих целей существует множество различных готовых библиотек.

PS: в качестве саморекламы вот одна из них (не профильная, не самая быстрая и лучшая, но вполне удовлетворяющая поставленной задаче)
https://www.npmjs.com/package/split-tools

[Михаил Р.]

Алексей Уколов, Роман учу регулярки. Разбор html тегов не причем и был взят лишь для примера...

[Роман]

Mike Ro, ну так самореклама же )))

А если по существу, то библиотечка полностью построена на использовании на регуляркок, в описании есть примеры в том числе и разбора html. Возможно сможете найти для себя что-то полезное. Могу предложить для ознакомления еще одну, активно работающую с регулярками (генерирующую регулярки), возможно тоже найдете что то полезное для себя https://www.npmjs.com/package/path-to-regex

[Михаил Р.]

Роман,

Возможно сможете найти для себя что-то полезное.

Именно так и ищу примеры интересной реализации задач. Но пока регулярки знаю не очень, поэтому и хотел на примере увидеть, как более опытные коллеги решат эту задачу.

еще одну, активно работающую с регулярками (генерирующую регулярки),

404 ошибка мешает, но я понял о чем Вы. Спасибо! =)

[Роман]

Mike Ro, сори, точка попала в URL

https://www.npmjs.com/package/path-to-regex

Вечерком доберусь до компа - посмотрю регулярку из Вашего вопроса.

[Михаил Р.]

Роман,

Вечерком доберусь до компа - посмотрю регулярку из Вашего вопроса.

Спасибо, буду ждать ответа. =)

Answer 1

[Alex]

Так а зачем вам регулярки?

function getAttrs(element) {
    var attrs =  {};

    [...element.attributes].forEach(attr => attrs[attr.name] = attr.value.split(' '))
    return attrs
}

// <div class="question__text js-question-text" itemprop="text description">
console.log(
    getAttrs(document.querySelector('div'))
) 
// -> {"class":["question__text","js-question-text"],"itemprop":["text","description"]}

Comments

[Михаил Р.]

Учу регулярки. Разбор html тегов не причем и был взят лишь для примера...

Answer 2

[Ihor Bratukh]

Например так:

const raw = '<div class="test" data-status="false"></div>';

const $html = parseHTML(raw);

console.log($html.getAttribute('data-status')); //> "false"

function parseHTML(html) {
    const root = document.implementation.createHTMLDocument();
    root.body.innerHTML = html;
    return root.body.children[0];
}