Replacing strings in html with array content in a loop

Question

For a little experiment, I was curious if it possible to replace strings like the ones below with content from an array, one after the other. Take a snippet like this for example:

<div class="container">
<h1>$$Insert text here$$</h1>
<div>
<p>My first paragraph.</p>
<div>$$Insert text here$$</div>
<div>
    <input type="text" name="lname" placeholder="$$Insert text here$$"><br>
    <p>Here some other text</p>
</div>

The string "$$Insert text here$$" would always be the same, I would like to replace each of them in a linear fashion with the content of an array such as:

var replacements=["This is a headline","I am a text","I am yet another text"];

Would this be possible in a simple way without the need to tame a templating engine? (Nothing against temp again, just curious)

Thanks!

nnnnnn · Accepted Answer · 2013-11-23 09:00:23Z

2

Well here's one way to do it:

var replacements=["This is a headline","I am a text","I am yet another text"],
    i = 0;
$("body").html(function(j, html) {
    return html.replace(/\$\$Insert text here\$\$/g,function() {
        return replacements[i++];
    });
});

Demo: http://jsfiddle.net/d6D68/

Note that if the $$Insert text here$$ text appears more times than there are replacement values the leftover ones will be set to "undefined".

I don't really recommend doing a text replace on the whole body, because (amongst other reasons) it would remove any event handlers, etc., but perhaps this will at least give you some ideas. (And it is an easy way to cope with replacement text both between element tags and in attributes.)

answered Nov 23, 2013 at 9:00

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

7 Comments

John Dvorak Over a year ago

I would assume the replacement is done before first insertion, thus removing event handlers is not not an issue

Derek 朕會功夫 Over a year ago

I think you have over-complicated the whole thing.

nnnnnn Over a year ago

@Derek朕會功夫 - I think my answer is less complicated than yours. I have one call to .html(), and one call to .replace(). The anonymous function passed to .replace() is the only one that will be invoked more than once. You have used .each() and then on each iteration called .html() twice and .replace().

Derek 朕會功夫 Over a year ago

@nnnnnn - After taking a close look it does seem to be a smart use of replace :)

nnnnnn Over a year ago

@JanDvorak - Indeed, thanks for the suggestion. But as I mentioned (when I edited my last comment) the items in the replacement list seem so specific (e.g., "This is a headline") that I would expect the list to be carefully matched up to the html. (It would be different if the $$..$$ "template" thingies were individually associated with specific list items.)

|

Derek 朕會功夫 · Accepted Answer · 2013-11-23 10:09:30Z

0

var list = ["button", "textarea"], opt = $("body").html();
$.each(list, function(i){
    opt = opt.replace(/\$\$insert\$\$/, list[i]);
});
$("body").html(opt);

Basically you just have to replace them one by one. No need to create anonymous functions inside replace and make it so complicated with templating engine.

http://jsfiddle.net/DerekL/m3sPw/

Note: This should be done before attaching any EventListeners.
_{Note2: This code only demonstrates the barely minimum to make it work as the question stated. Escape all malicious characters before inserting text into DOM to prevent double replacement.}

edited Nov 23, 2013 at 10:09

answered Nov 23, 2013 at 9:03

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

24 Comments

John Dvorak Over a year ago

as nnnnnn said, it's a bad idea to do a search&replace on the entire document.body.innerHTML, for a variety of reasons.

Derek 朕會功夫 Over a year ago

My answer is correct and working and yet it is downvoted without explanation. Ahh the spirit of StackOverflow...

John Dvorak Over a year ago

I have given my explanation. Your code is inefficient and susceptible to double replacement.

John Dvorak Over a year ago

@TusharGupta do you consider susceptibility to double replacement a non-issue?

Derek 朕會功夫 Over a year ago

@JanDvorak - First, inefficient does not mean it is wrong. Second, the saying that double replacement will occur is similar to saying adding <!-- will break the whole page.

|

Collectives™ on Stack Overflow

Replacing strings in html with array content in a loop

2 Answers 2

7 Comments

24 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

24 Comments

Your Answer

Sign up or log in

Post as a guest

Related