Javascript create a mapping of array values

Question

I am working on a project where I give a user the ability to create their own email templates and insert tags into them as placeholder values that will eventually replaced with content.

The tags are in the format of [FirstName] [LastName]

I am trying to figure out the best approach to create a function that maps these tags to their values.

For example (Psuedo code):

function convertTags(message){

 // Convert all instances of tags within the message to their assigned value

 '[FirstName]' = FirstNameVar,
 '[LastName]' = LastNameVar

  // Return the message with all tags replaced
  return message;
}

I assume I could do something like the following:

function convertTags(message){

  message = message.replace(/[FirstName]/g, FirstNameVar);
  message = message.replace(/[LastName]/g, LastNameVar); 

  return message;
}

I am just trying to come up with a clean way to do this, preferably in an array/mapping style format that I can easily add to.

Any recommendations on achieving this?

`/[FirstName]/g` won't do what you seem to expect; you'd need to escape it first: `/\[FirstName\]/g` — David Thomas, Aug 03 '16 at 18:14
Look here http://stackoverflow.com/questions/15604140/replace-multiple-strings-with-multiple-other-strings — Oleg Imanilov, Aug 03 '16 at 18:21

Mitya · Accepted Answer · 2016-08-03T18:35:55.040

1

You're on the right lines. You just need to generalise your REGEX to match all params, not specifically 'firstname' or some such other hard-coded value.

Let's assume the replacers live in an object, replacers.

var replacers = {
    'foo': 'bar',
    'something-else': 'foo'
};

And here's our template:

var tmplt = 'This is my template [foo] etc etc [something-else] - [bar]';

For the replacement, we need iterative replacement via a callback:

tmplt = tmplt.replace(/\[[^\}]+\]/g, function(param) { //match all "[something]"
    param = param.replace(/\[|\]/g, ''); //strip off leading [ and trailing ]
    return replacers[param] || '??'; //return replacer or, if none found, '??'
});

The value of tmplt is now

This is my template bar etc etc foo - ??

edited Aug 03 '16 at 18:35

answered Aug 03 '16 at 18:16

Mitya

33,629
9
60
107

FYI: there are some errors in your code: `=>` should be `:` and your template is using `{}` instead of `[]` (neither of which are working properly) – Rob M. Aug 03 '16 at 18:25
I think there is a problem with the replacers object? Can it be `=>` or should it be `:` ? – SBB Aug 03 '16 at 18:25
Sorry, guys, now fixed. Re: =>, that's what happens when you're a JS developer who's spent the last 6 months focusing on PHP :) – Mitya Aug 03 '16 at 18:36
@Utkanos - haha no prob - I changed the `tmplt.replace(/\[[^\}]+\]/g` as well due to the `}` that was left in there from your original example – SBB Aug 03 '16 at 18:40

score 0 · Answer 2 · answered Aug 03 '16 at 18:59

Let's say you have an object like this:

var tagMapper: {};

In this object you can add anything you want as key-value pairs, example:

function addTag(key, value){
    key = "__prefix__" + key;
    tagMapper[key] = value;
}

addTag("key1", "value1");

The difference between an object and an array in javascript is that one uses named indexes while the other uses numbered indexed to set and retrieve data.

Now every time your user adds a new tag, you just add a new key-value pair to this object by calling the addTag function, then to replace those keys in your template just loop over the object as such:

for (var key in tagMapper) {
  if (tagMapper.hasOwnProperty(key)) {
    template = template.replace(key, tagMapper[key]); 
    //key here has value "__prefix__key1" and maps to "value1" from our example
  }
}

The prefix was added to ensure the script doesn't replace an undesirable string from our template. Your tag format may be sufficient if you are sure the template doesn't contain any [] tags containing the same key as one in the tagMapper object.

Javascript create a mapping of array values

2 Answers2