CODEWITHSUNDEEP
javascriptjquery
SBB
SBB

Reputation: 8970

Javascript create a mapping of array values

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?

Upvotes: 0

Views: 61

Answers (2)

Poly
Poly

Reputation: 427

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.

Upvotes: 0

Mitya
Mitya

Reputation: 34556

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 - ??

Upvotes: 1

Related Questions