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 />
</button>
<div id="ctx">
</div>

JavaScript

//REG : /\[url=([^\s\]]+)\s*\](.*(?=\[\/url\]))\[\/url\]/g,
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) {
    for (var i = 0, n = Reemplazator.MATCHES.length; i < n; i++) {
      var rule = Reemplazator.MATCHES[i];
      console.log(txt.match(rule.REG));
      txt = txt.replace(rule.REG, rule.TPL);
    }
    return txt;
  }
}

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