JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" jd-app="test">
    <input type="text" jd-model="name" value="foo" /><br />
    <input type="text" jd-model="email" value="foo@foo" />
    <hr /> {{ name }}
    <p>Name: {{ name }}</p>
    <p>Email: {{ email }}</p> {{ email }} is this right though?
</div>

JavaScript

(function($, window, document, undefined) {
	'use strict';
    
    // From http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery
    function getTextNodesIn(node, includeWhitespaceNodes) {
        var textNodes = [], nonWhitespaceMatcher = /\S/;
    
        function getTextNodes(node) {
            if (node.nodeType == 3) {
                if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                    textNodes.push(node);
                }
            } else {
                for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                    getTextNodes(node.childNodes[i]);
                }
            }
        }
    
        getTextNodes(node);
        return textNodes;
    }

	// registering models
	(function() {
		var $app = $('[jd-app]');
		var $models = $('[jd-model]', $app);
        var models = [];

		$models.each(function(index) {
            registerModel.apply(this);
		});
        
        function registerModel() {
        var model = { name: $(this).attr('jd-model'), value: this.value, domElements: [] };            
        var re    = new RegExp('{{\\s+('+ model.name +')\\s+}}', 'gm');
        $app.contents().each(function(index) {
          if ($(this).text().match(re)) {
            var textNodes = getTextNodesIn(this, false);
            console.log(textNodes);
            $.each(textNodes, function(index, elem) {
              if (elem.nodeValue.match(re)) {
                var text = elem.nodeValue;
                var myArray = re.exec(text);
                var match = myArray[0];

                var firstIndex = text.indexOf(match);

                var newElem = elem.splitText(firstIndex);

                newElem.splitText(match.length);

                model.domElements.push(newElem);
              }
            });
          }
        });

        models.push(model);

        $(this).on('keyup', updateModel);
        $(this).trigger('keyup');
      }
       ...