0

lets say i have string something like 

x = '<div class="sample">
     <img src="http://www.example.com/i/java.png"> 
 </div>
 <div class="sample_another">
     <img src="/i/somedir/python.png"> 
</div>'

i have 2 functions with me

getheight() => returns img height and getwidth() => returns img width

I want to add the width and the height attribute to the img tags whose value i can get it from those functions. i couldnt find regex for this so i was thinking more of a general approach.

This is what i came up with so far 

var string ="<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var elem= document.createElement("div");
elem.innerHTML = string;

var images = elem.getElementsByTagName("img");
for(img in images){
   ...
}

but after i dont know how to proceed as this is converted from dom elements to string. and i still have to append height and width.

my final string should be something like this 

x = '<div class="sample">
         <img src="http://www.example.com/i/java.png" height="200px" width="100px"> 
     </div>
     <div class="sample_another">
         <img src="/i/somedir/python.png" width="150px" height="150px"> 
    </div>'

can anyone help me achieve this please. Thanks

Pujan
  • 69
  • 1
  • 12
  • Do not use regex for parsing HTML! https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 – Our_Benefactors Jul 21 '17 at 15:58
  • @Our_Benefactors _"This is what i came up with so far..."_ I don't see any regular expressions in the script – Andreas Jul 21 '17 at 15:59
  • 1
    Your final string looks exactly like the original string? Also, why get the height and width of an image, just to add those in attributes? – adeneo Jul 21 '17 at 15:59
  • @Our_Benefactors yes thats why i made it into html and tried to do it but i dont know how to proced forward – Pujan Jul 21 '17 at 16:05
  • @adeneo. so sorry . edited now :) – Pujan Jul 21 '17 at 16:05
  • @Andreas i couldnt find anything decent with rgex. so i came up with this html dom solution – Pujan Jul 21 '17 at 16:06
  • If you create the images with `new Image` adding attributes is just `setAttribute('height', something)` – adeneo Jul 21 '17 at 16:08
  • @adeneo after that i also want to see the changes in string x. thats where i am stuck – Pujan Jul 21 '17 at 16:10

1 Answers1

1

You can use the height property to set the value of the height attribute of an image. And width to set width.

Use for loop as shown below if you have multiple img tags in your string. If not you can simply use images[0] without for loop.

EDIT : If you want to change the string itself, just reassign the string as shown below

var string ="<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var elem= document.createElement("div");
elem.innerHTML = string;

var images = elem.getElementsByTagName("img");

for(i=0; i<images.length; i++){
   images[i].width = "150";
   images[i].height = "250";
}

string = elem.innerHTML;  // reassign the 'string' with new value
console.log(string);
Munawir
  • 3,346
  • 9
  • 33
  • 51