Skip to content

Instantly share code, notes, and snippets.

@codepo8

codepo8/modernmarkupify.js

Created March 14, 2024 16:08
Download ZIP

Revisions

  1. codepo8 created this gist Mar 14, 2024.
    47 changes: 47 additions & 0 deletions modernmarkupify.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    /*
    <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>
    */