Как удалить повторяющиеся стили CSS из строки с помощью JavaScript?
У меня есть строка, содержащая CSS, хотя во многих из них есть дублированные стили.
.button:hover {background: #fff} p.test {font-size: 11px} .button:hover {background: #fff} .button:hover {background: #fff}...
Как я могу удалить повторяющиеся стили CSS из этой строки, чтобы приведенный выше пример выглядел так:
.button:hover {background: #fff} p.test {font-size: 11px}
Все стили расположены в теге <style></style>, и я получаю строку с jQuery с помощью $("style").html()
@AndreiGheorghiu Но есть ли способ сделать это с помощью JavaScript? Сама строка CSS не должна содержать дубликатов.
Почему? Браузер автоматически сделает именно то, что вы хотите. В общем, делать то, что вы хотите, - это сложная очень вещь.
Есть, но я не думаю, что это можно сделать легко, не рискуя изменить конечный результат. Например: если у вас есть #one .button {styles} и #two .button {styles}, вам нужен сценарий, который понимает, что удаление части .button {styles} после #two было бы неправильным, и это ложная копия той же строки после #one, и это изменило бы результат вашего CSS. Это должно быть сделано с помощью сценария, который способен понимать селекторы CSS, по крайней мере, до определенного момента.
Или сравните селекторы как таковой (а также игнорируйте интервалы), сделайте то же самое для стилей. Что делать, если у вас более одной декларации? Следует ли разбивать их и сравнивать один за другим? Что делать, если у вас есть похожие селекторы? Нравится .stuff, [class = "stuff"] и [class* = "stuff"]? Если ваши объявления иногда заканчиваются на ;, а иногда нет ... Дело в том, что вам нужен довольно умный сценарий. Исключительный программист может неделями работать над этим сценарием и все равно не понять его. Как долго это у вас займет? Ваш вопрос в лучшем случае слишком широк.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
OP спросил, можно ли это сделать, и указал (как я это читал) удаление повторяющихся правил. Упрощенный подход:
- Разделить по концу правила
} - Обрезать пустое пространство и заново прикрепить разделитель
- Отфильтровать дубликаты
- Присоединиться к строке
var style = ".button:hover {background: #fff} p.test {font-size: 11px} .button:hover {background: #fff} .button:hover {background: #fff} #one .button {color: #000} #two .button {color: #000}";
var uniqueRules = style
.split('}')
.map(function(rule) {
return rule ? rule.trim() + '}' : '';
})
.filter(function(rule, index, self) {
return self.indexOf(rule) === index;
})
.join(' ');
console.info(uniqueRules);Использование CSSOM (объектной модели CSS)
Взято прямо из: https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList#Get_all_CSS_rules_for_the_document_using_Array_methods
Я добавил это, потому что кто-то ложно утверждает: «Браузер делает это автоматически за вас (CSSOM - это оптимизированный результат всех ваших текущих применений CSS)». Обратите внимание на дублированный стиль .as-console-wrapper { position: fixed; }. Действительно хорошая оптимизация. Может быть, критикующий хотел бы опубликовать ответ, объясняющий, как он мог ошибаться?
var allCSS =
[].slice.call(document.styleSheets)
.reduce(function (prev, styleSheet) {
if (styleSheet.cssRules) {
return prev +
[].slice.call(styleSheet.cssRules)
.reduce(function (prev, cssRule) {
return prev + cssRule.cssText;
}, '');
} else {
return prev;
}
}, '');
console.info(allCSS);.as-console-wrapper {position: fixed;}
.as-console-wrapper {position: fixed;}Однако CSSOM делает для нас несколько вещей. Он нормализует (не путать с оптимизацией) правила, позволяющие нам находить точные дубликаты, не беспокоясь о пробелах, пропущенных точках с запятой и т.п.
var allCSS =
[].slice.call(document.styleSheets)
.reduce(function (prev, styleSheet) {
if (styleSheet.cssRules) {
return prev +
[].slice.call(styleSheet.cssRules)
.reduce(function (prev, cssRule) {
return prev + cssRule.cssText;
}, '');
} else {
return prev;
}
}, '');
var uniqueRules = allCSS
.split('}')
.map(function(rule) {
return rule ? rule.trim() + '}' : '';
})
.filter(function(rule, index, self) {
return self.indexOf(rule) === index;
})
.join(' ');
console.info(uniqueRules);.as-console-wrapper {position: fixed;}
.as-console-wrapper {position: fixed}
.as-console-wrapper {position:fixed;}
.as-console-wrapper {
position: fixed;
}
.as-console-wrapper
{
position: fixed;
}
Тебе это не нужно. Браузер делает это автоматически за вас (CSSOM - это оптимизированный результат всех ваших текущих применений CSS), и это то, что на самом деле применимо к вашей DOM. Шансы, что вы могли бы сделать это лучше, быстрее и с меньшими ресурсами, чем браузер, в основном составляют
null.