Javascript Regex для назначения и удаления правила CSS из тега стиля на основе его селектора?

Question

Какое бы регулярное выражение я мог использовать, чтобы полностью удалить правило css из встроенной таблицы стилей на основе предоставленного мной селектора через javascript?

Например, я получаю содержимое тега style ион содержит правило:

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

Если я предоставлю селектор '.some_class', какой правильный метод регулярного выражения / js найдет любое вхождение этого селектора и удалит его, связанные с ним скобки и всесвойства / значения в этих скобках

Answer 1

Обдумайте правильное использование API DOM для достижения желаемого, а не сложное регулярное выражение, которое может работать не очень хорошо:

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 и укажите вместо него объект таблицы стилей.

Пример

Answer 2

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

Answer 3

Эта библиотека может помочь: https://github.com/Box9/jss

Но это очень трудно для @media или некоторых специальных классов.

Лучшим способом может быть рендеринг правил CSS непосредственно из JS:

https://github.com/cssobj/cssobj

Таким образом, это только изменение правил из объекта js, и это проще.

Демонстрация: https://cssobj.github.io/cssobj-demo/

Answer 4

Я не совсем понимаю, что / почему вы делаете, но существующее выражение слишком сложное и выглядит неправильно.

Вот простая версия:

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

Answer 5

Это должно приблизить вас - вам может понадобиться настроить конкретные символы в разделе css name: value.

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

Наслаждайтесь!