Javascript Regex根据其选择器从样式标记中定位和删除css规则？

Question

我可以使用什么样的正则表达式来完全从基于我提供的选择器的内联样式表中删除css规则,通过javascript？

例如,我获取样式标记的内容,它包含一个规则:

.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循环并指定样式表对象.

例