Блог

Главная - Вопросы по программированию - Замена пути к ссылке href и img внутри html на javascript

Замена пути к ссылке href и img внутри html на javascript

#javascript #html #image #replace #hyperlink

#javascript #HTML #изображение #заменить #гиперссылка

Вопрос:

У меня следующая проблема, и я был бы благодарен всем, кто мог бы мне с этим помочь. Моя проблема в том, что я хочу заменять каждое вхождение «filenameort» внутри html-файла.

 var newUrlhref = document.getElementById('ChanglingIDhref').href;
    newUrlhref = newUrlhref.replace("fileortname", x);
    document.getElementById('ChanglingIDhref').href = newUrlhref;

    var newUrlimg = document.getElementById('ChanglingIDimg').src;
    newUrlimg = newUrlimg.replace("fileortname", x);
    document.getElementById('ChanglingIDimg').src = newUrlimg;  
 <div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
          
          <a id="ChanglingIDhref" href="fileortname/img_5.jpg" class="d-block photo-item" data-fancybox="gallery">
            <img id="ChanglingIDimg" src="fileortname/img_5.jpg" alt="Image" class="img-fluid">
            <div class="photo-text-more">
              <span class="icon icon-search"></span>
            </div>
          </a>
        </div>
        
        <div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
          
          <a id="ChanglingIDhref" href="fileortname/img_6.jpg" class="d-block photo-item" data-fancybox="gallery">
            <img id="ChanglingIDimg" src="fileortname/img_6.jpg" alt="Image" class="img-fluid">
            <div class="photo-text-more">
              <span class="icon icon-search"></span>
            </div>
          </a>
        </div>
        
        <div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
          
          <a id="ChanglingIDhref" href="fileortname/img_7.jpg" class="d-block photo-item" data-fancybox="gallery">
            <img id="ChanglingIDimg" src="fileortname/img_7.jpg" alt="Image" class="img-fluid">
            <div class="photo-text-more">
              <span class="icon icon-search"></span>
            </div>
          </a>
        </div>

Теперь я разработал способ с другими сообщениями на этом форуме, как изменить его для первого набора div, но два других все равно не изменятся. Код Javascript будет следующим:

Эта часть находится непосредственно перед концом основного текста, в то время как переменная x определена в заголовке html-страницы. В конце концов, это должно сработать так, что все «filenameort» должны быть заменены и привести к папке, в которой хранятся изображения, в основном HTML-файл, в котором хранятся ссылки, и позже я бы определил x, чтобы указывать на изображения, без необходимости вставлять каждую ссылку для более чем 200 изображений.

Любая помощь была бы высоко оценена.

Комментарии:

1. У вас есть более одного ‘ChanglingIDhref’ и т.д., Поэтому вы хотели бы выполнить цикл через каждый из них при установке x; используйте консоль после ‘F12’ для тестирования вашего javascript

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

Ответ №1:

Вы должны перебирать элементы в цикле. Я использую селектор атрибутов для выбора ваших элементов. Идентификатор должен быть уникальным -> HTML id

 const fileortHref = document.querySelectorAll('[href*="fileortname"]');
const fileortSrc = document.querySelectorAll('[src*="fileortname"]');

const x = 'https://via.placeholder.com/80';

fileortHref.forEach(e => e.href = x);
fileortSrc.forEach((e,i) => e.src = `${x}/img_${i}.png`);  
 <div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">

    <a id="ChanglingIDhref" href="fileortname/img_5.jpg" class="d-block photo-item" data-fancybox="gallery">
        <img id="ChanglingIDimg" src="fileortname/img_5.jpg" alt="Image" class="img-fluid">
        <div class="photo-text-more">
            <span class="icon icon-search"></span>
        </div>
    </a>
</div>

<div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">

    <a id="ChanglingIDhref" href="fileortname/img_6.jpg" class="d-block photo-item" data-fancybox="gallery">
        <img id="ChanglingIDimg" src="fileortname/img_6.jpg" alt="Image" class="img-fluid">
        <div class="photo-text-more">
            <span class="icon icon-search"></span>
        </div>
    </a>
</div>

<div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">

    <a id="ChanglingIDhref" href="fileortname/img_7.jpg" class="d-block photo-item" data-fancybox="gallery">
        <img id="ChanglingIDimg" src="fileortname/img_7.jpg" alt="Image" class="img-fluid">
        <div class="photo-text-more">
            <span class="icon icon-search"></span>
        </div>
    </a>
</div>

Вот пример с именами классов

 const fileortHref = document.getElementsByClassName('ChanglingIDhref');
const fileortSrc = document.getElementsByClassName('ChanglingIDimg');

const x = 'https://via.placeholder.com/80';

[...fileortHref].forEach(e => e.href = x);
[...fileortSrc].forEach(e => e.src = e.src.replace(/.*fileortname/, x));  
 <div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">

    <a href="fileortname/img_5.jpg" class="ChanglingIDhref d-block photo-item" data-fancybox="gallery">
        <img src="fileortname/img_5.jpg" alt="Image" class="ChanglingIDimg img-fluid">
        <div class="photo-text-more">
            <span class="icon icon-search"></span>
        </div>
    </a>
</div>

<div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">

    <a href="fileortname/img_6.jpg" class="ChanglingIDhref d-block photo-item" data-fancybox="gallery">
        <img src="fileortname/img_6.jpg" alt="Image" class="ChanglingIDimg img-fluid">
        <div class="photo-text-more">
            <span class="icon icon-search"></span>
        </div>
    </a>
</div>

<div class="col-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">

    <a href="fileortname/img_7.jpg" class="ChanglingIDhref d-block photo-item" data-fancybox="gallery">
        <img src="fileortname/img_7.jpg" alt="Image" class="ChanglingIDimg img-fluid">
        <div class="photo-text-more">
            <span class="icon icon-search"></span>
        </div>
    </a>
</div>

Комментарии:

1. Спасибо за этот быстрый ответ, и это сработало, но немного не так хорошо, потому что теперь вся ссылка изменяется на, чтобы ссылаться на ваш код, » via.placeholder.com/80 «, но мне нужно только изменить конкретный «filenameort», в то время как «/img_7.jpg «и так далее должно оставаться там, где оно есть, потому что эти ссылки доходят до числа 300 и в значительной степени являются фиктивными ссылками, пока для пути к папке не будет определен var x или, в вашем случае, const x, я надеюсь, что это имеет смысл в том, что я только что написал.

2. С редактированием это работает, вы даже не представляете, как сильно вы мне помогли. Спасибо!

3. В первом фрагменте он подсчитывает img_numbers вверх (с индексом forEach). Это не исходные номера img. Во втором фрагменте я изменил его на replace. При такой замене ваши img-номера будут такими же, как в HTML.