Javascript - array of img-strings append number to specific attribute
Question
I have an array of <img .../> -strings and I want to append a number into the foo attribute of selected ones. I have made up this code as an example, where my_imgs is the array of <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>
I basically know these tools are neccessary to solve this, but i am struggling to solve my problem and therefore wanted to ask for some help.
3 answers
solution1
1 ACCPTED 2016-01-13 10:03:11
You can achieve this using
createElementwhich will create newDOM element.appendtheimageelement in created element usinginnerHTMLand then you can find that element usinggetElementsByTagNameand usingDOM nodemethods likegetAttributeandsetAttributeto manipulateattributes.
Try this:
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);
solution2
1 2016-01-13 10:05:14
You can use string replace() with a regex:
function my_function(str, number) {
return str.replace( /foo='(.*?)'/, "foo='$1 " + number + "'")
}
Note that this relies on using ' for quoting the attribute value - if you're going to have a mixture of ' and " you'll need a slightly more sophisticated regex, but the principle is the same.
solution3
0 2016-01-13 10:01:30
Create a HTML DOM Element of the img tag and the set it's new attribute.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.