Регулярное выражение для замены 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]

Как получить src:

const getSrc = img => img.getAttribute('src');
// или
const getSrc = img => img.attributes.src.value;

Чтобы дальше два раза одно и то же не писать, небольшой декоратор:

const relativeOnly = f => img => {
  const src = getSrc(img);
  if (!/^https?:\/\//.test(src)) {
    f(img, src);
  }
};

Можно перезаписывать разметку:

document.querySelectorAll('img').forEach(relativeOnly((img, src) =>
  img.outerHTML = `
    <picture>
      <source srcset="${src}" type="image/svg+xml">
      ${img.outerHTML}
    </picture>`
));

Или, создавать новые элементы напрямую:

const wrapImages = relativeOnly((img, src) => {
  const picture = document.createElement('picture');
  const source = document.createElement('source');
  source.srcset = src;
  source.type = 'image/svg+xml';
  img.replaceWith(picture);
  picture.append(source, img);
});

for (const n of document.getElementsByTagName('img')) {
  wrapImages(n);
}

// или

Array.prototype.forEach.call(document.images, wrapImages);

Comments

[wakenby]

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

[wakenby]

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

[0xD34F]

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

[wakenby]

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

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

[0xD34F]

Так, что ли

const b = document.body;

b.innerHTML = b.innerHTML.replace(/<img .*?src="(\/.*?)".*?>/g, `
  <picture>
    <source srcset="$1" type="image/svg+xml">
    $&
  </picture>
`);

??

[wakenby]

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

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

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

[wakenby]

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

[0xD34F]

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

[wakenby]

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

[wakenby]

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

[0xD34F]

Понятия не имею.

Предлагаю перестать заниматься такой ерундой, как обработка html регулярными выражениями. Работайте с DOM.