JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<textarea id="txt" style="width:800px; height:100px">
[URL name="Gatos, el musical"]http://www.catsthemusical.com/[/URL]
[youtube]Ef1KOQvIupY[/youtube]
[img]http://lorempixel.com/400/200/cats/[/img]
[youtube]vpVDghgy-Ac[/youtube]
</textarea>
<button id="parser">Parsear</button>
<hr />
<div id="ctx">
</div>

JavaScript

var Reemplazator = {
  MATCHES : [
    {
      REG : /\[youtube\](.*)\[\/youtube\]/ig,
    	TPL : '<iframe type="text/html" width="640" height="390" src="http://www.youtube.com/embed/$1" frameborder="0"></iframe>'
    },
    {
      REG : /\[img\](.*)\[\/img\]/ig,
    	TPL : '<img src="$1" />'
    },
    {
      REG : /\[url name="([^"]*)"\](.*)\[\/url\]/ig,
    	TPL : '<a href="$2">$1</a>'
    }
  ],
  parse : function (txt) {
    return Reemplazator.MATCHES.reduce(
      function (value, rule) { return value.replace(rule.REG, rule.TPL); },
      txt
    );
  }
}

document.getElementById('parser').onclick = function() {
  document.getElementById('ctx').innerHTML = Reemplazator.parse(document.getElementById('txt').value);
};