基于选择器，Javascript Regex从样式标签中移除css规则?

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?

我可以使用regex从一个基于我提供的选择器的内联样式表中完全删除css规则，通过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

如果我提供选择器。some_class“什么是正确的regex/js方法，它将找到该选择器的任何出现并删除它、它的关联方括号以及这些方括号内的所有属性/值。

5 个解决方案

#1

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

正确地考虑使用DOM API来实现您想要的，而不是一个复杂的正则表达式，它可能不能很好地工作:

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.

请记住，浏览器可能会重新格式化样式表规则的选择器，以包含空格(所以body>div)。选择器成为body > div。在CSS选择器中，您应该尽可能与您的空格保持一致。如果您希望从特定样式表中删除规则，而不是所有样式表，则删除第一个for循环并指定样式表对象。

Example

例子

#2

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

#3

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*\{[^}]*\}

#4

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

这应该会让你接近——你可能需要调整css名称中的特定字符:value部分。

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

Enjoy!

享受吧!

#5

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

这个lib可能会有帮助:https://github.com/Box9/jss。

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

但是对于@media或一些特殊的类来说，这是非常困难的。

The best way maybe render CSS rules directly from JS:

最好的方法是直接从JS渲染CSS规则:

https://github.com/cssobj/cssobj

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

这样，它只改变了js对象的规则，而且更简单。

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

演示:https://cssobj.github.io/cssobj-demo/

#1