Javascript code to replace values in a string with values from an array

Question

I have a string that looks like this:

<input type='checkbox' name='list' class='indent-28' value = 'ABC' name='Netherlands'>
    <label>Netherlands</label><br>                  
<input type='checkbox' name='list' class='indent-28' value = 'DEF' name='Germany'>
    <label>Germany</label><br>                      
<input type='checkbox' name='list' class='indent-28' value = 'GHI' name='Italy'>
    <label>Italy</label><br>                        
<input type='checkbox' name='list' class='indent-44' value = 'JKL' name='Brazil'>
    <label>Brazil</label><br>                       
<input type='checkbox' name='list' class='indent-44' value = 'MNO' name='Argentina'>
    <label>Argentina</label><br>                    
<input type='checkbox' name='list' class='indent-44' value = 'PQR' name='Argentina'>
    <label>Argentina</label><br>

I also have two JavaScript arrays which are dynamically generated in accordance with the checkboxes the end user selects and with the respective values he/she wants to enter for these selected items.

So, assuming the user selects "Netherlands","Germany","Argentina" and "Argentina" from the above list, the first array will be ["Netherlands","Germany","Argentina","Argentina"].

Furthermore, if the user wishes to modify the values of these attributes, he/she can do so by entering new values in text boxes that I've provided in the application.
(In this case let's say X,Y,Z,W are the new values the user wishes to enter. Hence, the second array will be ["X","Y","Z","W"])

Now, I have both the arrays with me and I just want to replace the values of the attributes in the above string with those in the modified array.

The desired output/end result would be something like this:

<input type='checkbox' name='list' class='indent-28' value = 'X'   name='Netherlands'>
    <label>Netherlands</label><br>                   
<input type='checkbox' name='list' class='indent-28' value = 'Y'   name='Germany'>
    <label>Germany</label><br>                       
<input type='checkbox' name='list' class='indent-28' value = 'GHI' name='Italy'>
    <label>Italy</label><br>                         
<input type='checkbox' name='list' class='indent-44' value = 'JKL' name='Brazil'>
    <label>Brazil</label><br>                        
<input type='checkbox' name='list' class='indent-44' value = 'Z'   name='Argentina'>
    <label>Argentina</label><br>                     
<input type='checkbox' name='list' class='indent-44' value = 'W'   name='Argentina'>
    <label>Argentina</label><br>

X,Y,Z and W should ideally replace the previous values ABC,DEF,MNO and PQR respectively in the string.

Can anybody help me with this code?

Answer 1

You could search your string for the text you want to take out and then replace it with the text you want to put in, i.e:

(str = your text string)

for (i=0; i<str.length; i++)
{
  if (str.substr(i,3)=="ABC")
  {
    str = str.substr(0,i)+"X"+str.substr((i+3),(str.length-(i-3));
  }

  //...and this could be repeated for each thing that you want to replace
}

Then you could also make it totally dynamic

Answer 2

You can use a regular expression to search for a pattern in your string and then replace the first ocurrence with a string that incorporates the new value.

var cty = ["Netherlands", "Germany", "Argentina", "Argentina"];
var val = ["X", "Y", "Z", "W"];

for (var i = 0; i < cty.length; i++) {
    var find = new RegExp("value='[^']*' name='" + cty[i] + "'");
    var repl = "value='" + val[i] + "' name='" + cty[i] + "'";

    str = str.replace(find, repl);
}

This code does not account for the second "Argentina" value properly. It replaces it with the first occurrence, overwriting the first change. The value for the second Argentina remains unchanged.

You can fix this with a little trick: Replace the values with a pattern that will not be matched in subsequent searches. Then replace the fake pattern with the desired one after all other replaements have taken place.

var cty = ["Netherlands", "Germany", "Argentina", "Argentina"];
var val = ["X", "Y", "Z", "W"];

for (var i = 0; i < cty.length; i++) {
    var find = new RegExp("value='[^']*' name='" + cty[i] + "'");
    var repl = "value='" + val[i] + "' shname='" + cty[i] + "'";

    str = str.replace(find, repl);
}

str = str.replace(/ shname=/, " name=");

This should give the desired result.

I'm not convinced this is the easiest solution, however. If your original string is created from similar lists, it might be easier to do the replacement on these lists and then create the HTML markup string from scratch.

Edit: This is the full code I've run and tested in Firefox. The values for the two ocurrences of Argentina are "Z" and "W".

var str = ""
    + "<input type='checkbox' name='list' class='indent-28' value='ABC' name='Netherlands'>"
    + "<label>Netherlands</label><br>"
    + "<input type='checkbox' name='list' class='indent-28' value='DEF' name='Germany'>"
    + "<label>Germany</label><br>"
    + "<input type='checkbox' name='list' class='indent-28' value='GHI' name='Italy'>"
    + "<label>Italy</label><br>"
    + "<input type='checkbox' name='list' class='indent-44' value='JKL' name='Brazil'>"
    + "<label>Brazil</label><br>"
    + "<input type='checkbox' name='list' class='indent-44' value='MNO' name='Argentina'>"
    + "<label>Argentina</label><br>"
    + "<input type='checkbox' name='list' class='indent-44' value='PQR' name='Argentina'>"
    + "<label>Argentina</label><br>"
    ;

var cty = ["Netherlands", "Germany", "Argentina", "Argentina"];
var val = ["X", "Y", "Z", "W"];

console.log(str);

for (var i = 0; i < cty.length; i++) {
    var find = new RegExp("value='[^']*' name='" + cty[i] + "'");
    var repl = "value='" + val[i] + "' shname='" + cty[i] + "'";

    str = str.replace(find, repl);
}

str = str.replace(/ shname=/, " name=");

console.log(str);