Format a JavaScript string using placeholders and an object of substitutions

Question

I have a string with say  My Name is  NAME  and my age is  AGE     XXX  are placeholders  We need to substitute values there from an object   Object looks like     NAME    Mike    AGE    26    EVENT    20    I need to parse the object and replace the string with corresponding values  So that final output will be      My Name is Mike and my age is 26    The whole thing has to be done either using pure javascript or jquery

User · Answer

Currently there is still no native solution in Javascript for this behavior. Tagged templates are something related, but don't solve it.

Here there is a refactor of alex's solution with an object for replacements.

The solution uses arrow functions and a similar syntax for the placeholders as the native Javascript interpolation in template literals ({} instead of %%). Also there is no need to include delimiters (%) in the names of the replacements.

There are two flavors (three with the update): descriptive, reduced, elegant reduced with groups.

Descriptive solution:

_x000D_

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(
  /{\w+}/g,
  placeholderWithDelimiters => {
    const placeholderWithoutDelimiters = placeholderWithDelimiters.substring(
      1,
      placeholderWithDelimiters.length - 1,
    );
    const stringReplacement = replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters;
    return stringReplacement;
  },
);

console.log(string);

_x000D_

Reduced solution:

_x000D_

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(/{\w+}/g, placeholder =>
  replacements[placeholder.substring(1, placeholder.length - 1)] || placeholder
);

console.log(string);

_x000D_

UPDATE 2020-12-10

Elegant reduced solution with groups, as suggested by @Kade in the comments:

_x000D_

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(
  /{(\w+)}/g, 
  (placeholderWithDelimiters, placeholderWithoutDelimiters) =>
    replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters
);

console.log(string);

_x000D_

UPDATE 2021-01-21

Support empty string as a replacement, as suggested by @Jesper in the comments:

_x000D_

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '',
};

const string = stringWithPlaceholders.replace(
  /{(\w+)}/g, 
  (placeholderWithDelimiters, placeholderWithoutDelimiters) =>
  replacements.hasOwnProperty(placeholderWithoutDelimiters) ? 
    replacements[placeholderWithoutDelimiters] : placeholderWithDelimiters
);

console.log(string);

_x000D_

User · Answer

Here is another way of doing this by using es6 template literals dynamically at runtime    x000D   x000D  const str    My name is   name  and my age is   age    x000D  const obj    name  Simon   age  33   x000D   x000D   x000D  const result   new Function  const      Object keys obj  join             this obj return      str        call  obj   x000D   x000D  document body innerHTML   result x000D   x000D   x000D

User · Answer

If you want to do something closer to console log like replacing  s placeholders like in   gt console log  Hello  s how are you  s is everything  s     Loreto    today    allright    gt Hello Loreto how are you today is everything allright    I wrote this   x000D   x000D  function log     x000D    var args   Array prototype slice call arguments   x000D    var rep  args slice 1  args length   x000D    var i 0  x000D    var output   args 0  replace   s g  function match idx    x000D      var subst rep slice i    i   x000D      return  subst    x000D        x000D     return output   x000D    x000D  res log  Hello  s how are you  s is everything  s     Loreto    today    allright    x000D  document getElementById  console   innerHTML res  x000D   lt span id  console   gt  x000D   x000D   x000D    you will get   gt log  Hello  s how are you  s is everything  s     Loreto    today    allright    gt  Hello Loreto how are you today is everything allright     UPDATE  I have added a simple variant as String prototype useful when dealing with string transformations  here is it   String prototype log   function         var args   Array prototype slice call arguments       var rep  args slice 0  args length       var i 0      var output   this replace   s  d  f    g  function match idx          var subst rep slice i    i         return  subst                return output         In that case you will do   Hello  s how are you  s is everything  s   log  Loreto    today    allright    Hello Loreto how are you today is everything allright     Try this version here

User · Answer

You can use JQuery jquery validate js  to make it work easily     validator format  My name is  0   I m  1  years old    Bob   23       Or if you want to use just that feature you can define that function and just use it like  function format source  params          each params function  i  n            source   source replace new RegExp         i           g    n              return source    alert format   0  is a  1      Michael    Guy        credit to jquery validate js team

