JavaScript .replace doesn't work

Question

I have the following JavaScript code, and I like to replace some strings, but I can't

$new_slide  =   '<div class="slide">' +
    '<table>' +
    '<tr>' +
    '<td class="pictureContainer">' +
    '<img src="/img/admin/slide-placeholder.svg" />' +
    '<input type="hidden" name="slides[0][picture][id]" data-value="picture_id" />' +
    '<input type="hidden" name="slides[0][picture][thumbnail]" data-value="picture_thumbnail" />' +
    '<input type="hidden" name="slides[0][picture][original]" data-value="picture_original" />' +
    '</td>' +
    '<td class="fieldsContainer">' +
    '<p>' +
    '<label for="masthead_0">Masthead</label>' +
    '<input type="text" data-value="masthead" name="slides[0][masthead]" id="masthead_0" />' +
    '</p>' +
    '<p>' +
    '<label for="first_heading_0">Heading #1</label>' +
    '<input type="text" data-value="first_heading" name="slides[0][first_heading]" id="first_heading_0" />' +
    '</p>' +
    '<p>' +
    '<label for="second_heading_0">Heading #2</label>' +
    '<input type="text" data-value="second_heading" name="slides[0][second_heading]" id="second_heading_0" />' +
    '</p>' +
    '<p>' +
    '<label for="link_title_0">Link title</label>' +
    '<input type="text" data-value="link_title" name="slides[0][link][title]" id="link_title_0" />' +
    '</p>' +
    '<p>' +
    '<label for="link_url_0">Link URL</label>' +
    '<input type="text" data-value="link_url" name="slides[0][link][url]" id="link_url_0" />' +
    '</p>' +
    '</p>' +
    '<label for="target_0">Link Target</label>' +
    '<select id="target_0" data-value="link_target" name="slides[0][link][target]">' +
    '<option value="_self">' + z.self + '</option>' +
    '<option value="_blank">' + z.blank + '</option>' +
    '</select>' +
    '</p>' +
    '</td>' +
    '</tr>' +
    '</table>' +
    '</div>';

var slide = {
    "picture_id"        : "45",
    "picture_thumbnail" : "/thumbnail.jpg",
    "picture_original"  : "/original.jpg",
    "masthead"          : "Mast Head #1",
    "first_heading"     : "First Heading",
    "second_heading"    : "",
    "link_title"        : "Link Title #1",
    "link_url"          : "Link URL #1",
    "link_target"       : "Link target #1"
}

for(field in slide)
{
    $new_slide.replace('data-value="' + field + '"', 'value="' + slide[field] + '"');
}

More spesific,

I like by iterating the slide variable to replace the "key" values in the $new_slide variable with the value in slide variables.

In turn, the sting

<input type="hidden" name="slides[0][picture][id]" data-value="picture_id" />

I like to be converted in

<input type="hidden" name="slides[0][picture][id]" data-value="45" />

as well the field

<input type="text" data-value="second_heading" name="slides[0][second_heading]" id="second_heading_0" />

I like to be converted in

<input type="text" data-value="" name="slides[0][second_heading]" id="second_heading_0" />

But my code seems that not working. Can somebody to help me ?

`.replace` **returns** a new string. However, it's probably better to use DOM manipulation instead of string manipulation. — Felix Kling, Apr 30 '14 at 10:23
The first point is, it should be `$new_slide = $new_slide.replace('data-value="' + field + '"', 'value="' + slide[field] + '"');` because `replace` would not change the source string — Arun P Johny, Apr 30 '14 at 10:23
But I would recommend using dom manipulation instead of string manipulation — Arun P Johny, Apr 30 '14 at 10:24
JavaScript `replace` only replaces the first occurence in a string. Use a (dynamic) RegEx with `//g` (global). For this kind of thing you might want to look into some sort of templating engine because this is going to be your maintenance nightmare. (I know because I've done it too many times in the past) — Laoujin, Apr 30 '14 at 10:24
@FelixKling can you please place an answer ? I missed that the .replace returns the new value. I have fix my code based on your recomendation. Thanks :) — KodeFor.Me, Apr 30 '14 at 10:25
a dom replacement function might be `var $div = $('
', { html: $new_slide }); $.each(slide, function (key, value) { $div.find('[data-value="' + key + '"]').attr('data-value', value) }) var newstring = $div.html();` — Arun P Johny, Apr 30 '14 at 10:26
In its current form, your question is a duplicate of [Replace method doesn't work](http://stackoverflow.com/q/1433212/218196) — Felix Kling, Apr 30 '14 at 10:27

score 2 · Accepted Answer · answered Apr 30 '14 at 10:34

2

You have to change it like:

 $new_slide = $new_slide.replace('data-value="' + field + '"', 'value="' + slide[field] + '"');

because replace function doesn't change the $new_slide value, it just returns the new modified string.

answered Apr 30 '14 at 10:34

Mehran Hatami

12,723
6
28
35

JavaScript .replace doesn't work

1 Answers1