Javascript - img-strings數組在特定屬性中追加數字

我有一個<img .../>-數組的字符串，我想在所選字母的foo屬性中附加一個數字。我已經決定了這個代碼爲例，其中my_imgs是<img .../> -strings數組：Javascript - img-strings數組在特定屬性中追加數字

<html> 
<head> 
    <title>Append integer into the 'foo'-attribute of an 'img'-tag - Test</title> 
    <script>   
     function my_function(some_img, some_integer){ 
      //magic happens :-(
      return some_img_with_appended_integer; 
     } 
    </script> 
</head> 
<body> 
    <script>   
     var my_imgs = ["<img src='1.png' foo='99 1 33' bar='qwertz1' harhar='yxcvb1' />", 
         "<img src='2.png' foo='2 3' bar='qwertz2' harhar='yxcvb2' someother='x' />", 
         "<img src='3.png' foo='9 7 2' bar='qwertz3' harhar='yxcvb3' />"]; 
     console.log("my_imgs = " + my_imgs);  
     my_function(my_imgs[0],"987"); // --> must return: "<img src='1.png' foo='99 1 33 987' bar='qwertz1' harhar='yxcvb1' />" 
     my_function(my_imgs[1],"76"); // --> must return: "<img src='2.png' foo='2 3 76' bar='qwertz2' harhar='yxcvb2' someother='x' />" 
     my_function(my_imgs[2],"345"); // --> must return: "<img src='3.png' foo='9 7 2 345' bar='qwertz3' harhar='yxcvb3' />" 
    </script> 
</body>

我基本上知道these tools是neccessary解決這個問題，但我在努力解決我的問題和因此想要求一些幫助。

來源

2016-01-13 kiltek

你有沒有將它們作爲字符串處理？如果你正在處理實際的''元素，這將會容易得多...... –

如果可以在附加數字後以某種方式將''元素轉換爲字符串表示形式，那麼它就沒問題。（我猜） – kiltek

你可以做到這一點使用createElement，這將創造新的DOM element。 append使用innerHTML，然後你可以找到使用getElementsByTagName使用DOM node方法，如getAttribute和setAttribute操縱attributes該元素在創建元素的image元素。

試試這個：

function my_function(some_img, some_integer) { 
 
    var elem = document.createElement('div'); 
 
    elem.innerHTML = some_img; 
 
    var image = elem.getElementsByTagName('img')[0]; 
 
    var attribute = image.getAttribute('foo'); 
 
    image.setAttribute('foo', attribute + ' ' + some_integer); 
 
    return image.outerHTML; 
 
} 
 
var my_imgs = ["<img src='1.png' foo='99 1 33' bar='qwertz1' harhar='yxcvb1' />", 
 
    "<img src='2.png' foo='2 3' bar='qwertz2' harhar='yxcvb2' someother='x' />", 
 
    "<img src='3.png' foo='9 7 2' bar='qwertz3' harhar='yxcvb3' />" 
 
]; 
 

 
var modified = my_function(my_imgs[0], "987"); 
 
alert(modified);

來源

2016-01-13 10:03:11 Rayon

創建一個HTML DOM Element img標籤，並設置它的新屬性。

function my_function(some_img, some_integer){ 
      var div = document.createElement('div'); 
      div.innerHTML = some_img; 
      var el = div.childNodes[0]; 
      var foo = el.getAttribute("foo")+" "+some_integer; 
      el.setAttribute("foo", foo); 
      return el; 
     }

來源

2016-01-13 10:01:30 void

您可以使用字符串replace()用正則表達式：

function my_function(str, number) { 
    return str.replace(/foo='(.*?)'/, "foo='$1 " + number + "'") 
}

注意，這依賴於使用'爲引用屬性值 - 如果你將會有'和"的混合物，你需要稍微多一些複雜的正則表達式，但原理是一樣的。

來源

2016-01-13 10:05:14 CupawnTae

Javascript - img-strings數組在特定屬性中追加數字

回答

相關問題