JSFiddle - React, Tailwind, and code Playground

by devdev

HTML

<div id="demo" style="display:none">
{link°href°https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css°rel°stylesheet}
{link°href°https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css°rel°stylesheet}

{form°class°form-signin°
    {img°class°mb-4°src°https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg°alt°°width°72°height°72}
    {h1°class°h3 mb-3 font-weight-normal°Please sign in}
    {label°for°inputEmail°class°sr-only°Email address}
    {input°type°email°id°inputEmail°class°form-control°placeholder°Email address°required°°autofocus°}
    {label°for°inputPassword°class°sr-only°Password}
    {input°type°password°id°inputPassword°class°form-control°placeholder°Password°required°}
    {div°class°checkbox mb-3°
    {label°
        {input°type°checkbox°value°remember-me} Remember me
    }
    }
    {button°class°btn btn-lg btn-primary btn-block°type°submit°Sign in}
    {p°class°mt-5 mb-3 text-muted°© 2017-2018}
}
</div>

JavaScript

function myFunction() {
    var html = document.getElementById("demo").innerHTML
    
    p=console.log
    
    function parse(str){
        if(str=='') return ''
        var level=0
        buffer=''
        for(var i=0;i<str.length;i++){
            if(level==0 && str[i]!='{' && str[i]!='}')
                buffer+=str[i]
            if(str[i]=='{'){
                if(level==0) open=i
                level++
            }
            if(str[i]=='}'){
                level--
                if(level==0) {
                    close=i
                    var text=str.substring(open, close+1)
                    buffer+=parens(text)
                    //p(text)
                    //alert( open +','+ close +','+ () )
                }
            }
        }
        return buffer
    }
    
    var html1='Mr Blue has {u°a blue house and a {b°blue} car}. {input}'
    
    document.getElementById("demo").innerHTML = parse(html)
    
    
    //p(parse(html1))
    //p(parens('{input}'))
    //p(parens('{b°blue}'))
    //p(parens('{u°a blue house and a {b°blue} car}'))
    
    function parens(str){
        var parts=str.substring(1)
        parts=parts.substring(0,parts.length-1)
        
        var buffer=''
        var array=[]
        for(var i=0; i<parts.length; i++)
        {
            if(parts[i]=='{'){
                array.push(buffer+parts.slice(i))
                buffer=''
                break
            }
            if(parts[i]!='°'){
                buffer+=parts[i]
            }
            if(parts[i]=='°' || i==parts.length-1){
                array.push(buffer)
                buffer=''
            }
        }
        parts=array
        //alert(parts.join(','))
        var tagname=parts[0]
        parts=parts.slice(1)
        var content=''
        if((parts.length%2)==1){
            content=parts[parts.length-1]
            parts.splice(-1)
        }
        
        var attributes=''
        for(var i=0; i<parts.length; i+=2){
           ...