CODEWITHSUNDEEP
javascriptjson
akoy
akoy

Reputation: 173

Substitute string with placeholder values coming from JSON object

I have a string "Good $timeOfTheDay$, $name$"

$timeOfTheDay$ and $name$ are placeholders whose values are contained in a JSON object. 

var content = { "timeOfTheDay" : "evening",
                "name" : "Jack",  
                "city" : "New York",  
                "age" : "25",  
              }

Want to substitute the placeholders in the string with the values from the JSON object. The resulting string would be: "Good evening, Jack"

Want to do this in javascript. This does not involve any interaction with the DOM.

I'm guessing the brute force way to do it would be via writing JS code to do the replace but is there a library or another way to do this?

Appreciate any ideas/help. Thanks!

Upvotes: 2

Views: 17561

Answers (6)

Victor Eke
Victor Eke

Reputation: 545

Exported my solution into a handy function you can call with any string.

export function getValue(text, values) {
  return text.replace(/\$\w+\$/g, (match) => {
    const variable = match.slice(1, -1);
    return values[variable] || match;
  });
}

Usage

var content = {
  timeOfTheDay: "evening",
  name: "Jack",
  city: "New York",
  age: "25",
};

const jsonString = "Good $timeOfDay$ $name$ from $city$"

getValue({ jsonString, {
  "timeOfDay": content.timeOfTheDay,
  "name": content.name,
  "city": content.city
  }
})

Result: "Good evening John from New York"

Upvotes: 0

ninhjs.dev
ninhjs.dev

Reputation: 8603

If you want to use ${var} convension:

var content = {
  timeOfTheDay: 'evening',
  name: 'Jack',
  city: 'New York',
  age: '25'
};

var str = 'Good ${timeOfTheDay}, ${name}. I am from ${city}, ${age} years old';

var parts = str.split(/(\$\{\w+?})/g).map(function(v) {
  var replaced = v.replace(/\$\{(\w+?)}/g, '$1');
  return content[replaced] || v;
});

console.log(parts.join(''));

Output

Good evening, Jack. I am from New York, 25 years old

Upvotes: 0

Tarang
Tarang

Reputation: 318

This library can be useful for replacing placeholder. This could also be used to recursively replace placeholders. https://github.com/tarangkhandelwal/substitutor.js

Ex:

nameJson= { "first":"John", "last":"Doe" }

var fullName = substitutor('My name is {first} {last} ', nameJson);

Upvotes: 0

RomanPerekhrest
RomanPerekhrest

Reputation: 92884

The extended solution using String.split, String.replace, Array.map and Array.join functions:

var content = {"timeOfTheDay" : "evening", "name" : "Jack", "city" : "New York", "age" : "25"},
    str = "Good $timeOfTheDay$, $name$", replaced = "";

var parts = str.split(/(\$\w+?\$)/g).map(function(v) {
    replaced = v.replace(/\$/g,"");
    return content[replaced] || replaced; 
});

console.log(parts.join(""));  // "Good evening, Jack"

Additional example:

...
str = "$name$ lives in $city$. He is $age$";
...
console.log(parts.join(""));  // "Jack lives in New York. He is 25"

Upvotes: 3

Mojtaba
Mojtaba

Reputation: 5002

var content = { "timeOfTheDay" : "evening",
                "name" : "Jack",  
                "city" : "New York",  
                "age" : "25",  
              }
              
document.getElementById('greeting').placeholder = 'Good ' + content.timeOfTheDay + ', ' +content.name;
<input id='greeting'>

Upvotes: 0

isvforall
isvforall

Reputation: 8926

Just use String.prototype.replace function

var content = { "timeOfTheDay": "evening", "name": "Jack", "city": "New York", "age": "25", }

var str = "Good $timeOfTheDay$, $name$"

var result = str.replace('$timeOfTheDay$', content.timeOfTheDay)
                .replace('$name$', content.name);

document.write(result);

Upvotes: 1

Related Questions