add class to each line of css with regex - regex

I want to add a class at the start of each line of my css
I want
.more {
padding: 5px 10px 0;
}
#fbook {
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
to look like
.test .more {
padding: 5px 10px 0;
}
.test #fbook {
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
something like this.
^([A-Za-z0-9]+)$
would work if my css looked like this
more
{
padding: 5px 10px 0;
}
fbook
{
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
but I can't seem to get anything working when to find the . # {

Try this
$result = preg_replace('/(?i)^([.#a-z]+\{)$/m', '.test $1', $subject);
Explanation
"
(?im) # Match the remainder of the regex with the options: case insensitive (i); ^ and \$ match at line breaks (m)
^ # Assert position at the beginning of a line (at beginning of the string or after a line break character)
( # Match the regular expression below and capture its match into backreference number 1
[.#a-z] # Match a single character present in the list below
# One of the characters “.#”
# A character in the range between “a” and “z”
+ # Between one and unlimited times, as many times as possible, giving back as needed (greedy)
\{ # Match the character “{” literally
)
\$ # Assert position at the end of a line (at the end of the string or before a line break character)
"

You can use a modern tool like LESS. Simply take your code, and wrap it with .test{ }:
.test {
.more {
padding: 5px 10px 0;
}
#fbook {
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
}
If you only need it one time, you can do it online: http://leafo.net/lessphp/#demo
If you want to do it from time to time, there are less libraries for many languages which you can use, and a client side JavaScript option.

Related

how to match values of a line by values of another line?

I have a css file with the following structure:
#reg-1 {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-1-magTarget {
top: 64.13%;
left: 36.36%;
height: 12.06%;
width: 99.14%;
}
#reg-2 {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
#reg-2-magTarget {
top: 33.09%;
left: 17.27%;
height: 26.41%;
width: 45.04%;
}
And wanted to find a way to match the values of "#reg-1 {" by replacing the ones of "#reg-1-magTarget {" in notepad++ with regular expressions
to something like this:
#reg-1 {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-1-magTarget {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-2 {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
#reg-2-magTarget {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
I really don't know much about this but I was interested and I was trying combinations
I began to structure little by little the regex necessary to match it
try first
#reg-(\d) {
then I corrected it with this
#reg-(\d{1,2}) {
then i completed it
#reg-(\d{1,2}) {(\r\n)top:\s\d{1,2}(\r\n)left:\s\d{1,2}
then change to
#reg-(\d{1,9})-magTarget(\s){(\r\n)top:(\s)(\d{1,9})(\r\n)left:(\ s)(\d{1,9})
then search, I think it could work something like:
^(.+?)\h+:\h+"
by
$0$1
what makes this
Afghanistan: ''
be
Afghanistan : 'Afghanistan'
You can try (regex101):
(#reg-\d+)(.*?})\s+\1-magTarget.*?}
And for replacement
\1 \2\n\1-magTarget \2
Note: check Regular expression and . matches newline:
Find what:
(#reg-\d+)([^}]*})\R\K\1-magTarget[^}]*}
The pattern matches:
(#reg-\d+) Capture group 1, match #reg- and 1+ digits
([^}]*}) Capture group 2, Match 0+ times any char except } and then match }
\R\K Match a newline and then forget what is matched so far
\1-magTarget A backreference to the same what is matched in group 1, followed by matching -magTarget
[^}]*} Match 0+ times any char except } and then match }
Replace with:
\1-magTarget \2
See a regex101 demo.
But perhaps you can prevent the duplication of the css by writing the result as:
#reg-1, #reg-1-magTarget {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-2, #reg-2-magTarget {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
Find what:
(#reg-\d+)([^}]*})\R\1-magTarget[^}]*}
Replace with:
\1, \1-magTarget\2
See another regex101 demo.

How do I find everything beside regex in notepad++?

I want to find and mark all the code that doesn't fit my regex.
[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*
Basically I want to mark everything beside red-highlighted part
my-regex-at-work.jpg
The code:
.pull-right>.dropdown-menu {
right: 0;
left: auto
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid\9
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
margin-bottom: 2px
bottom: 100%;
}
#media (min-width:768px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto
}
.navbar-right .dropdown-menu-left {
right: auto;
left: 0
}
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle
}
My ideas do not work
[^[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*]
[^[[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*]]
it seems to be not possible with notepad++ because of backtracking, it could be done if regex engine supports control verbs:
[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*(*SKIP)(?!)|.*
regex101
to tell to the engine to skip the matched part and fail, otherwise when engine fails to match it continues with input cursor on next character.
Append \K|.* to your regex:
[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*\K|.*
Then hit Mark All button.

Notepad++ regex replace Css #media

I want to clean out everything between #media and }. Only after research I still cannot find how. I want to replace everything between the BOLD text below, including the BOLD text itself:
#media all and (max-width: 240px)
{
#toast-container>div
{
padding: 8px 8px 8px 50px;
width: 11em;
}
#toast-container .toast-close-button
{
right: -.2em;
top: -.2em;
};
}
#media (min-width: 768px)
{
.lead
{
font-size: 19.5px;
};
}
RESULT 1: #media }
RESULT 2: nothing
In Replace Dialog(Ctrl+H), enable Regular Expression and . matches newline
Then, search for:
#media.*?\};.*?\}
or
#media.*?(\};)\s*?\}
And replace for empty string... (this will remove all - including bold text)
Let me know if it works.

What RegEx to select comma separated CSS selectors individually in SublimeText?

The other day I had to prefix every single CSS selector with another tag in order to increase its specificity. I though I'd flex my regex muscles a bit and I came up with this regex:
(^(((\s)+)?(?!.+: )(?!\.IE)[a-z.].+?)([,{]))
The plan was to replace the entire captured match with something like 'body $1'. There are a couple of negative lookaheads to avoid matching lines like background-color: property and .IE selectors
The screenshot describes the problem:
Here is some sample text:
/* line 18, ../scss/SplashPage/_page.scss */
* {
-webkit-tap-highlight-color: transparent;
}
/* line 35, ../scss/SplashPage/_page.scss */
body header {
*zoom: 1;
background: #eaeaea;
}
/* line 221, ../scss/MainStyle/_mixins.scss */
body header:before, body header:after {
display: table;
content: "";
}
/* line 224, ../scss/MainStyle/_mixins.scss */
body header:after {
clear: both;
}
body .utility-nav {
right:0
}
/* line 40, ../scss/SplashPage/_page.scss */
body .home-link {
text-indent: -99999px;
white-space: nowrap;
overflow: hidden;
background: transparent url("~/images/clipsal-logo2.png") center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url("~/images/clipsal-logo.svg");
background-image: linear-gradient(transparent, transparent), url("~/images/clipsal-logo.svg");
background-position: top left;
background-repeat: no-repeat;
display: block;
float: left;
/*width: 120px;
height: 50px;
margin: 20px 0px 15px 25px;*/
background-size: 100% auto;
}
I think it's the start of line anchor (^) that needs do be dropped. Having said that I am not sure what the regex should be :)
Note: I understand that the problem could have easily been solved using SASS, but where's the fun in that!
Thanks

Regular Expression to get "left" only from style

This is my regular expression to get "left" and its value.
/(left\s*:\s*)(\d+)?(px)/
My problem is, it pulls padding-left and left.
vertical-align: top; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: list-item; width: 420px; position: absolute; top: 0px; left: 700px; height: 580px;
How can I get "left" and its value only?
I put a \s in front of left and that works... But I can't always guarantee there will be a space in front of left.
Thanks...
/(?:^|[^-])(left)\s*:\s*(\d+|auto)([a-z]{2})?/
Will fetch what you want with "left" in group 1, "700" in group 2 and "px" in group 3
(?:^|[^-]) = The start of the string, or a non-hyphen character
(left) = The word left (capture group 1)
\s*:\s* = A colon with optional space characters either side
(\d+|auto) = One or more numbers, or the string "auto" (capture group 2)
([a-z]{2})? = Two letters, e.g. "px" "em" "pt" (capture group 3 - optional)
Instead of using a RegEx, you could use a CSS parser. This is a more robust solution as a parser is better suited for this task.
An example using Python and cssutils
example.css
.myClass {
border: 1px solid black;
margin-left: 100px;
left: 700px;
padding-left: 50px;
}
get-left.py
#!/usr/bin/env python
import cssutils
sheet = cssutils.parseFile('example.css')
for rule in sheet:
if rule.type == rule.STYLE_RULE:
for prop in rule.style:
if prop.name == 'left':
print("{0}: {1}".format(prop.name, prop.value))
In this Python script, prop.name will return the name of the property and prop.value its value.
output
$ ./get-left.py
left: 700px