How to replace text in js?

Question

Assuming I have the following:

var s = "This is a test of the battle system."

and I had an array:

var array = [
"is <b>a test</b>",
"of the <div style=\"color:red\">battle</div> system"
]

Is there some function or way I could make it such that I can process the string s such that the output would be:

var p = "This is <b>a test</b> of the <div style=\"color:red\">battle</div> system."

Based on the arbitrary elements in the array?

Note that the array elements should be executed in sequence. So looking at the first element in array 1, find the correct place to "replace" in string "s". Then looking at array element 2, find the correct place to "replace" in string "s".

Note that the string could contain numbers, brackets, and other characters like dashes (no <> though)

Answer 1

Update: after Colin DeClue's remark I think you want to do something different than I originally thought.

Here is how you can accomplish that

//your array
var array = [
    "is <b>a test</b>",
    "of the <div style=\"color:red\">battle</div> system"
];
//create a sample span element, this is to use the built in ability to get texts for tags
var cElem = document.createElement("span");

//create a clean version of the array, without the HTML, map might need to be shimmed for older browsers with a for loop;
var cleanArray = array.map(function(elem){
   cElem.innerHTML =  elem;
   return cElem.textContent;
});
//the string you want to replace on
var s = "This is a test of the battle system."

//for each element in the array, look for elements that are the same as in the clean array, and replace them with the HTML versions
for(var i=0;i<array.length;i++){
  var idx;//an index to start from, to avoid infinite loops, see discussion with 6502 for more information
  while((idx = s.indexOf(cleanArray[i],idx)) > -1){
    s = s.replace(cleanArray[i],array[i]);
    idx +=(array[i].length - cleanArray[i].length) +1;//update the index
  }
}
//write result 
document.write(s);

Working example: http://jsbin.com/opudah/9/edit

---

Original answer, in case this is what you meant after all

Yes. Using join

var s = array.join(" ");

Here is a working example in codepen

Answer 2

I suppose you've an array of original --> replacement pairs. To extract the text from an HTML a trick that may work for you is actually creating a DOM node and then extract the text content.

Once you have the text you can use the replace method with a regular expression. One annoying thing is that searching for an exact string is not trivial because there is no escape predefined function in Javascript:

function textOf(html) {
    var n = document.createElement("div");
    n.innerHTML = html;
    return n.textContent;
}

var subs = ["is <b>a test</b>",
            "of the <div style=\"color:red\">battle</div> system"];

var s = "This is a test of the battle system"

for (var i=0; i<subs.length; i++) {
    var target = textOf(subs[i]);
    var replacement = subs[i];
    var re = new RegExp(target.replace(/[\\[\]{}()+*$^|]/g, "\\$&"), "g");
    s = s.replace(re, replacement);
}

alert(s);