Javascript Regex to target and remove a css rule from a style tag, based on its selector?

Question

What would be the regex I could use to completely remove a css rule from an inline stylesheet based on the selector that I provide, via javascript?

For example, I get the contents of the style tag and it contains a rule:

.some_class
{
    color: #FFF;
    font-style: italic;
}

If i provide the selector '.some_class' what is the correct regex/js method that will find any occurrence of that selector and remove it, its associated brackets, and all the properties/values within those brackets

Answer 1

Hi,

This should get you close - you might need to tweak for specific characters in your css name:value section.

.some_class\{([a-zA-Z0-9#]+:[a-zA-Z0-9#]+;\n)*\}

Enjoy!

Answer 2

I don't really understand what/why you're doing, but the existing expression is over-complex and looks wrong.

Here's a simple version:

^\s*\.some_class\s*\{[^}]*\}

Answer 3

Consider correctly using the DOM API to achieve what you want, rather than a complex regular expression that may not work very well:

function deleteRule(selector) {
    // Get the collection of stylesheets and iterate over them
    var ss = document.styleSheets;

    // Exit if no stylesheets
    if (!ss.length)
        return;

    // Create an uppercase tagname version of our selector for IE
    var uSelector = selector.replace(/^[a-z]+|\s+[a-z]+/gi, function ($0) {
        return $0.toUpperCase();
    });

    // Create a map so we don't get SO's code block scrollbars involved
    var map = {};
    map[selector] = map[uSelector] = 1;

    // `deleteRule` for standards, `removeRule` for IE
    var del = "deleteRule" in ss[0] ? "deleteRule" : "removeRule";

    for (var a = 0, maxA = ss.length; a < maxA; a++) {
        // `cssRules` for standards, `rules` for IE
        var rules = ss[a].cssRules || ss[a].rules;

        for (var b = 0, maxB = rules.length; b < maxB; b++) {
            // Check for selector existence in our map
            if (rules[b].selectorText in map)
                ss[a][del](b);  // remove using our stored delete method
        }
    }
}

​ Bear in mind that browsers may reformat the stylesheet rule's selector to include whitespace (so body>div.selector becomes body > div.selector). You should try and be as consistent as possible with your whitespace in your CSS selectors. If you want to delete the rule from a specific stylesheet and not all stylesheets, eliminate the first for loop and specify the stylesheet object instead.

Example

Answer 4

var selector = ".some_class";
var pattern = new RegExp(selector.replace(/\./g, "\\.") + "\\s*{[^}]*?}", "gim");
$("style").html($("style").html().replace(pattern, ""));