Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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/

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading