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

Question

У меня есть следующая проблема, и я был бы благодарен всем, кто мог бы помочь мне с этим. Моя проблема в том, что я хочу заменить каждое вхождение «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+ фотографий.

Любая помощь будет принята с благодарностью.

Answer 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>