Question

I have a problem with a javascript template parser where valid matches for the regex are not being matched. I have tested the regular expression and it was working previously which makes me think it’s something with my code.

The issue is with the codeblock regex. It is not matching 2 out of the 4 valid patterns in the template.

I have the following function:

function LoadParsedRowTemplate(rowData, type) {

    var template = Templates[type];
    var replacement = null;
    var result = null;
    var expression;

    var refbinder = /@\{[\S\s]*?}@/g;
    var databinder = /#\{[\S\s]*?}#/g
    var codeblock = /%\{[\S\s]*?}%/g;
    var ctlbinder = /\$\{[\S\s]*?}\$/g;

    try {

        while ((result = refbinder.exec(template)) != null) {
            replacement = "rowData." + result[0].substring(2, result[0].length - 2);
            template = template.replace(result[0], replacement);
        }

        while ((result = databinder.exec(template)) != null) {
            replacement = eval("rowData." + result[0].substring(2, result[0].length - 2));
            template = template.replace(result[0], replacement);
        }

        while ((result = codeblock.exec(template)) != null) {
            expression = result[0].substring(2, result[0].length - 2)
            replacement = eval(expression);
            template = template.replace(result[0], replacement);
        }

        while ((result = ctlbinder.exec(template)) != null) {
            replacement = eval("$.fn.ScreenSetup." + result[0].substring(2, result[0].length - 2));
            template = template.replace(result[0], replacement);
        }
    }
    catch (err) {
        $.error("Error: Data template Binding Error: " + err.toString());
    }

    return template;

}

With the following template:

    <script id="ReturnLineDataRowTemplate" type="text/template">
        <tr>
            <td><input type="checkbox" /></td>
            <td>
                <input type="text" class="textBox" id="orderline_0" name="orderline_0" value="#{_product._id}#" />
            </td>
            <td>#{_product._description}#</td>
            <td>
                <input type="text" class="textBox" value="#{quantity()}#" />
            </td>
            <td>#{_product._primaryUOM._description}#</td>
            <td>
                ${ControlBind("Select", {'SelectedValue': 'LK', 'Options' : getReturnTypes(_currentReturn._businessUnit), 'OptionValueKey' : '_code', 'OptionTextKey': '_description' })}$
            </td>
            <td>
                <input type="text" class="textBox" />
            </td>
            <td>%{ toFixedEx(@{unitPrice()}@,2,4) }%</td>
            <td>%{ toFixedEx(@{deposit()}@,2,4) }%</td>
            <td>%{ toFixedEx(@{surcharge()}@,2,4) }%</td>
            <td>%{ toFixedEx(@{extendedPrice()}@,2,2) }%</td>
        </tr>
    </script>

Resulting in:

            <td><input tabindex="0" type="checkbox"></td>
            <td style="width: 125px;" align="left">
                <input tabindex="0" class="textBox" id="orderline_0" name="orderline_0" value="5003" type="text">
            </td>
            <td style="width: 250px;" align="left">Chris Product 3</td>
            <td style="width: 125px;" align="left">
                <input tabindex="0" class="textBox" value="4" type="text">
            </td>
            <td style="width: 125px;" align="left">Each</td>
            <td style="width: 125px;" align="left">
                <select tabindex="0" class="dropdownlist"><option value="OD">1-Outdated</option><option value="REC">2-Recall</option><option value="RTC">3-Reduced to Clear</option><option value="LK" selected="selected">4-Leaker</option><option value="SBD">5-Sour Before Date</option><option value="PW">6-Product Withdrawal</option><option value="DM">7-Damaged</option><option value="TR">8-Tickets Redeemed</option><option value="PL">9-Product Launch</option><option value="BB">Buy Back</option></select>
            </td>
            <td style="width: 125px;" align="left">
                <input tabindex="0" class="textBox" type="text">
            </td>
            <td style="width: 125px;" align="right">81.40</td>
            <td style="width: 125px;" align="right">%{ toFixedEx(rowData.deposit(),2,4) }%</td>
            <td style="width: 125px;" align="right">0.00</td>
            <td style="width: 125px;" align="right">%{ toFixedEx(rowData.extendedPrice(),2,2) }%</td>

Answer 1

A better way to iterate over the matches is to use .replace with a callback, for example:

var codeblock = /%\{([\S\s]*?)\}%/g; // note the added capturing group
template = template.replace(codeblock, function(g0,g1){
    return eval(g1);
});

Example: http://jsbin.com/owunoy/2