User · Answer

The requirements of the original question clearly couldn t benefit from string interpolation  as it seems like it s a runtime processing of arbitrary replacement keys    However  if you just had to do string interpolation  you can use   const str    My name is   replacements name  and my age is   replacements age      Note the backticks delimiting the string  they are required     For an answer suiting the particular OP s requirement  you could use String prototype replace   for the replacements   The following code will handle all matches and not touch ones without a replacement  so long as your replacement values are all strings  if not  see below    var replacements      NAME    Mike    AGE    26    EVENT    20        str    My Name is  NAME  and my age is  AGE      str   str replace    w   g  function all       return replacements all     all        jsFiddle   If some of your replacements are not strings  be sure they exists in the object first  If you have a format like the example  i e  wrapped in percentage signs  you can use the in operator to achieve this   jsFiddle   However  if your format doesn t have a special format  i e  any string  and your replacements object doesn t have a null prototype  use Object prototype hasOwnProperty    unless you can guarantee that none of your potential replaced substrings will clash with property names on the prototype   jsFiddle   Otherwise  if your replacement string was  hasOwnProperty   you would get a resultant messed up string   jsFiddle     As a side note  you should be called replacements an Object  not an Array

User · Answer

You can use a custom replace function like this   var str    My Name is  NAME  and my age is  AGE     var replaceData      NAME    Mike    AGE    26    EVENT    20     function substitute str  data        var output   str replace          g  function match            if  match in data                return data match              else               return                            return output      var output   substitute str  replaceData     You can see it work here  http   jsfiddle net jfriend00 DyCwk

User · Answer

const stringInject    str       obj         gt      let newStr   str    Object keys obj  forEach  key    gt        let placeHolder       key         if newStr includes placeHolder           newStr   newStr replace placeHolder  obj key                         return newStr      Input  stringInject  Hi  name   How are you     name   Ram     Output   Hi Ram  How are you

User · Answer

How about using ES6 template literals    var a    cat   var b    fat   console log  my   a  is   b       notice back-ticked string   More about template literals

User · Answer

As with modern browser  placeholder is supported by new version of Chrome   Firefox  similar as the C style function printf     Placeholders     s String   d  i Integer number   f Floating point number   o Object hyperlink    e g   console log  generation 0  t f   f   f   a1a1  a1a2  a2a2     BTW  to see the output    In Chrome  use shortcut Ctrl   Shift   J or F12 to open developer tool  In Firefox  use shortcut Ctrl   Shift   K or F12 to open developer tool       Update - nodejs support  Seems nodejs don t support  f  instead  could use  d in nodejs  With  d number will be printed as floating number  not just integer

User · Answer

Just use replace    var values      NAME    Mike    AGE    26    EVENT    20    var substitutedString    My Name is  NAME  and my age is  AGE    replace   NAME     values   NAME     replace   AGE     values   AGE

User · Answer

I have written a code that lets you format string easily    Use this function   function format         if  arguments length     0            throw  No arguments             const string   arguments 0       const lst   string split            if  lst length     arguments length            throw  Placeholder format mismatched             let string2           let off   1      for  let i   0  i  lt  lst length  i              if  off  lt  arguments length                string2    lst i    arguments off              else               string2    lst i                      return string2      Example  format  My Name is    and my age is       Mike   26     Output     My Name is Mike and my age is 26

User · Answer

This allows you to do exactly that   NPM  https   www npmjs com package stringinject  GitHub  https   github com tjcafferkey stringinject  By doing the following   var str   stringInject  My username is  username  on  platform      username   tjcafferkey   platform   GitHub          My username is tjcafferkey on Git

User · Answer

As a quick example   var name    jack   var age   40  console log   s is  d yrs old  name age     The output is        jack is 40 yrs old

[javascript] Format a JavaScript string using placeholders and an object of substitutions?

UPDATE 2020-12-10

UPDATE 2021-01-21

Examples related to javascript

Examples related to jquery

Examples related to string

Examples related to string-formatting