Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

How to replace placeholders in Javascript

Replace placeholder text using JS

Different developers use different notations to create placeholders. The 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

The match method in the string can identify the matching values based on the regular expression and return those values as an array. You can loop 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 a regular expression that contains text between two dollar signs. Next, we loop through those results 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 are 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 is 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 that matches 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 that 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.