JSFiddle - React, Tailwind, and code Playground

by frncsdrk

HTML

<div id="parentfolder" class="cool cool2">parentfolder1
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div id="parentfolder">parentfolder2
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3"></div>
    </div>
</div>

JavaScript

function walkTheDOM(node, pushText, pushAttributes, textArray) {
	function attributeArrayToString(arr) {
    	var string = '';
        for (var i = 0; i < arr.length; i++) {
        	if (typeof arr[i] === 'undefined' || arr[i] === '') {
            	continue;
            }
            string += ' ';
        	string += arr[i].name;
            string += '="';
            string += arr[i].value;
            string += '"';
        }
        
        return string;
    }
    
    if (node.nodeType === 1) {
        textArray.push(
            '<' + node.tagName.toLowerCase() + attributeArrayToString(pushAttributes(node)) + '>'
        );
    }
    pushText(node);
    var nodes = node.childNodes;
    for (var i = 0; i < nodes.length; i++) {
    	var item = nodes[i];
        walkTheDOM(item, pushText, pushAttributes, textArray);
    }
    if (node.nodeType === 1) {
    		textArray.push('</' + node.tagName.toLowerCase() + '>');
    }
}

function stringifyDOM(node) {
    if (typeof node === "string") {
        node = document.getElementsByTagName(node)[0];
    }

    var arrayOfText = [];
    
    function filter(value) {
    		return value.replace(/[\n\t\s]/g, '');
    }

    function pushText(currentNode) {
        if (currentNode.nodeType === 3) {
            arrayOfText.push(filter(currentNode.nodeValue));
        }
    }
    
    function pushAttributes(currentNode) {
    	var attrs = currentNode.attributes;
    	if (attrs.length === 0) {
        	return [''];
        }
        var attrArr = [];
        for (var i = 0; i < attrs.length; i++) {
        	attrArr.push(attrs[i]);
        }
        return attrArr;
    }
    
    function arrayToString(arr) {
    	var string = '';
        for (var i = 0; i < arr.length; i++) {
        		string += arr[i];
        }
        return string;
    }

    walkTheDOM(node, pushText, pushAttributes, arrayOfText);

    return arrayToString(arrayOfText);
}

console.log(stringifyDOM("body"));