添加width屬性在一個字符串的img

Question

可以說我有串像

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

我有2個功能與我

的getHeight（）=>返回IMG高度和 的getWidth（）=>返回img寬度

我想將寬度和高度屬性添加到img標記，其值可以從這些函數中獲取它。我無法找到這個正則表達式，所以我正在考慮更多的一般方法。

這就是我想出了迄今爲止

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){ 
    ... 
} 

但之後，我不知道如何着手，因爲這是從DOM元素串轉換。我仍然需要追加高度和寬度。

我最終的字符串應該是這樣的

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

有人能幫助我實現這個請。謝謝

Answer 1

您可以使用height屬性來設置圖像的高度屬性的值。和width來設置寬度。

如果您的字符串中有多個img標籤，則如下所示使用循環。如果沒有，您可以簡單地使用images[0]而不進行循環。

編輯：如果你想改變字符串本身，只是重新分配字符串如下圖所示

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);