CODEWITHSUNDEEP
javascriptjqueryregex
patad
patad

Reputation: 9672

Javascript regex to replace multiple words with new words

I'm trying to replace multiple words with new words, each time I'm rendering an HTML template.

Instead of having to loop through the template (which is quite big) three times to look for three different words, I'd like to combine the three words and their replacements, and only loop through the template once. (Also, obviously below code only replaces the last word, {id} since it overrides the other two replacement attempts above it).

       $.get('/templates/list-item.html', function(data) {
          var template = data,
              tmp = '';

          $.getJSON('conf.json', function(data) {
            var items = [],
                list = data.default;

            for (var item in list) {
              var name = item.name,
                  value = list[item].value,
                  id = list[item].id;

              tmp = template.replace('{name}', name);
              tmp = template.replace('{value}', value);
              tmp = template.replace('{id}', id);

              items.push(tmp);
            }

            $('<div/>', {
              html: items.join('')
            }).appendTo('body');
          });
        });

Obviously rendering templates shouldn't be done with JS, but since it's for internal use only, no backend is available and it doesn't need to be indexed by Google, it's fine for the time being.

Upvotes: 1

Views: 1803

Answers (1)

georg
georg

Reputation: 214959

You can use a callback function to replace template variables. Consider for example:

template = "{foo} and {bar}"
data = {foo:123, bar:456}

template.replace(/{(\w+)}/g, function($0, $1) {
    return data[$1];
});

I'd also suggest replacing the loop with map():

items = $.map(list, function(item) {
   var data = {name: item.name, value:.... etc }
   return template.replace(/{(\w+)}/g, function($0, $1) {
       return data[$1];
   });
}

/{(\w+)}/g basically means the following:

/                - start pattern
{                - match { literally
    (            - begin group 1
        \w       - a "word" character (letter+digit+underscore)
        +        - repeat once or more
    )            - end group 1
}                - match } literally
/                - end pattern
g                - match globally, i.e. all occurences

When the callback function is called, it gets the whole match as its first parameter and the value of the group 1 as the second. So when it sees {foobar}, it calls callback("{foobar}", "foobar").

Upvotes: 9

Related Questions