Как в строке найти дубликаты CSS стилей с помощью регулярных выражений?

Question

[av_tyschenko]

Приветствую всех экспертов!) Друзья, помогите пожалуйста с решением задачки. Есть кусок кода :

.class{padding:10px 5px;color:#fff;padding:50px!important;background:#000;padding:10px;}

Я пытаюсь с помощью регулярного выражения найти все дубликаты значений (в данном случае это padding).

Мне нужно удалить все паддинги кроме последнего, но если встречается со значением (!important) то оставить только его.

Строка регулярного выражения : ([a-z]+):(.*?)(!important)*; (она просто делит на свойства, но не умеет определять дубли)

Ссылка на пример : https://regex101.com/r/fCGsjS/1

Answer 1

[Larisa Moroz]

function clear_string($test_string) {
    $test_rules_match = preg_match('/(?P<selector>[^\{\s*]+)\{(?P<rules>[^\}]+)\s*\}/ui', $test_string, $test_string_parts);
    $test_selector = $test_string_parts['selector'];
    $test_rules = $test_string_parts['rules'];
    $new_test_string_array = []; $clean_string = $test_string;
    if(preg_match_all('/(?P<prop>[a-z]+):(.*?)(?P<important>!important)*;/i',$test_rules,$matches,PREG_PATTERN_ORDER)) {
    foreach ($matches['prop'] as $id=>$selector) {
      if(!isset($new_test_string_array[$selector]) || !preg_match('~important~ui',$new_test_string_array[$selector]) || $matches['important'][$id]>'')
        $new_test_string_array[$selector] = $matches[0][$id];
    }
    $clean_string = $test_selector.' {'.implode('',$new_test_string_array).'}';
    }
    return($clean_string);
}

Comments

[av_tyschenko]

Я извиняюсь) А чем данная структура отличается от моей?) Он так же разбирает строку на те же данные... Только осуществляется разбор через цикл. Идея заключается именно в том, что бы разобрать регулярным выражением. Дабы уменьшить нагрузку.

[Larisa Moroz]

В $clean_string будет ваш результирующий CSS-код уже без дублей, с учётом important.

[Larisa Moroz]

Регулярные выражения позволяют только разобрать строку, но не пересобрать как вам надо.
Задача «удалить дубли» не решается только лишь регулярным выражением.

[av_tyschenko]

Larisa Moroz: В целом, результат получается правильный) Но есть одна беда)

Если исходный код выглядит так :

.class{padding:10px 5px;color:#fff;padding:50px!important;background:#000;padding:10px;}

@media (min-width:768px) {
.container{padding:10px 5px;width:750px}
}
@media (min-width:992px) {
.container{width:970px}
}
@media (min-width:1200px) {
.container{width:1170px}
}

Он вырезает все подряд) Хотя строка чистая остается))

[Larisa Moroz]

Вы же в вопросе привели пример данных вида «строка», на основе которого и получили ответ.
В данном случае вам надо будет разобрать ваш исходный код соответственно на строки правил (можно теми же regexp-ами, у вас уже хорошо получается) и каждую строку обработать вышеприведённой функцией. Потом собрать обратно.

P.S.: расширила ответ до обработки полной строки правила вместе с селектором

[av_tyschenko]

Larisa Moroz: Спасибо большое)

[av_tyschenko]

Larisa Moroz: я извиняюсь за вопрос не по теме, а можно ли как то исключить группу?

Допустим у меня есть группа (;|}) ... и в обработке она мне не нужна... Зачем забивать память)

[Larisa Moroz]

Покажите пример вашего regex-выражения при котором получается такая группа

[av_tyschenko]

Вот что я имею в конечном итоге :

preg_match_all(
        '/(?<selector>[\-a-zA-Z0-9]+):(?<value>.*?)(?<important>!important)*(;|})/',
        $test_string[0],
        $string_parts
    );

    $matches = array_intersect_key($string_parts, array_flip(array('selector', 'value', 'important')));

Мне пришлось прогнать ответ preg_match_all через функцию, что бы убрать лишние данные из массива. Что бы не пришлось хранить лишние данные в памяти.

Можно ли как то изящнее решить эту проблему?

[Larisa Moroz]

Можно не именовать группы (убрать ?<selector> , ?<value>, ?<important>), а просто выбирать по порядковым номерам (1, 2, 3, соответственно). Это единственный вариант.
Чтобы не было мусора, не надо его искать:
/([\-a-zA-Z0-9]+):([^!;]+)(!important)?/ui

[av_tyschenko]

Larisa Moroz: Спасибо)

Answer 2

[Павел Корнилов]

Рабочий пример - https://js-master.ru/Техотдел/?PHP___Дубли_в_CSS

<?php
$str= ".class{padding:10px 5px;color:#fff;padding:50px!important;background:#000;padding:10px;}";
preg_match("/^([^\{]+){/", $str, $strOut);
$strOut= $strOut[0];
echo "<h5>Исходная строка:</h5> $str <hr>";

preg_match_all("~([^\{\;]+?)\:([^\;\}]+)~i", $str, $out);


$arr= [];
foreach($out[1] as $i => $p) {

	if(!in_array($p, $arr)) {
		// echo 'Unik - ' . $p . '<br>';
		$strOut.= $p . ':' . $out[2][$i] . '; ';
		$arr[]= $p;
	}
	
}

echo '<hr>$arr=<br>';
print_r ($arr);


echo '<h5>Результат:</h5>' . $strOut;

?>

Comments

[av_tyschenko]

Приветствую. Идея заключается в том, что бы реализовать именно по средствам регулярной функции. В обратном случае, представленный мною пример уже позволяет реализовать обработку данных.

[Павел Корнилов]

Тогда уже я не понимаю. Мы регулярками находим нужные элементы в приведенном коде.
preg_match_all("~([^\{\;]+?)\:([^\;\}]+)~i", $str, $out); возвращает в переменную out массив с 3 массивами:
1. Массив, содержащий все пары "свойство:значение"
2. Со всеми свойствами
3. Со всеми значениями

Но одной регулярки мало. Нужны условия...

[av_tyschenko]

KorniloFF: да) он возвращает, но результат получается такой

.class{padding:10px 5px; color:#fff; background:#000;

Он оставляет только первое значение) А по идеи должен оставлять только последние, как читал бы CSS) А при условии наличия ! important, оставлять только параметр с значением important

[Павел Корнилов]

Ах да, прошу прощения, одну строку не дописал. Полный вариант:

<?php
$str= ".class{padding:10px 5px;color:#fff;padding:50px!important;background:#000;padding:10px;}";
preg_match("/^([^\{]+){/", $str, $strOut);
$strOut= $strOut[0];
echo "<h5>Исходная строка:</h5> $str <hr>";

preg_match_all("~([^\{\;]+?)\:([^\;\}]+)~i", $str, $out);


$arr= [];
foreach($out[1] as $i => $p) {

	if(!in_array($p, $arr)) {
		// echo 'Unik - ' . $p . '<br>';
		$strOut.= $p . ':' . $out[2][$i] . '; ';
		$arr[]= $p;
	}
	
}

$strOut.= '}';

echo '<hr>$arr=<br>';
print_r ($arr);


echo '<h5>Результат:</h5>' . $strOut;

?>

Последнее значение оставляет интерпретатор броузера. Как известно, последний прописанный стиль с тем же приоритетом, является окончательным. Мой код наоборот оставляет первый стиль, являясь альтернативой стандартной интерпретации. Впрочем, если нужно повторить реакцию броузера на стили, это сделать не сложно на основе того же кода.