How to replace placeholders in Javascript

When personalization the messages, alert etc. programmer usually keep a common template and replace some placeholder values from the actual values. There are lots of way of doing this data substitution and in this article, you can learn some easy methods to do this personalization with minimum no of codes.

Different developers use different notation to create placeholders. Most common notations are two $ sign, two % signs etc. You have to be carefully select the format which is not used in the general text. Otherwise, that text also will get replaced along with placeholders.

    
    var placeholder1 = "{Name}";
    var placeholder2 = "$Name$";
    var placeholder3 = "%Name%";
    

Substitute placeholder using the match method

string match method can identify the matching values based on the regular expression and return those values as an array. Then we can loop those each word and replace those with actual values from another object.

As an example let’s think we have a JSON object called ‘userDetails‘. which contains values for each placeholder.

First we match with regular expression which contain text between two dollar sign.

Next we loop through those result and extract the text by removing the two dollar sign.

From that we can check whether that values contain on the userDetails object or not.

If those values contained in the ‘userDetails’ object we can replace those with the values from the ‘userDetails‘ object.

    
var userDetails = { "Name":"Shane","Age":12};

var sentence = "My name is $Name$ and age is $Age$"
var placeholders = sentence.match(/\$(.*?)\$/g)

placeholders.forEach(function(placeholder){
  //Placeholder - $Name$
  var phText = placeholder.substring(1,placeholder.length - 1);
  //phText = Name

  if(userDetails[phText]){
    sentence = sentence.replace(placeholder,userDetails[phText])
  }
})

console.log(sentence)
//"My name is Shane and age is 12"
    

How to handle values does not have replaceable text

If any of the placeholders does not have a value it’s good practice to replace those with something like ‘N/A’ or other notation which suitable for the application.

    
placeholders.forEach(function(placeholder){
  //Placeholder - $Name$
  var phText = placeholder.substring(1,placeholder.length - 1);
  //phText = Name

  if(userDetails[phText]){
    sentence = sentence.replace(placeholder,userDetails[phText])
  } else{
    sentence = sentence.replace(placeholder,"N/A")
  }
})

console.log(sentence)
//"My name is Shane and age is 12"
    

Substitute placeholder using the string replace method.

String replace method return a new string which match a single or all matching pattern based on the regular expression you use.

For the string replace method we can pass a regular expression to the first parameter and for the second one, we can use a function which return replace values. Then the matching values for the regular expression can be replaced by checking with userDetails object as in below.

    
var personalized = sentence.replace(/\$(.*?)\$/g, function (placeholder) {
  return userDetails[placeholder.substring(1,placeholder.length - 1)] || "N/A"
});

console.log(personalized)
//"My name is Shane and age is 12"
    

Other than the matching placeholder text, you can access index, captured text in this function.

    
var personalized = sentence.replace(/\$(.*?)\$/g, function (placeholder,capturedText,matchingIndex,inputString) {
  console.log(placeholder + " - "+capturedText + " - "+matchingIndex);
  return userDetails[placeholder.substring(1,placeholder.length - 1)] || "N/A"
});

console.log(personalized)
    

Conclusion

Hope you got a better idea about how to replace the placeholder text in javascript with the help of a match, replace method and you can use this approach to personalize message in dialogue, email, toast and anywhere you want.

You Will Like Also