jQuery string replace matched regex

Question

I am attempting to format an entire column of a table by replacing the data in each cell with a string. Simply, if I enter "nargles" in the input field and click a format button at the top of a table column, the text in every cell in that column is replaced with "nargles". This is working fine.

My question involves replacing instances of "%0", "%1", "%2", etc within the input string with table values. %0 corresponds to the 0th column, %1 for the 1st column, %2 for 2nd, etc. Additionally, it must grab the column value for the current row that is being modified.

To clarify with an example, lets take the table:

1    cat     description
2    dog     description
3    fish    description

If I entered "Row %0 is for %1" for my input and executed it on the 3rd column, the result would be:

1    cat     Row 1 is for cat
2    dog     Row 2 is for dog
3    fish    Row 3 is for fish

Hopefully that is a sufficient explanation =)

So, here is a sample within the example table:

<tr>
    <td></td>
    <td><button class="format" col="1">Format Col</button></td>
    <td><button class="format" col="2" >Format Col</button></td>
</tr>

<tr>
    <td><input type="text" col="0" row="0" value="0" size="1"></td>
    <td><input type="text" col="1" row="0" value="cat" /></td>
    <td><input type="text" col="2" row="0" value="description" /></td>
</tr>

...

and here is the code for the format button at the top of each column

$('td button.format').on('click', function () {

    // get formatter variables and column number
    string = $("#formatter").attr("value");
    column = $(this).attr("col");

    // regex to globally look for %d (where d is an integer)
    var re = new RegExp("\%(\\d+)", "g");

    $('td input[col="' + column + '"]').each(function (row) {
        // replace string here
    });
});

Currently, this code structure will capture the 1st column's values and works fine

$('td input[col="' + column + '"]').each(function (i) {
    $(this).attr("value", string.replace(re, $('td input[col="1" row="' + i +'"]').attr('value')));
});

But doing something like this (with input, "%2") will result in "undefined 2". (I replaced the col="1" above with col="\\$1" and appended " \\$1" to use the first matched regex found). I should also note that in addition to "\\$1" i used "$1" and "\\$1" with no luck.

$('td input[col="' + column + '"]').each(function (i) {
    $(this).attr("value", string.replace(re, $('td input[col="\$1" row="' + i +'"]').attr('value') + " \$1"));
});

My conclusion is that the time in which the regex match is substituted into the jquery lookup and the time when the lookup is performed is not correct. Since the result is "undefined 2" I know the regex is matching, but the lookup is incorrect. However, I know the code in general is correct since hardcoding col="2" will work.

Any thoughts on why this is running into trouble. I want to say its a syntax issue, but maybe I am wrong.

Sidenote: This could all be avoided if I just used the re.match() function and iterated over the returned array. I know a solution exists, im just seeing if there is a more elegant/cleaner way to do it.

I know this is long, sorry! I figure more info is better than not enough. Thanks for reading all the way through!

Answer 1

I guess you're looking for something like this:

 $('td button.format').click(function () {
     var template = "Row %0 is for %1";
     var col = $(this).attr("col");

     $("#body tr").each(function() {
         var $row = $(this);
         var t = template.replace(/%(\d+)/g, function($0, $1) {
             return $row.find("td:eq(" + $1 + ") input").val();
         });
         $row.find("td:eq(" + col + ") input").val(t)
     })
 })

Complete example: http://jsfiddle.net/TTjtU/