modernmarkupify.js

modernmarkupify.js

/* 
<section>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<form>
    <label for="tech">Add a technology</label>
    <input type="text" name="tech" id="tech">
    <input type="submit" value="add">
</form>
</section>
*/
const modernMarkupify = elm => {
        document.querySelectorAll(elm).forEach((elm) => {
            let cl = Array.from(
                {length: Math.floor(Math.random() * 6) + 1},
                () => Math.random().toString(36).substring(7)
            );
            let d = document.createElement('div');
            d.innerHTML = elm.innerHTML;
            if(elm.type){
                d.dataset.type = elm.type;
            }
            elm.replaceWith(d);
            d.className = cl.join(' ');
            d.dataset.is = elm.nodeName.toLowerCase();
         });
    }
    ['form','label','input','ul','li','section'].forEach((elm) => {
        modernMarkupify(elm);
    });
/*
<div class="5ucto 95y4h8 dg2ydp z7ha6 zgsm1d" data-is="section">
    <div class="5buxdw kcd5s" data-is="ul">
        <div class="9reytp ueh8ec k56f2h vwm98 a9qidm nij7d" data-is="li">HTML</div>
        <div class="dt4xwu 3lo7q keq5bb dxj6i dxompd 4gohji" data-is="li">CSS</div>
        <div class="pj4rh1" data-is="li">JavaScript</div>
    </div>
    <div class="tkc30k" data-is="form">
        <div class="lwgsz tywcrh 1s89p rtjn4q xqw8rk tgk24r" data-is="label">Add a technology</div>
        <div data-type="text" class="dd6bbn z33ygm" data-is="input"></div>
        <div data-type="submit" class="hiwmj" data-is="input"></div>
    </div>
</div>
*/