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

我希望我的

元素中的所有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>


身体{
颜色：黑色；
}
a{
文字装饰：无；
颜色：#0cf；
}
#盒子{
轮廓：1px实心rgb（255,0,0）；
背景：hsla（235,85%，43%，0.5）；
}

将变成这样：

<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>

身体{
颜色：黑色；
}
a{
文字装饰：无；
颜色：#0cf；
}
#盒子{
轮廓：1px实心rgb（255,0,0）；
背景：hsla（235,85%，43%，0.5）；
}

---

谢谢你的帮助

你需要一个语法高亮显示。我不是编码方面的专家，但如果您不打算完全解析CSS，因此不介意一些可能的错误（注释、引号等），您可以使用类似于

的插件，您可以使用以下表达式：

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

---

根据需要进行扩展。

匹配十六进制颜色、rgb和hsla很容易，但命名的颜色可能更复杂。我已经使用了Google code prettify，但它没有围绕CSS颜色值进行跨域处理。这看起来不错，但我无法实现：在Chrome中，我得到了“未捕获的语法错误：意外标记非法”。任何帮助都将不胜感激。@Web_Designer，在JS中您引用regex-like

var-re=/expression/i

，以替换所有您使用的

/g

。有关工作示例，请参见。