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

Regex for remove rules of css in js

本文关键字：css 规则 中的 js 用于 删除 正则表达式      更新时间：2023-09-26

我想用正则表达式从字符串中删除一些 CSS 规则

正是我想删除所有带有"：悬停"的规则例如身体：悬停

所以我需要删除 "，"之间的字符串，其中包含 ：悬停在类似这个字符串中的内容

.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
如果你想

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

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

此正则表达式的工作原理看这个例子

您不必为此使用正则表达式。下面的代码将字符串吐到类数组中，筛选不包含: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"

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

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

https://github.com/cssobj/cssobj

它将CSSOM从JS渲染到<head>，你可以直接从JS对象更改规则。

相关文章：