匹配字符串并删除关联的 CSS [关闭]答案

【问题标题】：Match string and remove associated CSS [closed]匹配字符串并删除关联的 CSS [关闭]
【发布时间】：2013-03-07 13:46:18
【问题描述】：

所以我有一个 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。我被困了一段时间。赞赏！

【问题讨论】：

您发布的 HTML 无效。除非您将 CSS 作为内容输出？
('.header', '#footer', '#nav') 这不是一个数组。
您正试图从 div 中删除文本？ jQuery 选择器不会神奇地匹配文本！
您是否在 html div 元素中编写 CSS 代码？你想用它做什么？
CSS 代码作为文本存储在 DIV 中。该数组包含我要从 CSS 中删除的选择器的名称（即 DIV 内的文本）。它是删除未使用的站点 CSS。

标签： javascript jquery logic

【解决方案1】：

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

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

每一行只有一个选择器。
每一行都以该选择器开头。
每一行都有一个完整的规则。即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

【讨论】：