JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<textarea id="source">
%section#primary-content.container

	%ul.breadcrumb
		%li
			%a{:href=>"#"} Accueil
		%li
			%a{:href=>"#"} Femmes
		%li
			%strong
				%a{:href=>"#"} Baskets mode
</textarea>
<pre id="output">
    
</pre>
<button id="process">Convert</button>

CSS

textarea, pre{ margin:10px auto; display:block; width:100%; height:150px; border:1px solid red; }

JavaScript

var sourceField = document.querySelector('#source'),
    outputZone = document.querySelector('#output');
document.querySelector('#process').addEventListener('click',function(){
    var source = sourceField.value,
        lines = source.split('\n'),
        tree = [],
        level = 0;
    lines.forEach(function(val1,i1,arr1){
        var depth = 0,
            line = val1.split('\t'),
            tag = null,
            css = null,
            id = null,
            attr = null;
        line.forEach(function(val2,i2,arr2){
            if('' == val2){
                depth ++;
            } else {
                tag = val2.replace(/^%([A-Za-z]{2,}).*$/gi,'$1');
                tag = tag == val2 ? 'div' : tag;
                attr = val2.replace(/^[^\{]*\{(.*)\}$/gi,'$1');
            };
        });
        if(tag){
            arr1[i1] = {
                depth:depth,
                tag:tag,
                attr:attr
            };
        } else {
            arr1[i1] = null;
        };
    }); 
    console.log(lines);
    outputZone.innerHTML = source;
},false);