Javascript正则表达式根据其选择器从样式标签中定位和删除CSS规则？

Question

我可以使用什么正则表达式来根据我通过 JavaScript 提供的选择器从内联样式表中完全删除 CSS 规则？

例如，我获取样式标签的内容，它包含一条规则:

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

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

Answer 1

考虑正确使用 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
        }
    }
}

​ 请记住，浏览器可能会重新格式化样式表规则的选择器以包含空格(因此 body>div.selector 变为 body > div.selector)。您应该尝试使 CSS 选择器中的空白尽可能保持一致。如果要从特定样式表而不是所有样式表中删除规则，请消除第一个 for 循环并指定样式表对象。

Example