What would be the regex I could use to pletely 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

What would be the regex I could use to pletely 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

• javascript
• css
• regex

Share Improve this question Follow asked Jun 21, 2010 at 17:27 Bill DamiBill Dami 3,23555 gold badges5454 silver badges7070 bronze badges 1

• 1 please clarify your question. I don't understand what you mean by 'remove it [a selector]'? Do want to remove text from between <style> and </style>? – jigfox Commented Jun 21, 2010 at 17:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Consider correctly using the DOM API to achieve what you want, rather than a plex 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 bees 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

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

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

Here's a simple version:

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

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!

This lib may help: https://github./Box9/jss

But it's very hard for @media or some special classes.

The best way maybe render CSS rules directly from JS:

https://github./cssobj/cssobj

This way it's only change rules from js object and it's easier.

The demo: https://cssobj.github.io/cssobj-demo/