0

Столкнулся с тривиальной задачей, которую не могу решить уже как пару дней.

Есть внешний js скрипт, который тянет виджет каталога (Названия, цены, картинки и тд ). Из-за того что указан относительный путь к картинкам, они отображаются некорректно.

Ссылки на картинки такого типа ( <img src = file://... ) .

Как можно заменить относительный путь на абсолютный ? ( http://.... )

<img src="//website/storage/437.design/images/site/2019/10/2484295/52791_8.png" alt="" data-mgdcwidget-preview-src="//website/storage/437.design/images/site/2019/10/2484295/52791_3.png" data-mgdcwidget-preview-design-id="2484295" data-mgdcwidget-preview-reserved="true">

Пример кода:

<script type="text/javascript">
function processing_widget() { 
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].src = images[i].src.replace("file://","http://");  }}
            
 processing_widget();         
</script>
5
  • копировать пример в ответ?:)
    – Armen
    17 дек 2020 в 5:23
  • замена не срабатывает
    – EFRD
    17 дек 2020 в 6:30
  • А где относительные ссылки? Вижу только абсолютные.
    – UModeL
    17 дек 2020 в 6:47
  • //website/... - это file://website/..., а нужно website...
    – EFRD
    17 дек 2020 в 12:52
  • @EFRD замена должна работать как и положено посмотри какие пути у элементов после замены на элементах
    – Armen
    17 дек 2020 в 16:05

2 ответа 2

1

Можно заменить все сорсы src изображения с помощью регулярного выражения. В примере я буду использовать функциональное программирование (в этом нет ничего сверхестественного, просто в данном подходе входные данные передаются через аргументы)

function replaceAllImagesSources(images, replacer='http://') {
  const matcher = /^(?:file:)?\/\//i;
  return images.map(img => {
    return img.src = img.src.replace(matcher, replacer);
  });
}

// В вашем случае вы можете использовать getElementsByTagName
// var images = document.getElementsByTagName('img');

// Ну а я в качестве примера введу тестовые данные
const images = [
  { src: 'file://domain.com/image1.jpg' },
  { src: '//domain.com/image2.jpg' }
];

const replacedSources = replaceAllImagesSources(images);

// В качестве второго аргумента можно указывать на что
// хотите заменить найденный URL. По умолчанию это "http://"
// const replacedSources = replaceAllImagesSources(images, 'ftp://');

console.log(replacedSources);

Теперь давайте разберемся что находится в этом правиле /^(?:file:)?\/\//gi

  1. ^ начало ввода. Это означает что мы пытаемся найти наше совпадение с начала строки.
  2. () группирование. Кроме того, что скобки позволяют запоминать результат который находится внутри скобок, данный механизм работает еще и как группирование.
  3. ?: отмена запоминания. Дословно так и означает "не запоминай то что находится в скобках".
  4. ? повторный символ. Соответствует предыдущему символу повторенному 0 или 1 раз

Зачем же я применил скобки для этого выражения (file:)? Если использовать ? без скобок: file?, регулярка будет пытаться найти символ e, ну а если применить это с группированием (file:)?, тогда дословно это означает: предполагаемая строка возможно начинается с file:, в противном случае в данной строке file: может и не быть. Почему может не быть? Например она может начинатся с //file.jpg.

  1. \/\/ это означает: //, просто в регулярных выражениях данные символы необходимо экранировать, потому как данные символы // принято считать зарезервированными под объявления регулярного выражения.

  2. i этот флаг - означает регистронезависимый поиск.

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

0

Мой пример кода по подмене работает, но код не работал из-за того, что внешний js скрипт подгружался медленнее чем выполнялась эта подмена. В результате было найдено другое решение. С помощью loadDataWithBaseURL была указана ссылка на сайт, где были размещены картинки

Код подмены:

 <script type="text/javascript">
    function processing_widget() { 
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
    images[i].src = images[i].src.replace("file://","http://");  }}
                
     processing_widget();         
    </script>

Решение:

webview.loadDataWithBaseURL("http://site.com", html, "text/html", "UTF-8", null);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.