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

这样的插件

javascript，regexp - 以span为单位包装颜色值

2 个答案: