Регулярное выражение для замены img на picture?

Question

[wakenby]

Есть такие фотографии:

<img alt="image-1" src="/assets/1.jpg" class="image-n-n">
<img class="n-class" src="/assets/2.jpg"/>
<img alt="image-5" src="https://n.n/5.png">

Т.е любая вариация фотографий, и необходимо их заменить (Их может быть любое количество) на picture, кроме тех, которые ведут на сторонние ресурсы(Это не обязательно):

<picture>
 <source srcset="/assets/1.jpg" type="image/svg+xml">
 <img alt="image-1" src="/assets/1.jpg" class="image-n-n">
</picture>

<picture>
 <source srcset="/assets/2.jpg" type="image/svg+xml">
 <img class="n-class" src="/assets/2.jpg"/>
</picture>

<img alt="image-5" src="https://n.n/5.png">

У меня даже идей нет как это сделать((

Answer 1

[0xD34F]

document.querySelectorAll('img').forEach(n => {
  const src = n.getAttribute('src');
  if (!/^https?:\/\//.test(src)) {
    const picture = document.createElement('picture');
    picture.innerHTML = `<source srcset="${src}" type="image/svg+xml">${n.outerHTML}`;
    n.parentElement.replaceChild(picture, n);
  }
});

Comments

[wakenby]

Спасибо!!!!!)))

[wakenby]

Кстати, а можно это сделать одними регулярками?) Я работаю в среде node.js и подключил jsdom. Все работает шикарно, и мне нравиться. Просто интересно можно только регулярками такое сделать или нет?

[0xD34F]

wakenby, я не понял, что вы спросили. "Одними регулярками", "только регулярками" - это как? Конечно, я могу ошибаться, но, кажется, у вас в голове произошло частичное смешение понятий "регулярные выражения" и "волшебная палочка".

[wakenby]

0xD34F, Так я и спросил можно или нет. Вот у меня html представлен обычной строкой, и я работаю с ним как со строкой а не как с dom. И мне для его обработки доступны лишь регулярные выражения. В теории возможно одними регулярными выражениями(Без document.querySelectorAll, и тому-подобным) выполнить данную задачу?

Я предполагаю что не возможно, но хотелось бы узнать точно, ради интереса, нет ли способа без имитации dom, выполнить то что я писал в вопросе.

[0xD34F]

wakenby, может, заменить (<img .*?src="(\/.*?)".*?>) на

<picture>
  <source srcset="$2" type="image/svg+xml">
  $1
</picture>

??

[wakenby]

0xD34F, Да, я про это спрашивал, не думал что можно так сделать :) Спасибо!!!!!!! А не подскажите как можно получать scr без расширения?

Чтобы так можно было делать:

<picture>
  <source srcset="$2.webp" type="image/webp">
  $1
</picture>

[wakenby]

0xD34F, А ну и она не захватывает такие изображения: src="assets/image.jpeg", т.е обязателен /, а он не всегда бывает((

[0xD34F]

wakenby,

(?!.* src="https?:\/\/)(<img .*?src="(.*?)\..*?".*?>)

[wakenby]

0xD34F, Спасибо!!! Надеюсь, когда нибудь, я тоже смогу на таком уровне понимать js)))))))))

[wakenby]

0xD34F, Кстати, а можно добавить защиту от замены img которая уже находиться в picture?

[0xD34F]

wakenby, не знаю.