Question

我想从带有正则表达式

的字符串中删除一些css规则

我想要删除所有具有“：hover”的规则例如body：hover

所以我需要删除“，”之间的字符串，其中包含：hover in like 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

Answer 1

如果你想使用正则表达式，你可以做到。我的建议是采用三步法。将文本拆分为行，捕获所需的文本，然后再次连接字符串：

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,',');

这是怎样的regex works 看这个EXAMPLE

Answer 2

你没有为此使用正则表达式。以下代码将您的字符串吐入一个类数组，过滤那些不包含:hover的类并将它们转换回字符串。

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"

Answer 3

很难匹配不同浏览器的CSS规则（兼容问题），

我发现这个lib可能有助于删除/添加/更改规则：

https://github.com/cssobj/cssobj

它将JSOM中的CSSOM渲染为<head>，您可以直接从JS Object更改规则。

正则表达式删除js中的css规则

3 个答案: