JSFiddle - React, Tailwind, and code Playground

by mattopen

HTML

<div id="example" class="ex">
  <span>Span 1</span>
  <span>Span 2</span>
  <!-- comment -->
  <span>
    Span 3
    <span>Inner span</span>
  </span>
</div>

JavaScript

function converter(dom) {
    if (dom.nodeType === Node.TEXT_NODE) {
		//	add only if value is not empty
		if(dom.nodeValue && dom.nodeValue.trim() != '')
			return dom.nodeValue;
    }
    if (dom.nodeType === Node.DOCUMENT_NODE) {
        dom = dom.documentElement;
    }
	
    const obj = {};
	
	//	add only if value is not empty
	if(dom.nodeValue && dom.nodeValue.trim() != ''){
		obj.nodeType = dom.nodeType;
	}
    
    if (dom.nodeType === Node.ELEMENT_NODE) {
        obj.tagName = dom.tagName;
        obj.attributes = []; // Array.from(obj.attributes) gives us a lot of things we don't want
        for (let i = 0, len = dom.attributes.length; i < len; ++i) {
            const attr = dom.attributes[i];
            obj.attributes.push({name: attr.name, value: attr.value});
        }
        obj.children = [];
        for (let child = dom.firstChild;child;child = child.nextSibling) {
					var childVal = converter(child);
			//	add only if value is not NULL
			if(childVal)
					obj.children.push(converter(child));
			}
		//	remove if is empty
		if(obj.children.length == 0) delete obj.children;
    } else {
		//	add only if value is not empty
		if(dom.nodeValue && dom.nodeValue.trim() != '')
			obj.nodeValue = dom.nodeValue;
    }
	
	//if(obj.attributes && obj.attributes.length > 0)
		return obj;
}

var domElement = document.getElementById("example");
var json = JSON.stringify(converter(domElement), null, 4);
console.log(json);