Как можно заменить определенные элементы в HTML-коде?

Как написать скрипт, который при запуске будет заменять все вхождения %{version} на "small" в ссылках на изображения в конце страницы? Вот пример HTML, в котором нужно провести замену:

```html
<div id="coub">
  <div class="coub" onmouseover="showName(this);">
    <a href="//coub.com/view/eeuyn" onclick="return frame(this);">
      <img src="https://3fc4ed44-3fbc-419a-97a1-a29742511391.selcdn.net/coub_storage/coub/simple/cw_image/f42a9c98bfd/f876723cdbb307c191e94/1472200578_00031.jpg">
    </a>
    <span>Watch on the road! #jimdrives</span>
  </div>

  <div class="coub" onmouseover="showName(this);">
    <a href="//coub.com/view/2q1t7k" onclick="return frame(this);">
      <img src="https://3fc4ed44-3fbc-419a-97a1-a29742511391.selcdn.net/coub_storage/coub/simple/cw_image/27475bd9033/6a9fb30fb888702736ce6/%{version}_1615659518_00032.jpg">
    </a>
    <span>Everyone!</span>
  </div>
</div>
```
  • 13 января 2024 г. 10:48
Ответы на вопрос 2
Вы можете использовать JavaScript для замены определенных элементов в HTML-коде. Ниже приведен пример скрипта, который можно добавить в конец вашей HTML-страницы перед закрывающим тегом `</body>`. Скрипт найдет все изображения внутри `<div id="coub">`, проверит их `src` атрибуты и заменит `%{version}` на `"small"`.

```html
<script>
// Функция, которая выполняет замену в атрибуте src
function replaceVersion() {
  // Получаем все элементы <img> внутри блока с id="coub"
  var images = document.querySelectorAll('#coub img');

  // Перебираем все элементы <img>
  images.forEach(function(img) {
    // Получаем значение текущего src изображения
    var src = img.getAttribute('src');

    // Заменяем '%{version}' на 'small' если необходимо
    if (src.includes('%{version}')) {
      var newSrc = src.replace('%{version}', 'small');
      // Обновляем src изображения
      img.setAttribute('src', newSrc);
    }
  });
}

// Вызываем функцию замены после загрузки страницы
window.onload = replaceVersion;
</script>
```

Добавьте этот скрипт в конец вашего HTML файла, чтобы он выполнялся после загрузки всех элементов DOM. При выполнении скрипт найдет все изображения внутри блока с id `coub`, проверит, содержат ли их `src` подстроку `%{version}`, и заменит эту подстроку на `small`.
Готовый скрипт вряд ли найдешь, но ты можешь попробовать его написать сам. 

1) Выбираешь все теги image.
2) В цикле проходишь и смотришь есть ли в его src %{version}.
3) Если есть, то атрибуту src задаешь обновленное значение.
Похожие вопросы