Как правильно построить регулярку?

Question

[Кирилл]

Есть html-строка вида:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
<img src="/files/60570fa5c3bef305257abd06" srcset="/files/60570fa503bef3c5257abd07 320w"> 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliqu 
<img src="/files/60570f05c3bef3c5257abd78" srcset="/files/60570fa5c3bef3c5207abd90 3200w">

Не получается с помощью регулярки вида
/<img[^\>]*(src(set)?="([^"]*)")+>/g
получить для каждого img значения src и srcset одновремено. Регулярка возвращает только srcset.

Например, для

<img src="/files/60570fa5c3bef305257abd06" srcset="/files/60570fa503bef3c5257abd07 320w">

регулярка отдает только значение srcset, а нужно src и srcset одновременно. Можете подсказать что поправить?

Answer 1

[dollar]

Короткий ответ:
/(?<=<img [^<>]*?)src(?:set)?="([^"]*)"/g

Но чем больше дополнительных условий и хотелок, тем больше доп. кода понадобится или более монструозным получится рег. выражение. Универсальный способ вряд ли получится. Всегда найдётся способ сломать регулярку.

Comments

[Кирилл]

А если будут еще атрибуты? Ломается если добавить допустим alt="..."

[dollar]

Кирилл, на доп. атрибуты пока что не ломается, так что это не самый короткий ответ :) Можно ещё короче регулярку сделать, тогда будет ломаться об доп. атрибуты.

[Кирилл]

dollar, короче бы сделать, чтобы шаблон src(?:set) два раза не повторялся. Вообще, думаю можно так:
/src(set)?="([^"]*)"/g

[Кирилл]

dollar, но это будет во всех тегах, где src присутствует))

[dollar]

Кирилл, зачем такое требование? У вас существует ограничение на длину программного кода?

/src(set)?="([^"]*)"/g

А это вам виднее. Зависит от задачи. Мало ли, вам нужно, например, проверять, совпадают ли src и srcset, тогда такой вариант не прокатит. А если просто вытянуть все URL, то да, конечно, так лучше.

[Кирилл]

dollar, да, нужны просто урлы. Но желательно, чтобы регулярка учитывала img. И чтоб была такая же короткая. Пока не могу понять, как сделать повторяющуюся группу вида (src(set)?="([^"]*)")+

[dollar]

Тогда так:
/(?<=<img [^<>]*?)src(?:set)?="([^"]*)"/g
Находит все src и srcset внутри тега img.
Поменял ответ.

[Кирилл]

dollar, да, теперь супер

Answer 2

[0xD34F]

Не надо никаких регулярок.

Строку следует распарсить, чтобы получились узлы, из которых уже можно доставать чего там вам надо:

const data = Array.from(
  new DOMParser().parseFromString(html, 'text/html').images,
  n => [ n.getAttribute('src'), n.getAttribute('srcset') ]
);

или

const data = Array.prototype.map.call(
  document.createRange().createContextualFragment(html).querySelectorAll('img'),
  ({ attributes: a }) => [ a.src.value, a.srcset.value ]
);

или

const div = document.createElement('div');
div.innerHTML = html;
const data = [];
for (const n of div.getElementsByTagName('img')) {
  data.push([ n.src, n.srcset ]);
}

Comments

[Кирилл]

ну мне нужна

[0xD34F]

Кирилл, не нужна.