JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<textarea id="input" placeholder="Raw css"></textarea>
<textarea id="output" placeholder="Formatted output of css containing search words"></textarea>
<input id="classes" placeholder="Comma-separated list of words to search for" />
<input id="format" type="button" value="Format" />

CSS

textarea {
    width: 500px;
    height: 500px;
    float: left;
}
input {
    width: 500px;
    margin-bottom: 5px;
}

JavaScript

$(function () {
    $("#format").click(function () {
        var input = $("#input").val(),
            rules = [],
            output = '',
            classes = $("#classes").val().replace(" ", "").split(","),
            class_len = classes.length;
        for (var class_i = 0; class_i < class_len; class_i++) {
            //((?:[a-z0-9\-:.\,>()\s]*?hero[a-z0-9\-:.\,>()\s]*?)+\{[a-z0-9\-_#!%:;()'".\s]*?\})
            var reg = new RegExp("((?:[a-z0-9\\\-:.\\\,>()\\\s]*?" + classes[class_i] + "[a-z0-9\\\-:.\\\,>()\\\s]*?)+\\\{[a-z0-9\\\-_#!%:;()'\".\\\s]*?\\\})", "ig");
            input.replace(reg, function (match, p1) {
                rules.push(p1);
            });
            for (var i = 0; i < rules.length; i++) {
                var selectors = rules[i].split("\{")[0],
                    attributes = rules[i].split("\{")[1].split("\}")[0],
                    sel_parts = selectors.split(","),
                    sel_len = sel_parts.length;
                for (var sel_i = 0; sel_i < sel_len; sel_i++) {
                    var end = ' {';
                    if (sel_i < (sel_len - 1)) {
                        end = ',';
                    }
                    output += sel_parts[sel_i] + end + "\n";
                    if (end === ' {') {
                        var attr_arr = attributes.split(";");
                        for (var attr_i = 0; attr_i < attr_arr.length; attr_i++) {
                            var attr = attr_arr[attr_i].split(":"),
                                attr_name = attr[0] + ": ",
                                attr_val = attr[1];
                            output += "    " + attr_name + attr_val + ";\n";
                        }
                        output += "}\n\n";
                    }
                }
            }
        }
        $("#output").val(output);
    });
});