JSFiddle - React, Tailwind, and code Playground

by Michael Darmanin

HTML

<script src="http://www.leemon.com/crypto/BigInt.js"></script>
<div id="choice">
    
</div>

<pre>
  https://www.facebook.com/profile.php?id=100010384755951
HTTP/1.1 404
status: 404
vary: Accept-Encoding
content-encoding: gzip
content-type: text/html
x-fb-debug: DSHxSIQ6ZG1W03AxJXr2gyF4R08xnBCIFU6RBj2/UBl6on7xFU3MuyfHQ+n8lz5m1OTocpr6pV6Wyp3UIDcZ/Q==
date: Fri, 20 May 2016 16:39:25 GMT
00000000: e4 0d 00 00 03 6f 57 00 07 31 53 04 df 91 2e 00  .....oW..1S.....
00000010: f3 71 57 04 df 91 2e 00 e2 00 00 00 48 54 54 50  .qW.........HTTP
00000020: 2f 31 2e 31 20 34 30 34 00 73 74 61 74 75 73 3a  /1.1 404.status:
00000030: 34 30 34 00 76 61 72 79 3a 41 63 63 65 70 74 2d  404.vary:Accept-
00000040: 45 6e 63 6f 64 69 6e 67 00 63 6f 6e 74 65 6e 74  Encoding.content
00000050: 2d 65 6e 63 6f 64 69 6e 67 3a 67 7a 69 70 00 63  -encoding:gzip.c
00000060: 6f 6e 74 65 6e 74 2d 74 79 70 65 3a 74 65 78 74  ontent-type:text
00000070: 2f 68 74 6d 6c 00 78 2d 66 62 2d 64 65 62 75 67  /html.x-fb-debug
00000080: 3a 44 53 48 78 53 49 51 36 5a 47 31 57 30 33 41  :DSHxSIQ6ZG1W03A
00000090: 78 4a 58 72 32 67 79 46 34 52 30 38 78 6e 42 43  xJXr2gyF4R08xnBC
000000a0: 49 46 55 36 52 42 6a 32 2f 55 42 6c 36 6f 6e 37  IFU6RBj2/UBl6on7
000000b0: 78 46 55 33 4d 75 79 66 48 51 2b 6e 38 6c 7a 35  xFU3MuyfHQ+n8lz5
000000c0: 6d 31 4f 54 6f 63 70 72 36 70 56 36 57 79 70 33  m1OTocpr6pV6Wyp3
000000d0: 55 49 44 63 5a 2f 51 3d 3d 00 64 61 74 65 3a 46  UIDcZ/Q==.date:F
000000e0: 72 69 2c 20 32 30 20 4d 61 79 20 32 30 31 36 20  ri, 20 May 2016 
000000f0: 31 36 3a 33 39 3a 32 35 20 47 4d 54 00 00 00 00  16:39:25 GMT....
00000100: 02 00 00 00 90 06 00 00 30 82 06 8c 30 82 05 74  ........0...0..t
00000110: a0 03 02 01 02 02 10 63 51 74 bc 6b ae 57 46 9b  .......cQt.k.WF.
00000120: c5 76 2e 8c 74 74 87 30 0d 06 09 2a 86 48 86 f7  .v..tt.0...*.H..
00000130: 0d 01 01 0b 05 00 30 81 84 31 3b 30 39 06 03 55  ......0..1;09..U
00000140: 04 0b 0c 32 67 65 6e 65 72 61 74 65 64 20 62 79  ...2generated by
00000150: 20...

CSS

#hidden {
    display: none;
}

pre {
  display: none;
}

JavaScript

(function convertCache() {
    var preTags = document.getElementsByTagName('pre');
    var preWithHeaderInfo = preTags[0];
    var preWithContent = preTags[2];

    var lines = preWithContent.textContent.split('\n');

    // get data about the formatting (changes between different versions of chrome)
    var rgx = /^(0{8}:\s+)([0-9a-f]{2}\s+)[0-9a-f]{2}/m;
    var match = rgx.exec(lines[0]);

    var text = '';
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i];
        var firstIndex = match[1].length; // first index of the chars to match (e.g. where a '84' would start)
        var indexJump = match[2].length; // how much space is between each set of numbers
        var totalCharsPerLine = 16;
        index = firstIndex;
        for (var j = 0; j < totalCharsPerLine; j++) {
            var hexValAsStr = line.substr(index, 2);
            if (hexValAsStr == '  ') {
                // no more chars
                break;
            }

            var asciiVal = parseInt(hexValAsStr, 16);
            text += String.fromCharCode(asciiVal);

            index += indexJump;
        }
    }

    var headerText = preWithHeaderInfo.textContent;
    var elToInsertBefore = document.body.childNodes[0];
    var insertedDiv = document.createElement("div");
    document.body.insertBefore(insertedDiv, elToInsertBefore);

    // find the filename
    var nodes = [document.body];
    var filepath = '';
    while (true) {
        var node = nodes.pop();
        if (node.hasChildNodes()) {
            var children = node.childNodes;
            for (var i = children.length - 1; i >= 0; i--) {
                nodes.push(children[i]);
            }
        }

        if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.nodeValue)) {
            // 1st depth-first text node (with non-whitespace chars) found
            filepath = node.nodeValue;
            break;
        }
    }

    outputResults(insertedDiv, convertToBase64(text), filepath, headerText);

  ...