replace all elements with id format when the page loads

i want to Replace all id format: Image*
My html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<label class="control-label abc-control-label"  id="image3">![](https://i.imgur.com/pMRNwuY.png)</label>
<br>
<label class="control-label abc-control-label"  id="image2">![](https://i.imgur.com/ZE8HMqh.png)</label>
<br>
<label class="control-label abc-control-label" id="image1">![](https://i.imgur.com/P92SWSj.png)</label>
<br>
<img src="https://i.imgur.com/ZE8HMqh.png" style="width:200px">

My Javascript:

function changeImage () {
    var element = document.getElementById('image2');
    //myelement.innerHTML= "New Text";
    $image_markdown = element.innerHTML;
$image_format = $image_markdown.match(/!\[.*?\]\((.*?)\)/)[1];
$new_image = '<img src="' + $image_format + '" style="width:200px">'
element.innerHTML = $new_image;
}

window.onload = changeImage();

Link: https://jsfiddle.net/bvotcode/n5fmj03c/26/

My above code work only image2.

And Please help to all image.

i want to change all elment with id ="image*" in my above code to new_image.

Thank you

enter image description here

>Solution :

You can use document.querySelectorAll with the selector [id^=image] to get all elements whose id starts with "image", then loop over them to perform this image replacement.

function changeImage() {
  for (const element of document.querySelectorAll('[id^=image]')) {
    $image_markdown = element.innerHTML;
    $image_format = $image_markdown.match(/!\[.*?\]\((.*?)\)/)[1];
    $new_image = '<img src="' + $image_format + '" style="width:200px">'
    element.innerHTML = $new_image;
  }
}
changeImage();
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label class="control-label abc-control-label" id="image3">![](https://i.imgur.com/pMRNwuY.png)</label>
<br>
<label class="control-label abc-control-label" id="image2">![](https://i.imgur.com/ZE8HMqh.png)</label>
<br>
<label class="control-label abc-control-label" id="image1">![](https://i.imgur.com/P92SWSj.png)</label>
<br>

Leave a Reply