javascript регулярное выражение для соответствия тегов

Question

Рассмотрим следующие медиазапросы.

 @media screen and (max-width: 768px) {
                .sd[data-s-e53caaf5-c227-4897-bb16-f957ee293e2f] {
                  max-width: calc(100% - 20px);
                }
              }

@media screen and (max-width: 480px) {
                .sd[data-s-e53caaf5-c227-4897-bb16-f957ee293e2f] {
                  max-width: calc(100% - 20px);
                }
              }

У меня есть машинный код html. и у меня более 200 таких медиа-запросов в коде. Я хочу удалить их все.

Поэтому я попытался выполнить поиск по регулярному выражению VScode

, но мое регулярное выражение

 @media screen and \(max-width: 768px\)\s\{\n

соответствует только первой строке всех медиазапросов. Дайте мне знать, как сделать это с помощью регулярных выражений. Предложите, если какие-либо другие методы сделать то же самое. ✌️

Answer 1

Вы можете сопоставить текст с регулярным выражением

^ *@media screen and \(max-width: \d{3}px\) *{ *\r?\n(?:.*\S.*\r?\n)+\r?\n?

и заменить сопоставленный текст пустой строкой.

Демо

Движок regex выполняет следующие операции.

^ *               # match 0+ spaces at beginning of a line 
@media screen and \(max-width:  # match string 
\d{3}px\) *       # match 3 digits, 'px)' then 0+ spaces 
{ *\r?\n          # match '{', 0+ spaces, '\r' opt, '\n'
(?:.*\S.*\r?\n)   # match a line with 1+ non-whitespace chars
+                 # match above non-capture group 1+ times 
\r?\n?            # optionally match '\r' and '\n'