JSFiddle - React, Tailwind, and code Playground

by frumbert

HTML

<cols bg="foo">
    <c bg=image1.jpg>something</c>
    <c>something else</c>
    <c>hmm</c>
</cols>

JavaScript

var cols = document.querySelector("cols");
var cs = cols.querySelectorAll(":scope > c");
[].forEach.call(cs, function (v,i,m) {
    var bg = v.getAttribute("bg");
    v.removeAttribute("bg");
    var obj = {}
    if (bg) obj.bg=bg;
    obj.w = (v.attributes.length) ? [].map.call(v.attributes,function(o){return o.name}).join("") : "1-" + m.length;
    obj.h = v.innerHTML;
    console.log(obj);
});