Regex for remove rules of css in js

Question

i want to remove some css rules from a string with regex

exactly i want to remove all rules that have ":hover" for example body:hover

so i need to remove string between "," that contain :hover in something like this string

.hovered,.showFrame .container-fluid .added-element:hover , #MR_Modal_View.showFrame .container-fluid .added-element:hover , .showFrame .container-fluid:hover, #MR_Modal_View.showFrame .container-fluid:hover, .added-element:hover, body , div.test , #MR_Modal_View_Modal .added-element:hover, .ui-resizable-resizing

nanndoj · Accepted Answer · 2015-03-11 12:39:14Z

1

If you want to use regex you can do it. My suggestion is to use a three step approach. Split the text into lines, catch the text you want, and join the strings again:

var text = ".hovered,.showFrame .container-fluid .added-element:hover , #MR_Modal_View.showFrame .container-fluid .added-element:hover ,.showFrame .container-fluid:hover,#MR_Modal_View.showFrame .container-fluid:hover,.added-element:hover, body ,div.test , #MR_Modal_View_Modal .added-element:hover, .ui-resizable-resizing";
text = text.replace(/,/g,'\n').replace(/.*:hover\s*\n*/g, "").replace(/\n/g,',');

How this regex works Look this EXAMPLE

edited Mar 11, 2015 at 12:39

answered Mar 9, 2015 at 11:24

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

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

1 Comment

Silverboy.ir Over a year ago

Thanks . but this regext only work in this exmaple , i edited my question and put new css rules, it dosent work well

Jivings · Accepted Answer · 2015-03-09 11:13:20Z

0

You don't have to use a regex for this. The following code spits your string into an array of classes, filters the ones that do not contain :hover and converts them back to a string.

var classes = ".hovered,.showFrame .container-fluid .added-element:hover, #MR_Modal_View.showFrame container-fluid .added-element:hover ,.showFrame .container-fluid:hover, MR_Modal_View.showFrame .container-fluid:hover, .added-element:hover, #MR_Modal_View_Modal added-element:hover,.ui-resizable-resizing";

var filteredClasses = classes.split(',')
   .filter(function (c) { 
     return c.indexOf(':hover') === -1; 
   })
   .join(', ');

console.log(filteredClasses) // prints ".hovered,.ui-resizable-resizing"

answered Mar 9, 2015 at 11:13

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

1 Comment

Silverboy.ir Over a year ago

as it is a huge app , i need the best performance , so i think regex

Mr Lister · Accepted Answer · 2016-11-17 18:42:32Z

0

It's hard to match CSS rules for different browsers (compatible problems),

I found this lib may help to remove/add/change rules:

https://github.com/cssobj/cssobj

It's render CSSOM from JS into <head>, and you can change rules directly from JS Object.

edited Nov 17, 2016 at 18:42

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 1, 2016 at 1:03

James Yang

1,4164 gold badges18 silver badges27 bronze badges

Collectives™ on Stack Overflow

Regex for remove rules of css in js

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related