[SOLVED] Put semicolon to CSS text's last rule using regex

Question

I have this CSS code text. Using regex or any other method, I need to add semicolon (;) programmetically to the last property of a selector. How can I achieve this.

Input Text:
string = `
@media (min-width: 480px) {
#lsb, #dog {
width: 200px;
float: left
}
#main{
margin-left: 216px
}
.p {
color: red;
}
}
`

Output Text Should Be:
string = `
@media (min-width: 480px) {
#lsb, #dog {
width: 200px;
float: left;
}
#main{
margin-left: 216px;
}
.p {
color: red;
}
}
`

i.e. need to add ; to the last css property if it doesn't exist.
JavaScript or Python is preferred.

Answer 1

This regex is a straightforward one to target all those css lines that are missing semicolons.
Rest is just string replace method.

/^(?!.*@media).+:.+(?<!;)$/gm

(?!.*@media) : Ignore lines starting with .*@media
(?<!;) : Ignore lines ending with semicolon

To understand negative lookahead and lookbehind regex used above refer this helpful resource.
https://javascript.info/regexp-lookahead-lookbehind

To refer Beginner, Intermediate and Expert leve Regex l resources for JS developers refer this article
https://medium.com/@neetishop/best-learning-path-to-master-regex-for-javascript-developers-d928960a9d14

NOTE: Please always share your attempted code as well with question to simplify the answering process.

https://code.sololearn.com/WWdokcaLKxiM/?ref=app

Answer 2

I don't know if it is the most efficient way to get this done or not. But it works, check out my solution.

You have to paste the whole css code in the input section.

https://code.sololearn.com/cBwHx86Jy8jD/?ref=app

Edit: Sorry I didn't notice that you have explicitly mentioned "using regex". I have not used regex in this. But as I have already made the code, I will leave it here anyways.

Answer 3

Morpheus

You also need to deselect lines which have "{" at the end. Because the sample input OP has given, has "@media" line where semi-colon was not supposed to be appended

https://code.sololearn.com/WLiuaEJb40mg/?ref=app

See this.

Answer 4

Letsintegreat Thats correct. Thanks for mentioning this. I should have taken OPs CSS.

I ll share updated regex after sometime.
Currently busy with work.

Answer 5

March Zucherburger Letsintegreat
I have updated my original answer with better regex and also included my favorite learning resources.

Answer 6

Morpheus
Regex lookbehinds aren't yet supported in JS fully, so I would use negated character class instead, like so

regex = /:[^;{}]+?$/gm

March Zucherburger
You can do (in JS),

input = input.replace(regex, "amp;");
// here, amp; means the "whole match"

Illustration - https://code.sololearn.com/W8EZ4HP9ABnG/?ref=app

Also, as <...R...K...> said, your regex does some incorrect replacements!

Answer 7

Abdur Razzak please post a separate question if you have a problem that you need help with.

Answer 8

David Carroll
Morpheus

May u guys can help 😀 in regex

Answer 9

Letsintegreat thank you.
I got the new concept. I'll try this method.

Answer 10

March Zucherburger
..
Plz provide link of your created code here..
🙏

Answer 11

Letsintegreat
I think i have to tag
Morpheus
..
Morpheus
your code adds ; after { in first line
Which is not required🙄

Answer 12

Help me any person pls...

Answer 13

Пиши по русскому

Answer 14

I got it