javascript: string.replace doesn't work [duplicate]

Question

i have a little problem with replacing a string in javascript/jquery. First of all the code:

HTML:

<fieldset>
    <legend>Contact persons</legend>
    <div id="cm_contactPersons">
        <fieldset id="cm_%email%">
            <legend><span class="glyphicon glyphicon-circle-arrow-right"></span> %email%</legend>
            <div class="form-group">
                <label for="cm_%email_inputFirstname" class="col-sm-2 control-label">Firstname</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="cm_%email%_inputFirstname" value="%firstname%" placeholder="" required>
                </div>
            </div>
            <div class="form-group">
                <label for="cm_%email%_inputLastname" class="col-sm-2 control-label">Lastname</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="cm_%email%_inputLastname" value="%lastname%" placeholder="i. e. Max" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Actions</label>
                <div class="col-sm-10">
                    <button type="button" class="btn btn-warning">Create new password</button>
                    <button type="button" class="btn btn-danger">Delete contact person</button>
                </div>
            </div>
        </fieldset>
    </div>
</fieldset>

Javascript:

$(document).ready(function() {
    $('#cm_customerList').btsListFilter('#cm_customerSearchInput');
    var editingArea = $('#cm_editingArea');
    var contactPersons = $('#cm_contactPersons');
    var contactPersonsTpl = contactPersons.html();
    var alertArea = $('#cm_alertArea');

    $('#cm_customerList > a').each(function() {
        $(this).click(function(e) {
            e.preventDefault();
            $('#cm_customerList>a.active').removeClass('active');
            $(this).addClass('active', 400);
            $('html').animate({
                scrollTop: 0
            });
            alertArea.fadeOut(400, function() {
                alertArea.empty();
            });
            $.ajax({
                type: 'GET',
                url: 'index.php?' + $(this).attr('data-ajaxUrl'),
                success: function(data) {
                    res = $.parseJSON(data);
                    editingArea.fadeOut(400, function() {
                        $('#cm_inputName').val(res.name);
                        $('#cm_inputStreet').val(res.street);
                        $('#cm_inputPostalcode').val(res.postalcode);
                        $('#cm_inputCity').val(res.city);
                        $('#cm_inputCountry option[value="' + res.country + '"]').prop('selected', true);
                        $('#cm_inputCountry').select2({
                            width: '100%'
                        });
                        $('#cm_inputTutors option:selected').prop('selected', false);
                        $.each(res.tutors, function(key, tutor) {
                            $('#cm_inputTutors option[value="' + tutor.username + '"]').prop('selected', true);
                        });
                        $('#cm_inputTutors').select2({
                            width: '100%'
                        });
                        contactPersons.empty();
                        $.each(res.contactpeople, function(key, contactPerson) {
                            contactPersons.append(contactPersonsTpl.replace('%email%', contactPerson));
                        });
                        editingArea.fadeIn();
                    });
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    //error handler
                }
            });
        });
    });
});

The part with the "contactPersons.append(contactPersonsTpl.replace('%email%', contactPerson));" The replace simply doesnt work. I tried all various types of debugging (logs, changing substr etc.). No chance.

But if I write "$('#cm_contactPersons').html().replace('%email%', '[email protected]');" in the Firefox console, it works.

What am I doing wrong?

Answer 1

Use regex.. JSFIDDLE

By default replace will change only first occurrence of pattern. to replace all pattern in string you need to use regular expression with g modifier.

contactPersons.append(contactPersonsTpl.replace(/%email%/g, contactPerson));