Replace All innerhtml text with Javascript

Question

I've been trying for hours and I've looked a lot of samples on StackOverflow, but I can't fix my simple script.

I grabbed DOM with jQuery

var color = $('#bscontainer').html();

and now the content of color is:

<img src="resources/P/Blue_BG_2Col.png" id="bg">
<img src="resources/P/Blue_Content_2Col.png" id="content">
<img src="resources/P/Blue_Title_ExchangeRate.png" id="title">
<img src="resources/P/Blue_SubTitle_2Col.png" id="subtitle">
<img src="resources/P/Blue_Disclaimer_Disclaimer.png" id="disclaimer">

My idea is to change all the Blue to Green, and I already try this:

curColor="Blue";
newColor="Green";
t=color.replace(curColor,newColor);

It simply doesn't works. Any ideas?

It works for me. You must be doing something wrong in code that you haven't provided, or you are expecting more from the code than the methods being used are meant to provide. — user400654
– user400654, Commented Feb 28, 2013 at 21:51
I don't understand what your trying to do here..explain better — j0hnstew
– j0hnstew, Commented Feb 28, 2013 at 21:51
when you say it doesn't work, what do you mean? You've shown no code where you actually write your changes back to the file, so if you're hoping to load new images, this won't do anything. This will just give you some HTML with scripts pointing to the green resources. You haven't done anything with it yet. — Ben McCormick
– Ben McCormick, Commented Feb 28, 2013 at 21:53

Sheridan Bulger · Accepted Answer · 2013-02-28 21:58:44Z

1

To answer your question directly, replace in javascript when it takes a string parameter as the needle, only replaces the first instance. To replace all instances within a string, use a global regular expression:

str.replace(/Blue/g, 'Green');

You really ought to just modify the src attributes of the img tags though. That is the more proper way to attack this. Changing the html like you are trying to will lose any events or data bound to the DOM elements.

answered Feb 28, 2013 at 21:58

Sheridan Bulger

1,2147 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Viktor Iwan Over a year ago

the problem is Blue and Green actually a variable... for example, var curColor="Blue"; var newColor="Green"; i can't make the regex works, when i use variables

Blazemonger Over a year ago

@user2121401 You can if you construct a regexp object.

Naftali · Accepted Answer · 2013-02-28 21:52:47Z

0

So basically you want to find each image in your color element and replace Blue with Green in the src attribute -- This is one way you can do it:

var color = $('#bscontainer');
color.find('img').each(function(){

    curColor="Blue";
    newColor="Green";
    this.src = this.src.replace(curColor,newColor);

});

No need for the .html() part of your code...

answered Feb 28, 2013 at 21:52

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

Blazemonger · Accepted Answer · 2013-02-28 21:59:33Z

0

Use a callback function to actually update the HTML, and use a regular expression (object) to replace all instances at once:

$('#bscontainer').html(function (i, str) {
    curColor = new RegExp("Blue","g"); // global replace
    newColor = "Green";
    return str.replace(curColor, newColor);
});

edited Feb 28, 2013 at 21:59

answered Feb 28, 2013 at 21:53

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Collectives™ on Stack Overflow

Replace All innerhtml text with Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related