javascript - javascript, regexp - 在 span 中包装颜色值

Question

我希望<code>元素中的所有 CSS 颜色值都包含在 span 标签中。

所以这：

<code id="colorful-css">
body {
    color: black;
}
a {
    text-decoration: none;
    color: #0cf;
}
#box {
    outline: 1px solid rgb(255,0,0);
    background: hsla(235, 85%, 43%,.5);
}
</code>

会变成这样：

<code id="colorful-css">
body {
    color: <span class="css-color">black</span>;
}
a {
    text-decoration: none;
    color: <span class="css-color">#0cf</span>;
}
#box {
    outline: 1px solid <span class="css-color">rgb(255,0,0)</span>;
    background: <span class="css-color">hsla(235, 85%, 43%,.5)</span>;
}
</code>

谢谢你的帮助！

Answer 1

如果您不打算完全解析 CSS，因此不介意一些可能的错误（注释、引号等），您可以使用如下表达式：

#(?:[\da-f]{3}){1,2}\b|\b(?:rgba?|hsla?)\([^()]+\)|\b(?:red|blue|list|of|valid|color|names|...)\b

根据需要扩展。

Answer 2

为此，您需要一个语法荧光笔。我不是编码专家，但您可以使用一些插件，例如Google Code Prettify