Подскажите, как правильно создать регулярное выражение?
чтобы более понятней была суть проблемы, приведу пример допустим с 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-код
(?:-(\pL+))
, хотелось-бы понять работу с этим выражением? и кстати не работает это выражение(?:-(\pL+)){2}:[^;]+;-(o|webkit|moz|ms)-[^{;]+?;
это не работает. Как правильно его использовать объясните пожалуйста?(?<!:)(?<!:\s)-(?:webkit|moz|ms|o)-[^;]*;
? regex101.com/r/9oRqrB/1