1

Подскажите, как правильно создать регулярное выражение?
чтобы более понятней была суть проблемы, приведу пример допустим с css-кодом.
Нужно из css вырезать вендорные префиксы, к примеру такие:

-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%); 

использую такое регулярное выражение в phpstorm: -(o|webkit|moz|ms)-[^{;]*?;
но сюда также попадают и такие, которые нужно оставить:
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.45), transparent 47%);
или
display: -webkit-box;
line-height: -moz-block-height;
в результате могут быть некорректные стили после вырезания:
background:display:line-height:

т.е. нужно предусмотреть, если перед этим выражением -(o|webkit|moz|ms)- есть что-то типа двоеточия с пробелом (...ground: -o-linear...), то пропустить, не удалять.
это выражение не подходит:
(?!:\s)-(o|webkit|moz|ms)-[^{;]+?;
т.е. (?!:\s) - отрицание наличия символов

P.S.
input

.wrap.style-3 .content-wrap {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.header-top-panel:before, .header-top-panel:after {
    content: " ";
    display: table;
}
.wrap.style-3 .content-wrap {position: relative;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
img{-ms-interpolation-mode:bicubic;}
fieldset{border:solid 1px #e7e7e7;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;padding:12px;margin:18px 0;}
row-content-top{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;}  

output

.wrap.style-3 .content-wrap {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.header-top-panel:before, .header-top-panel:after {
    content: " ";
    display: table;
}
.wrap.style-3 .content-wrap {position: relative;top: 50%;transform: translateY(-50%);}
img{}
fieldset{border:solid 1px #e7e7e7;border-radius:3px;padding:12px;margin:18px 0;}
row-content-top{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:flex-start;box-sizing:border-box;}  

т.е. под регулярное выражение должны подходить строки, начинающиеся с приставки
(-webkit-|-moz-|-ms-|-o-) до закрывающей кавычки ;, к примеру:

-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);  

Но это правило css: display: -webkit-box; не должно подходить под регулярное выражение (оно также начинается с префикса, но перед ним есть двоеточие), потому-что после вырезания будет некорректный css-код, (display:display:display:)
т.е. нужно в рег. выражении предусмотреть, что если перед приставкой (-webkit-|-moz-|-ms-|-o-) есть двоеточие, тогда это не должно подходить, т.к. после вырезания будет некорректный css-код

19
  • @Эдуард подскажите, а что означает это (?:-(\pL+)), хотелось-бы понять работу с этим выражением? и кстати не работает это выражение
    – word
    28 фев 2019 в 9:57
  • (?:-(\pL+)){2}:[^;]+;-(o|webkit|moz|ms)-[^{;]+?; это не работает. Как правильно его использовать объясните пожалуйста?
    – word
    28 фев 2019 в 10:02
  • @Эдуард, посмотрите пож-ста, regex101.com/r/39rcik/3, ваше выражение вырезает правила стилей, в которых вообще нет префиксов, в результате стили ломаются, нужно чётко определить, чтобы вырезать только правила css, в которых есть префиксы
    – word
    28 фев 2019 в 10:10
  • @Эдуард, обновил regex101.com/r/39rcik/6, тут нужно учитывать специфику css, ваш код не работает
    – word
    28 фев 2019 в 10:16
  • 1
    (?<!:)(?<!:\s)-(?:webkit|moz|ms|o)-[^;]*;? regex101.com/r/9oRqrB/1 28 фев 2019 в 12:25

1 ответ 1

1

(?!:\s) — блок предварительного просмотра вперёд, он находит позицию, сразу после которой нет двоеточия и пробельного символа. Вы можете использовать блоки предварительного просмотра назад:

/(?<!:)(?<!:\s)-(?:webkit|moz|ms|o)-[^;]*;/

См. демо онлайн.

Подробности

  • (?<!:) - блок предварительного просмотра назад, сразу перед текущей позицией не должно быть двоеточия
  • (?<!:\s) - блок предварительного просмотра назад, сразу перед текущей позицией не должно быть двоеточия и пробельного символа
  • - - дефис
  • (?:webkit|moz|ms|o) - незахватывающая подмаска, находит строки webkit, moz, ms, o
  • - - дефис
  • [^;]* - ноль и более символов, отличных от точки с запятой
  • ; - точка с запятой.
4
  • а подскажите плиз, почему не срабатывает только это (?<!:\s) ? для чего нужно два выражения? (?<!:)(?<!:\s)
    – word
    28 фев 2019 в 13:10
  • @word (?<!:)(?<!:\s) = (?<!:\s?) Лучше тут, конечно, использовать (?<!:\s*). Просто в большинстве случаев такие блоки просмотра назад недействительны. Всё зависит от конкретной реализации регулярных выражений, поэтому вы должны были указать язык программирования, на котором пишете код. Так бы вы получили точный ответ гораздо раньше и без дополнительных вопросов. 28 фев 2019 в 13:39
  • (?<!:\s*)-(?:webkit|moz|ms|o)-[^;]*; это не подходит, для чего два выражения?.и по вопросу языка, ну если из первоначального варианта (?!:\s)-(o|webkit|moz|ms)-[^{;]+?; мало было информации про используемый язык (pcre) извиняюсь. разве другие виды регулярок настолько похожи?, не знал это
    – word
    28 фев 2019 в 13:49
  • Тут это выражение очень даже подходит. В PCRE лучше пользоваться :\s*(-(?:webkit|moz|ms|o)-[^;]*;)(*SKIP)(*F)|(?1). 28 фев 2019 в 14:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.