JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<button id="GetImageObject">Console.Log</button>
<ul>
    <li class="index-0">
        <div class="row">
            <div class="small-12 medium-6 large-3 columns">
                <div class="thumb">
                    <div class="title-mobile hide-desktop">	<span class="title-left"><div class="sprite-cont"><span class="sprite"></span>

                    </div>
                    </span>MapleStory Meets Attack on Titan<span class="title-right"><div class="sprite-cont"><span class="sprite"></span>

                </div>
                </span>
            </div>
            <div class="thumb-img">
                <img alt=" " data-interchange="[http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/mobile/thumb_news-item-0.jpg, (default)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/tablet/thumb_news-item-0.png, (medium)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/thumb_news-item-0.png, (large)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/thumb_news-item-0.png, (xlarge)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/thumb_news-item-0.png, (xxlarge)]" data-uuid="6IfqIQAqmRky-8vAWM2-TRqK3C-xO9kJQ-vsRHi7GHitVQBDs379" src="http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/thumb_news-item-0.png">
                <img alt="" data-interchange="[http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/blank.png, (default)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/border_news-item-0.png, (large)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/border_news-item-0.png, (xlarge)], [http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/border_news-item-0.png, (xxlarge)]" class="border show-for-large-up" data-uuid="I8Zv2JKzO6jv-D08322-ODj4nK-3AQBMZ-y0SaCr8YYqAuJ6tRtR" src="http://nxcache.nexon.net/maplestory/microsite/attackontitan/img/border_news-item-0.png">
            </div>
        </div>
       ...

JavaScript

function fuck() {
    var test = document.querySelectorAll('.thumb-img > img:not(.border)');
    var tempArray, tempUUID;
    var tempObject = {};
    for (var i = 0; i < test.length; i++) {
        tempArray = JSON.parse('[ ' + test[i].dataset.interchange.replace(/\[(.*?), \((.*?)\)\]/g, '["$1", "$2"]') + ' ]');
        tempUUID = test[i].dataset.uuid;
        tempObject[tempUUID] = {};
        for (var j = 0; j < tempArray.length; j++) {
            tempObject[tempUUID][tempArray[j][1]] = tempArray[j][0];
        }
    }
    console.log(tempObject);
}
document.getElementById("GetImageObject").onclick = fuck;