I’m using JQuery 1.7.1. I have a block of well-formed HTML stored in a variable. Within this HTML there is a line,
<img id=“my-img” src=“…” />
Within my variable, how do I replace the value of the src attribute with something else?
-
1By the way, you have some funky quote characters in there that could cause issues down the road. Don't write code in Word. ;-)isherwood– isherwood2014-09-25 16:28:40 +00:00Commented Sep 25, 2014 at 16:28
Add a comment
|
5 Answers
var imgElement = $(htmlString).find("#my-img");
imgElement.prop('src', 'something else')`;
jQuery can parse HTML strings for you, so you can work with it using jQuery API like you do when it's part of the document.
var htmlString = "<foo ... ></foo>";
var parsedHtml = $(htmlString);
parsedHtml.find('#my-img').prop('src', 'new value');
htmlString = parsedHtml.wrap('<div />').parent().html(); // in case you need it as string again
8 Comments
Dave
Hey, the line "var parsedHtml = $(htmlString);" is stripping out the outermost HTML element (in your example, "<foo>"). Is tehre a way to adjust the above so that the original HTML is preserved, save the replacing of the image attribute?
Ortiga
@Dave that's how
jQuery.find works, it only look for childrens. You can use the method described in this answer, or use a dummy element $('<div />').append(parsedHtml).find()Dave
That's great that find doesn't work that way, but my question is not about find, it is about searching and replacing a particular value. You don't have to use find in the answer, but again, the above code does search and replace my source attribute but it changes other things about the variable's value that I wish to remain the same.
Ortiga
@Dave, this shouldn't change anything else that I'm aware of. Can you be more specific about what changes?
Dave
If you run the above code as you suggest, the last line, "htmlString = parsedHtml.html();'<, the variable "htmlString" does not contain the "<foo>" tags. I'm looking for a solution that does include the "<foo>" tags and also changes the src of the img within the HTML. Does that make sense?
|
You wouldn't do a string replace. You'd access the object and change the attribute:
$(myVar).find('#my-img').attr('src', 'my-new-src');
Comments
var html = $('<tag>...<img id="my-img" src="" />...</tag>');
html.find('#my-img').attr('src', 'other src');
//or
//html.find('#my-img').prop('src', 'other src')
htmlFinal = html.html();
$('body').html(htmlFinal);
Comments
Went ahead and used a generic Javascript solution, which was
myHtml = myHtml.replace(/<img id=\"my-img\" src=\"(.*?)\" width=\"66\">/g, "<img id=\"my-img\" src=\"" + imgSrc + "\" width=\"66\">");
