JSFiddle - React, Tailwind, and code Playground

by mmeah

HTML

<div id="redo">
<p>
 <strong>
  <span style="font-size: 14px">
   <span style="color: #006400">
     <span style="font-size: 14px">
      <span style="font-size: 16px">
       <span style="color: #006400">
        <span style="font-size: 14px">
         <span style="font-size: 16px">
             <span style="color: #006400">
                 <b class="hello world"><a href="#">This is a</a></b>
             </span>
         </span>
        </span>
       </span>
      </span>
     </span>
    </span>
    <span style="color: #006400">
     <span style="font-size: 16px">
      <span style="color: #b22222">Test</span>
     </span>
    </span>
   </span>
  </span>
 </strong>
</p>
</div>

<div id="simp">
</div>

<textarea rows="10" cols="60" id="simpCode"/>

JavaScript

var fixedCode = readNestProp($("#redo"));
$("#simp").html( fixedCode );
$("#simpCode").val(fixedCode);

function readNestProp(el){
    var output = "";
    $(el).children().each( function(){
        if($(this).children().length==0){
            var _that=this;
            var _cssAttributeNames = ["font-size","color"];
            var _tag = $(_that).prop("nodeName").toLowerCase();
            var _text = $(_that).text();
            var _style = "";

            $.each(_cssAttributeNames, function(_index,_value){
                var css_value = $(_that).css(_value);
                if(typeof css_value!= "undefined"){
                    _style += _value + ":";
                    _style += css_value + ";";
                }
            });
            var _attr = getAttr(_that);
            output += "<"+_tag+_attr+" style='"+_style+"'>\n"+_text+"\n</"+_tag+">\n";
        }else{
            var _tag = $(this).prop("nodeName").toLowerCase();
            var _tag_child = $(this).find(">:first-child").prop("nodeName").toLowerCase();
            var _attr = getAttr(this);
            if(_tag!=_tag_child){
                output += "<"+_tag+_attr+">\n" + readNestProp(this) + "</"+_tag+">\n";            
            }else{
                output += readNestProp(this);
            }
        };
    });
    return output;
}

function getAttr(_that){
    var _attr = "";
    var _skipAttrKey=["style","class"];
    for (var i=0, attrs=_that.attributes, l=attrs.length; i<l; i++){
        var _skipAttr = false;
        var _theAttr= attrs.item(i).nodeName;
        $.each(_skipAttrKey, function(_index,_value){
            if(_value==_theAttr) _skipAttr = true;          
        });
        if(!_skipAttr){      
            _attr += " " + _theAttr + "='";
            _attr += $(_that).attr(_theAttr) + "'";
        }                                 
    }
    return _attr;
}