Question

I have the following problem and would be thankful to anyone who could help me with this. My problem is that I want to replace every occurance of "filenameort" inside a html file.

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>

Now i have worked out a way with other posts of this forum how to change it for the first div set but the other two still won't change. The Javascript code would be the following:

This part is just before the end of the body while the variable x is defined in the head of the html page. At the end the way it should work is that all the "filenameort" should be replaced and lead to a folder where pictures are stored, basically a html file that stores the links and I would later define x to point to the pictures without having to insert every link for around 200+ pictures.

Any help would be greatly appreciated.

Answer 1

You have to loop through the elements. I use a attribute selector to select your elements. An id should be unique -> 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>

Here is an example with classnames

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>

Replacing path of href and img link inside html with javascript

1 个答案: