匹配字符串并删除关联的CSS

Question

所以我有一个CSS选择器的Javascript数组：

array is like the following: '.header', '#footer', '#nav', etc

我还有一个div包含我的网站CSS作为文本（12,000行长）：

<div id="all">
#nav
 {
   border: 1px solid;
   color: black;
 }
 #footer
 {
   display: block;
 }
 </div>

我需要从数组中取出每个选择器并在$（'＃all'）中匹配，从删除选择器的开头到它的结束括号。

即

// for each from the array
$('#all').find($(this));
// removes everything from selector to its end bracket

任何人都可以提供建议吗？这是删除未使用的网站CSS。我被困了一段时间。理解！

Answer 1

  

更新：添加调试模式，输入和输出。

好吧，我猜你有一堆CSS，你想删除一些规则。让我假设这些：

1. 每行只有一个选择器。
2. 每一行都以该选择器开头。
3. 每行都有一个完整的规则。即，selector {property: value;}

如果第三个选项没有成功，那么有很多CSS compressors，您可以使用它们制作这个CSS：

#footer
{
  display: block;
}

分为：

#footer { display: block; }

现在，一旦在文本文件中有了这个，就可以使用PHP或一些优秀的编程语言进行操作。我不推荐客户端方面。假如你有PHP，并且你有这套规则：

#nav { border: 1px solid; color: black; }
#footer { display: block; }

你有你的阵列：

$remove = array('.header', '#footer', '#nav');

您可以使用以下内容：

<pre><?php
$debug = false;
$rules[] = ".header { border: 1px solid; color: black; }";
$rules[] = "#nav { border: 1px solid; color: black; }";
$rules[] = "#footer { display: block; }";
$rules[] = "#header { border: 1px solid; color: black; }";
$rules[] = ".nav { border: 1px solid; color: black; }";
$rules[] = ".footer { display: block; }";
$remove = array('.header', '#footer', '#nav');
$final = array();
foreach ($rules as $rule)
{
    if ($debug) echo "Debug: ", var_dump(strpos($rule, " ")) . "\n";
    if ($debug) echo "Debug: ", var_dump(substr($rule, 0, strpos($rule, " "))) . "\n";
    if ($debug) echo "Debug: ", var_dump(in_array(substr($rule, 0, strpos($rule, " ")), $remove)) . "\n";
    if ($debug) echo "---\n";
    if ( !in_array(substr($rule, 0, strpos($rule, " ")), $remove) )
        $final[] = $rule;
}
echo implode("\n", $final);
?></pre>

上面的脚本包含一个调试。如果将$debug设置为true，则可以看到正在检查的不同内容。

给出的输入是：

.header { border: 1px solid; color: black; }
#nav { border: 1px solid; color: black; }
#footer { display: block; }
#header { border: 1px solid; color: black; }
.nav { border: 1px solid; color: black; }
.footer { display: block; }

输出结果为：

#header { border: 1px solid; color: black; }
.nav { border: 1px solid; color: black; }
.footer { display: block; }

小提琴：http://phpfiddle.org/main/code/ehd-z4j