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这样的插件