Как получить атрибуты и их значения из строки?

Question

[HitGirl]

Здравствуйте!
Есть строка:

`src='solution 1' height=300 border=1 src2="https://en.wikipedia.org/wiki/"`

Пытаюсь превратить её в объект:

{
 src: 'solution 1'
border: 1,
...
}

Нашёл в интернете регулярное выражение:
(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|["']))+.)["']?
Оно почти работает. Но есть проблема: когда значение атрибута 1 цифра, выражение его не находит.
Пример
Подскажите, пожалуйста, как исправить выражение, чтобы оно находило все атрибуты?

Comments

[Сергей Соколов]

а точно строка такая инвалидная вся будет?
То одинарные, то двойные кавычки, то вообще без кавычек.
Может, как-то шире можно взглянуть: эта строка откуда берётся? Может, есть сам элемент в DOM?

Стоит ожидать подвохов с именем атрибутов в кавычках? "attr name"=value

[HitGirl]

[src='solution 1' height=300 border=1 src2="https://en.wikipedia.org/wiki/"](@@iframe)

Строка берётся из файла .md (кастомный элемент), md парсер возвращает:

{children: [
`src='solution 1' height=300 border=1 src2="https://en.wikipedia.org/wiki/"`
]}

Названия атрибутов всегда без кавычек.

Answer 1

[AUser0]

Легче всего так: ([a-zA-Z0-9-]+)=("[^"]*"|'[^']*'|[a-zA-Z0-9_-]+)
Но нужно очищать результат от лишних " и '.

Comments

[HitGirl]

([A-Za-z0-9-_]+)=(?:(?:["']([^"']+)["'])|(\w+))

[AUser0]

HitGirl, неа, не выдаст значения в одиночных и двойных кавычках.

Немногим лучше так: ([A-Za-z0-9-_]+)=(["']([^"']+)["']|\w+)
Но тогда вы потеряете значения, когда по бокам один вариант скобок - а внутри уже другой (пример значения: "D'Artagnan").

[HitGirl]

([a-zA-Z0-9-_]+)=(?:"([^"]*)"|'([^']*)'|([a-zA-Z0-9-_]+))

[AUser0]

HitGirl, опять неудачно. Вы распихаете захваченные строки в РАЗНЫЕ элементы результатирующего массива. Неудобно будет работать...
Но вы продолжайте, продолжайте, разных вариантов исполнения ещё много, можно доооо-о-олго вариатировать и так, и сяк...

[HitGirl]

AUser0, наоборот так удобно. match[1] || match[2] || match[3]. Не нужно потом удалять кавычки.

Answer 2

[Emil Revencu]

А не проще ли взять все аттрибуты элемента

const attrs = element.getAttributeNames().reduce((acc, name) => {
  return {...acc, [name]: element.getAttribute(name)};
}, {});

Comments

[HitGirl]

У элемента нет getAttributeNames

[Emil Revencu]

HitGirl, https://developer.mozilla.org/en-US/docs/Web/API/E...

[HitGirl]

Я берут это не из html, а из md. И парсер возвращает элементы без этого метода.