Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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?

share|improve this question
    
Why do you have the name attribute twice for each checkbox in your original string? Why is Argentina in the list twice? Where does the original string come from? It might be easier to construct the string from scratch than to do some non-trivial searching and replacing. –  M Oehm May 6 '14 at 8:04

2 Answers 2

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

share|improve this answer
    
Why reinvent the wheel? Javascript already has a replace method for strings. Also, your approach replaces the original values (which, acoording to the problem statement, we don't have) without context, which might be dangerous. –  M Oehm May 6 '14 at 8:40
    
Hey @MOehm thanks a lot for replying.. –  user2721097 May 6 '14 at 10:10
    
Hi..@MOehm ,it seems that your code snippet is not working. I placed two alerts at the end of each of the two lines: var find and var repl to determine the exact cause of the problem and i was surprised to find that var repl is working perfectly fine while the previous one (var find) is not. The "find" variable is not fetching the exact value but is successfully retrieving the name of the corresponding attribute. The value is shown as '[^']*'. On the contrary, the var repl is successfully fetching both the attribute name and its corresponding value from the text box..Can you help me out? –  user2721097 May 6 '14 at 11:09
    
@user2721097: Hmm. I've tested my code - both variants - and I've checked the outcome. But then, I've also deleted the spaces in value = 'X', which makes the regular expression fail. You can either be more strict in your spacing or you can extend the regular expression to new RegExp("value *= *'[^']*' name *= *'" + cty[i] + "'") to allow lax spacing around equals signs. (In reg exps, ` *` means "any number of spaces, including none.) Personally, I'm a syntax stickler and recommend the former. :-> –  M Oehm May 6 '14 at 20:11
    
@user2721097: A side note: I had missed your reply, because you have put it under someone else's answer. Also, if you put the address tag @Name at the beginning of your comment without any greeting, that might sound rude, but it has the benefit that the addressee gets notified. –  M Oehm May 6 '14 at 20:14

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);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.