JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<form action="">
    <input type="text" name='something' value=''></input>
</form>
<div name='test' contentEditable='true'></div>
<node data-set='something' data-property='data' data-to='$n$ = $v$'>test</node>
<br/>
<span data-set='test' data-property='data' data-to='$n$ = $v$'>test</span>

<br/>
<input name='secondary' value='' type="text" data-set='test' data-property='value' data-to='$n$ = $v$'></input>

<node data-set='secondary' data-property='data' data-to='$v$'>_</node>

CSS

[contentEditable]{
    outline:dashed red 2px;
}

JavaScript

var nodes = document.getElementsByTagName('node');
var watchers = document.querySelectorAll('[data-set]');
var replacer = function (n, v, e) {
    e = e || this;
    this.setto = this.hasAttribute('data-to') ? this.getAttribute('data-to').replace('$n$', n).replace('$v$', v) : n + '-' + v;
    if(e.hasAttribute && e.hasAttribute('data-property')){
    if (e.hasAttribute(e.getAttribute('data-property'))) {
        e.setAttribute(e.getAttribute('data-property'), this.setto);
        return;
    }
    if (typeof e[e.getAttribute('data-property')] !== 'undefined') {
        e[e.getAttribute('data-property')] = this.setto;
        return;
    }
    }
    if( typeof e.data !=='undefined')
       e.data = this.setto;


};

var remap = function (n, v) {
    [].forEach.call(watchers, function (e) {
        if (e.getAttribute('data-set') == n) {
            if (Array.isArray([].splice.call(e.childNodes)) && e.childNodes.length > 0)[].forEach.call(e.childNodes, replacer.bind(e, n, v))
            else replacer.bind(e, n, v)();
        }
    });
};

[].concat.apply(
[].slice.call(document.querySelectorAll('*[name][value]')), [].slice.call(document.querySelectorAll('*[contentEditable=true]'))).forEach(

function (a) {
    a.addEventListener('input', function (e) {
        remap(e.target.name || e.target.getAttribute('name'), e.target.value || e.target.textContent);
    });
});