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);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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