JSFiddle - React, Tailwind, and code Playground

by Coddwrench

HTML

<script src="//www.jsviews.com/download/jsviews.js"></script>
<div id="result"></div>

<script id="tmpl" type="text/x-jsrender">
  <br/>
  <input type="text" data-link="length"/>
  <br/>
  <span> {^{:~format(text, length)}} </span>
  <br/>
  <br/>
  <input type="text" data-link="length2"/>
  <br/>
  <span> {^{:~format(text2, length, length2)}} </span>
  <br/>
</script>

JavaScript

var data = {
	length : 3,
	length2 : 3,
	text : "Please enter {0} characters",  
  text2: "Please enter {0} or {1} characters"
}

var _rxMark = /\{(\d+)\}/g;
var helpers = {
	format : function (string) {
		var data = [];
		for (var _i = 1; _i < arguments.length; _i++) {
			data[_i - 1] = arguments[_i];
		}
		return string.replace(_rxMark, function (substring, argIndex) {
			var result = data[parseInt(argIndex)];
			return result || "";
		});
	}
}

var tmpl = $.templates("#tmpl");

tmpl.link("#result", data, helpers);