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

Answer 2

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

Answer 3

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

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

享受！

Answer 4

我真的不明白你在做什么/为什么，但现有的表达过于复杂，看起来不对。

这是一个简单的版本：

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

Answer 5

此lib可能有所帮助：https://github.com/Box9/jss

但@media或某些特殊课程很难。

最好的方法是直接从JS中呈现CSS规则：

https://github.com/cssobj/cssobj

这样它只会改变js对象的规则，而且更容易。

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

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

5 个答案: