basic templating

Just an nano templating function

by de Montalembert Jonathan

HTML

<input type="text" id="input">

<div id="output">Type something with {name} or {age}</div>

JavaScript

var inputEl = document.getElementById('input');
var outputEl = document.getElementById('output')
var data = {
	name: 'jonathan',
  age: 85
}
function handleInputChange(event){
	var content = event.target.value;
  
  var regexp = new RegExp('{('+Object.keys(data).join('|')+')}', 'g')
  var formatted = content.replace(regexp, format)
	outputEl.textContent = formatted;
  
  function format(match, ...rest) {
		return data[rest[0]]
	}	
}



inputEl.addEventListener('keyup', handleInputChange)