CSS 类名的正则表达式

Question

我正在尝试在 PHP 中创建一个函数，该函数将遍历 CSS 和 JS 文件，并在 CSS 选择器中替换类名和 ID（但不是直接的 HTML 元素或其中的 CSS 属性），而不会破坏其他内容。然而，在世界上所有的愚蠢运气中，我对正则表达式毫无希望。

我有两个数组，一个包含“原始”单词，一个包含我想要转换成的单词。

$array1 = array("ul", "text", "border");
$array2 = array("bar", "foo", "far");

$str = magic($str, $array1, $array2);

而这个神奇的功能会改变下面的 CSS 文件

#test-text ul {
    text-decoration: none;
}
.ul-border span {
    border: 1px solid #fff;
}
#text.niceborder {
    border-color: #ccc;
}

进入

#test-foo ul {
    text-decoration: none;
}
.bar-far span {
    border: 1px solid #fff;
}
#foo.nicefar {
    border-color: #ccc;
}

我希望同样的函数可以用于 JS 中的 jQuery 选择器做同样的事情，但是如果我得到了找到合适的选择器的基本逻辑并且只为 .和 # 个片段，我想我可以自己制作一个 $() 改编；）

谢谢你

Answer 1

我不知道你为什么需要它，但我认为这是你想要的功能：

<?php

/**
 * Replaces all occurences in a CSS class or ID name with the provided replacement.
 * 
 * @param string $subject
 * @param array $search
 * @param array $replace
 * @return string 
 */
function replaceNames($subject, $search, $replace)
{
    // First generate all search regular expressions
    $searchRegexpressions = array_map(function($s)
    {
        return '/([\#\.][a-z0-9\-_]*)(' . preg_quote($s) . ')/i';
    }, $search);
    // Now all associated replacement expressions
    $replaceRegexpressions = array_map(function($r)
    {
        return '$1' . $r;
    }, $replace);

    do {
        // Now do the replacements as often as necessary to replace every occurence.
        $subject = preg_replace($searchRegexpressions, $replaceRegexpressions, $subject, -1, $count);
    } while ($count > 0);

    return $subject;
}
?>

解释正则表达式：

/([\#\.][a-z0-9\-_]*)(' . preg_quote($s) . ')/i

1. 必须以 # 或 . 开头。
2. 字母、数字或 - _ 可以随心所欲地跟随 (*)。 （如果你有更时髦的类名，你可能需要添加字符。）
3. 有问题的字符串。

另外：我使用了匿名函数。如果您不使用 PHP 5.3.0+，则必须实际创建两个映射函数，并改用：array_map(mySearchRegexFuncion, $search);。

Answer 2

我很难找到一个理由，你正在尝试做的事情永远是一个好主意。如果您只想根据某些设置或基于 PHP 的逻辑更改一堆样式，只需使用 PHP 生成一个类名，然后可以使用它来生成覆盖 CSS 规则。

像这样：

<?php
  $a = "my-a-style";
  $b = "my-b-style";
  $parentClass = someLogicalFunction() ? $a : $b;
?>
<div class="<?php echo $parentClass; ?>">
  <div id="test">
    <ul>
      <li><span>Some Stuff</span></li>
    </ul>
  </div>
</div>

现在您可以创建单独的 CSS 规则：

.my-a-style #test {}
.my-b-style #test {}