[Edit]

JavaScript - insert variable into template text with regular expression

1 contributors

2 contributions

0 discussions

11 points

Created by:

Kenya-Spears

860

In this article, we want to show how in a simple way, to use string templates in JavaScript.

The article contains 3 approaches:

simple custom template logic,
string replace based approach,
templates literals (provided by modern JavaScript).

1. Simple custom template logic

Edit

This solution finds matching variables in the text and replaces them with desired values. Variables in the text are marked with curly brackets (e.g. {variable_name_here}).

xxxxxxxxxx
 
function escapePattern(text) {
    return text.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
}
​
function renderVariable(text, name, value) {
    var pattern = escapePattern(name);
    var expression = new RegExp('{' + pattern + '}', 'g');
    return text.replace(expression, value);
}
​
function renderText(text, variables) {
    var result = text;
    for (var i = 0; i < variables.length; ++i) {
        var variable = variables[i];
        result = renderVariable(result, variable.name, variable.value);
    }
    return result;
}
​
​
// Usage example:
​
var text = 
    'This is {name} profile.\n' + 
    'Details:\n' +
    '  name: {name}\n' +
    '  email: {email}\n' +
    '  age: {age}\n' +
    'Contact with {name} by {email}.';
​
var variables = [
    {name: 'name',  value: 'John Bean'           },
    {name: 'email', value: 'john.bean@dirask.com'},
    {name: 'age',   value: '53'                  }
];
​
var renderedText = renderText(text, variables);
​
console.log('-- BEFORE --\n' + text + '\n\n');
console.log('-- AFTER --\n' + renderedText + '\n\n');

Auto running

2. String replace based approach

Edit

This solution just replaces variables in the text using function logic.

xxxxxxxxxx
 
function renderText(template, variables) {
    return template.replace(/\{([0-9a-zA-Z_-]+)\}/g, function(match, variable) {
        return variables[variable];
    });
}
​
​
// Usage example:
​
var template = 
    'This is {name} profile.\n' + 
    'Details:\n' +
    '  name: {name}\n' +
    '  email: {email}\n' +
    '  age: {age}\n' +
    'Contact with {name} by {email}.';
​
var variables = {
    name : 'John Bean',
    email : 'john.bean@dirask.com',
    age : '53'
};
​
var renderedText = renderText(template, variables);
​
console.log('-- BEFORE --\n' + template + '\n\n');
console.log('-- AFTER --\n' + renderedText + '\n\n');

Auto running

To find matches /\{([0-9a-zA-Z]+)\}/g expression has been used.
Where:

/.../g - regular expression with global searching (all occurrences)
\{...\} - matches only text bounded with { }
(...) - group content and replace it with a variable: function(match, variable) { ... }
[0-9a-zA-Z]+ - one or more occurrences of letters or numbers

3. Template literals

Edit

That approach has a second name like Template strings too. In other languages, we can find substitute names like Expression interpolation or String interpolation.

xxxxxxxxxx
 
var name = 'John Bean';
var email = 'john.bean@dirask.com';
var age = 53;
​
var text = 
    `This is ${name} profile.
Details:
  name: ${name}
  email: ${email}
  age: ${age}
Contact with ${name} by ${email}.`;
​
console.log(text);