JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script>
    // stats.js - http://github.com/mrdoob/stats.js
    var Stats = function() {
        var l = Date.now(),
            m = l,
            g = 0,
            n = Infinity,
            o = 0,
            h = 0,
            p = Infinity,
            q = 0,
            r = 0,
            s = 0,
            f = document.createElement("div");
        f.id = "stats";
        f.addEventListener("mousedown", function(b) {
            b.preventDefault();
            t(++s % 2)
        }, !1);
        f.style.cssText = "width:80px;opacity:0.9;cursor:pointer";
        var a = document.createElement("div");
        a.id = "fps";
        a.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002";
        f.appendChild(a);
        var i = document.createElement("div");
        i.id = "fpsText";
        i.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
        i.innerHTML = "FPS";
        a.appendChild(i);
        var c = document.createElement("div");
        c.id = "fpsGraph";
        c.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff";
        for (a.appendChild(c); 74 > c.children.length;) {
            var j = document.createElement("span");
            j.style.cssText = "width:1px;height:30px;float:left;background-color:#113";
            c.appendChild(j)
        }
        var d = document.createElement("div");
        d.id = "ms";
        d.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";
        f.appendChild(d);
        var k = document.createElement("div");
        k.id = "msText";
        k.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
        k.innerHTML = "MS";
        d.appendChild(k);
        var e = document.createElement("div");
        e.id = "msGraph";
        e.style.cssText =...

CSS

html {
    line-break:strict;
    word-wrap:pre-wrap;
}

JavaScript

function unhighlight(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);
        while (window.find(text)) {
            document.execCommand("backColor", false, "inherit");
            sel.collapseToEnd();
        }
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("foreColor", false, "inherit");
            textRange.collapse(false);
        }
    }
}

function doSearch(text) {

    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);
        while (window.find(text)) {

            document.execCommand("backColor", false, "yellow");
            sel.collapseToEnd();
        }

        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("foreColor", false, "yellow");
            textRange.collapse(false);
        }
    }
}
doSearch('abcdf');
unhighlight('bcd');
doSearch('abc');
doSearch('bcd');
unhighlight('bc');