JS регулярное выражение для замены пустых строк в SCSS между закрывающей фигурной скобкой и открытием class / id

1

Я пытаюсь создать регулярное выражение для замены пустых строк между наборами правил SCSS. Регулярное выражение должно совпадать с закрывающей фигурной скобкой до класса (.) Или id (#) и удалять любые строки. Любые пустые строки, которые не помещаются между этими идентификаторами, не должны быть затронуты, в том числе, если в середине есть что-то вроде комментария.

У меня есть скрипт, который можно использовать для тестирования приведенного ниже примера: https://jsfiddle.net/9y33cvtg/2/

Пример:

ДО

// START

.test1 {
    background: #FFFFFF;

    .test2 {
        background: #FFFFFF;

        .test3 {
            background: #FFFFFF;
        }
    }
}

.test5 {
    background: #FFFFFF;
}

.test6 {
    background: #FFFFFF;
}

// Comment

.test7 {
    background: #FFFFFF;
}

ПОСЛЕ:

// START

.test1 {
    background: #FFFFFF;

    .test2 {
        background: #FFFFFF;

        .test3 {
            background: #FFFFFF;
        }
    }
}
.test5 {
    background: #FFFFFF;
}
.test6 {
    background: #FFFFFF;
}

// Comment

.test7 {
    background: #FFFFFF;
}

До сих пор я пытался использовать следующее, но он не сработал:

str.replace(/\}(.*?)\./g, '')
  • 0
    Если вы хотите удалить пустую строку, почему бы не использовать \n или \r?\n в регулярном выражении? . не соответствует ни CR, ни LF в регулярном выражении JS. Кстати, вы могли бы по крайней мере попытаться \s чтобы соответствовать любому пробелу. Кроме того, CSS-разбор с регулярным выражением не может быть на 100% безопасным. Было бы неплохо использовать синтаксический анализатор CSS.
  • 0
    Мне нужно, чтобы он был более конкретным, чем любая пустая строка, если в середине есть комментарий или если это открывающий набор правил, то строка должна остаться. Это видно на примере ура
Показать ещё 4 комментария
Теги:
sass

2 ответа

1
Лучший ответ

Разбор CSS файлов должен выполняться с помощью выделенных библиотек.

Следующее решение будет только делать следующее: оно обнаружит строку, которая равна } за которой следует 1 или более символов пробелов до строки, начинающейся с точки. Используйте его на свой страх и риск.

.replace(/^}$\s+^\.\b/gm, '}\n.')

См. Демо-версию regex.

подробности

  • ^ - начало строки (из-за модификатора m)
  • } - a }
  • $ - конец строки
  • \s+ - 1 или более пробелов
  • ^ - начало строки
  • \. - точка (обратите внимание: если вы хотите убедиться, что за ней следует некоторое слово char, вы можете использовать \b или даже \w)

Ниже приведена демонстрация JS:

var str = document.querySelector('.string').innerText;
var output = document.querySelector('.output');

output.innerText = str.replace(/^}$\s+^\.\b/gm, '}\n.');
<script src="/jquery.min.js"></script>
<strong>Input:</strong>
<pre class="string">
// START

.test1 {
	background: #FFFFFF;

	.test2 {
		background: #FFFFFF;

		.test3 {
			background: #FFFFFF;
		}
	}
}

.test5 {
	background: #FFFFFF;
}

.test6 {
	background: #FFFFFF;
}

// Comment

.test7 {
	background: #FFFFFF;
}
</pre>

<br>
<strong>Output:</strong>
<pre class="output">
</pre>
Поделиться
  • 0
    Просто осознал, что это не работает для вложенных правил в SCSS, угадайте,} не начало строки? jsfiddle.net/9y33cvtg/3
  • 0
    Попробуйте .replace(/^([^\S\r\n]*)\}\s+^([^\S\r\n]*)\./gm, '$1}\n$2.') . Если это будет усложнять дальше, примите мой совет и начните использовать какой-то CSS-парсер.
Показать ещё 1 комментарий
0

Привет, вам нужно поймать разрыв строки следующим образом:

output.innerText = str.replace(/^}[\r\n]{2,}(?!\/\/)/gm, '}\n');

кажется, работает, скажите, если он решит вашу проблему

Поделиться
  • 1
    Это не сработает, потому что удалит пустые строки перед комментариями.
  • 0
    Хорошо, я просто отредактирую свой пост, скажите, работает ли он на вас
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню