FranciscoG/createElement.js

## createElement.js

function createElement(type, attributes, text,  children =[]) {

  if (type === 'text' && text) {
    return document.createTextNode(text);
  }

  var el = document.createElement(type);

  if (attributes) {
    for (var attr in attributes) {
      el.setAttribute(attr, attributes[attr]);
    }
  }
  if (children.length > 0) {
    children.forEach(function(c){
      el.appendChild(createElement(c.node, c.attributes, c.text, c.children));
    });
  }

  return el;
}

## htmlparsing.js
var html = `
  <div
    class="thing" style="color:green" id="myid">
    <a href="#" target="_blank">this is my link</a>
    <ul>
      <li>this is stuff</li>
      <li><span class="whatevs">inside stuff</span></li>
      <li>
        <span class="icon"></span>
        <p>this is some <strong>text</strong></p>
      </li>
      <li><a href="http://some-domain.com/pro/free">Go here</a></li>
    </ul>
  </div>
`.trim();

var re = new RegExp('(\w|\d||[().,\-:;@#$%^&*\[\]"\'+–/\/®°⁰!?{}|`~]| )*(<\/?[a-z]+ ?([^>]*)?>)', 'ig');
var matches = html.match(re).map(e=>e.trim());


var container2 = document.getElementById('root');

function isOpen(str) {
  return str.charAt(1) !== '/';
}

function parseElement(str){
  var result = {
    children : []
  };
  var parts = str.replace(/^</,'').replace(/>$/,'').split(' ');

  result.node = parts.shift();
  result.attributes = {};

  parts.forEach((e)=>{
    if (e.length > 1) {
      var attr = e.split('=');
      result.attributes[attr[0]] = attr[1].replace(/^["']/,'').replace(/["']$/,'');
    }
  });
  return result;
}

console.log(matches);

var objTree = [];
var currentNode = null;
var prevNode = null;
matches.forEach(m => {
  let whereToPush;

  if (isOpen(m)) {
    prevNode = currentNode || objTree;

    if (objTree.length === 0) {
      whereToPush = objTree;
    } else {
      whereToPush = currentNode.children;
    }

    whereToPush.push(parseElement(m));
    currentNode = whereToPush[whereToPush.length - 1];
  } else {
    console.log('closing', currentNode);
    currentNode = prevNode;
  }

});

objTree.forEach((t)=> {
  container2.appendChild(createElement(t.node, t.attributes, t.text, t.children));
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

  <div id="testRoot"></div>
  <div id="root"></div>

  <script src="createElement.js"></script>
  <script src="test.js"></script>
  <script src="htmlparsing.js"></script>

</body>
</html>

## test.js
// mocking out how I want createElement to receive data
// and how I want to structure it
var test = [
  {
    node: 'div',
    attributes : { style : "color:black", id : "test" },
    children : [
      {
        node: 'ul',
        children : [
          {
            node: 'li',
            children : [
              {
                node : 'text',
                text : 'first LI'
              }
            ],
          },
          {
            node: 'li',
            text : 'this is more text',
            children : [
              { node: 'a',
                attributes : { href : "#" },
                children : [
                  {
                    node : 'text',
                    text : 'this is a link text'
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    node: 'div',
    attributes : {id : "test2" },
    children : [
      {
        node : 'text',
        text : 'this is some text'
      },
      { node: 'a',
        attributes : { href : "#" },
      }
    ]
  },
  { node: 'a',
    attributes : { href : "#" },
    children : [
      {
        node : 'text',
        text : 'this is a link text'
      }
    ]
  }
];

var container = document.getElementById('testRoot');

test.forEach((t)=> {
  container.appendChild(createElement(t.node, t.attributes, t.text, t.children));
});

	function createElement(type, attributes, text, children =[]) {

	if (type === 'text' && text) {
	return document.createTextNode(text);
	}

	var el = document.createElement(type);

	if (attributes) {
	for (var attr in attributes) {
	el.setAttribute(attr, attributes[attr]);
	}
	}
	if (children.length > 0) {
	children.forEach(function(c){
	el.appendChild(createElement(c.node, c.attributes, c.text, c.children));
	});
	}

	return el;
	}
	var html = `
	<div
	class="thing" style="color:green" id="myid">
	<a href="#" target="_blank">this is my link</a>
	<ul>
	<li>this is stuff</li>
	<li><span class="whatevs">inside stuff</span></li>
	<li>
	<span class="icon"></span>
	<p>this is some <strong>text</strong></p>
	</li>
	<li><a href="http://some-domain.com/pro/free">Go here</a></li>
	</ul>
	</div>
	`.trim();

	var re = new RegExp('(\w\|\d\|\|[().,\-:;@#$%^&\[\]"\'+–/\/®°⁰!?{}\|`~]\| )(<\/?[a-z]+ ?([^>]*)?>)', 'ig');
	var matches = html.match(re).map(e=>e.trim());


	var container2 = document.getElementById('root');

	function isOpen(str) {
	return str.charAt(1) !== '/';
	}

	function parseElement(str){
	var result = {
	children : []
	};
	var parts = str.replace(/^</,'').replace(/>$/,'').split(' ');

	result.node = parts.shift();
	result.attributes = {};

	parts.forEach((e)=>{
	if (e.length > 1) {
	var attr = e.split('=');
	result.attributes[attr[0]] = attr[1].replace(/^["']/,'').replace(/["']$/,'');
	}
	});
	return result;
	}

	console.log(matches);

	var objTree = [];
	var currentNode = null;
	var prevNode = null;
	matches.forEach(m => {
	let whereToPush;

	if (isOpen(m)) {
	prevNode = currentNode \|\| objTree;

	if (objTree.length === 0) {
	whereToPush = objTree;
	} else {
	whereToPush = currentNode.children;
	}

	whereToPush.push(parseElement(m));
	currentNode = whereToPush[whereToPush.length - 1];
	} else {
	console.log('closing', currentNode);
	currentNode = prevNode;
	}

	});

	objTree.forEach((t)=> {
	container2.appendChild(createElement(t.node, t.attributes, t.text, t.children));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<div id="testRoot"></div>
	<div id="root"></div>

	<script src="createElement.js"></script>
	<script src="test.js"></script>
	<script src="htmlparsing.js"></script>

	</body>
	</html>
	// mocking out how I want createElement to receive data
	// and how I want to structure it
	var test = [
	{
	node: 'div',
	attributes : { style : "color:black", id : "test" },
	children : [
	{
	node: 'ul',
	children : [
	{
	node: 'li',
	children : [
	{
	node : 'text',
	text : 'first LI'
	}
	],
	},
	{
	node: 'li',
	text : 'this is more text',
	children : [
	{ node: 'a',
	attributes : { href : "#" },
	children : [
	{
	node : 'text',
	text : 'this is a link text'
	}
	]
	}
	]
	}
	]
	}
	]
	},
	{
	node: 'div',
	attributes : {id : "test2" },
	children : [
	{
	node : 'text',
	text : 'this is some text'
	},
	{ node: 'a',
	attributes : { href : "#" },
	}
	]
	},
	{ node: 'a',
	attributes : { href : "#" },
	children : [
	{
	node : 'text',
	text : 'this is a link text'
	}
	]
	}
	];

	var container = document.getElementById('testRoot');

	test.forEach((t)=> {
	container.appendChild(createElement(t.node, t.attributes, t.text, t.children));
	});