sed replace with unknown section in css

Question

I could use an assist with a sed search and replace.

In this situation the file is css and the section I want to replace is among other values being set in the css. The following works:

sed -i 's/PlayButton-playCircle-kffp_v{border:2px solid hsla(0,0%,100%,.7);border-radius:50%;color:hsla(0,0%,100%,.7);display:inline-block/PlayButton-playCircle-kffp_v{border:2px solid hsla(0,0%,100%,.7);border-radius:50%;color:hsla(0,0%,100%,.7);display:none/g' file.css

But in another file.css where I wish to do the same thing the values surrounding the 'display:inline-block' may be in a different order. So it would make more sense to use something like a '.*' like "PlayButton-playCircle-kffp_v{.*;display:inline-block".

The css file is being generated automatically, once generated it is fixed, but I can't be sure what order the attributes are within the {}, I need to match the item with PlayButton-playCircle-...... that has the attribute display:inline-block and change to display:none.

Updating with answer formed with information from both commenters:

sed -i 's/$PlayButton-playCircle-......{[^}]*;$display:inline-block/\1display:none/g' $maincss

Instead of .*, [^}]* is used to match in the same way as .* but not matching '}' if found. This ensures the match is kept to one level of depth within {}.

Thank you!

Itagaki Fumihiko · Accepted Answer · 2022-07-05 23:38:39Z

1

You can rewrite it a bit as follows.

sed -i 's/\(PlayButton-playCircle-kffp_v{.*\)display:inline-block/\1display:none/g' file.css

The text between $ and $ will be captured and can be referenced as \1 in the replacement string.

answered Jul 5, 2022 at 23:38

Itagaki Fumihiko

5643 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jhnc Over a year ago

/a.*b/ matches a-b but also a-b-b-b-b-b so this can change the wrong display (very likely if this is minimised css with everything on one line)

karezza Over a year ago

@jhnc what about using [^}]* rather than .*? to only match between one level of {}

jhnc Over a year ago

@karezza Yes, that would probably be more reliable, as long as this is plain css (not sass, etc) and you don't have any nested blocks before the display property. [^}] should also protect against the situation where you have any PlayButton-playCircle-kffp_v that do not contain a display.

Collectives™ on Stack Overflow

sed replace with unknown section in css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related