Fill Literal

by levchenko_d

HTML

<div id='test'>Some test: x is "${x}" and y is "${y}" and z is "${z}" .</div>

<div id='test2'>Some test: x is "[x]" and y is "[y]" and z is [z] .</div>

<div id='test3'>Unable to work due to my [problem_area] (sick leave/disability)</div>

JavaScript

/*
	NOTE: double escape reserved symbols, e.g. "\\$" instead of "\$"
  			because one backslash will be cut

 	Example:

 		<div id="test">2+2 is [x]</div>

 		...
		var element = $('#test')[0],
				scope = {x:4},
				pattern = ['\\[','\\]'];
				
		fillLiteral(element, scope, pattern);

		...

		<div id="test">2+2 is 4</div>

*/
function fillLiteral(element, scope, customPattern) {
  var defaultPattern = ['\\$\\{', '\\}'],
      pattern = customPattern && customPattern.length ? customPattern : defaultPattern,
      regPattern = pattern.join('([^\]]*)'),
      prefix = pattern[0].replace(/\\/g, ''),
      postfix = pattern[1].replace(/\\/g, ''),
      reg = new RegExp(regPattern, 'gm'),
      value = element.innerHTML,
      newValue = value.replace(reg, function(match) {
        var key = match.replace(prefix, '').replace(postfix, '').trim();
        return scope[key];
      });

  element.innerHTML = newValue;
  return element;
}


fillLiteral(document.getElementById('test'), {
  x: '1',
  y: 2,
  z: 1 + 2
});

fillLiteral(document.getElementById('test3'), {
  problem_area: 'knee'
}, ['\\[', '\\]']);