JavaScript，正則表達式 - 在範圍中包裝顏色值

我希望我的<code>元素中的所有CSS顏色值都包含在span標籤中。JavaScript，正則表達式 - 在範圍中包裝顏色值

所以這個：

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

感謝您的幫助！

來源

2012-06-12 Web_Designer

它很容易匹配十六進制顏色，rgb和hsla，但命名的顏色可能會更棘手。 – kevin628

如果你不打算徹底解析CSS，因此不介意一些可能的錯誤（評論，引號等），你可以使用表達式如下：

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

根據需要展開。

來源

2012-06-12 19:14:32 Qtax

看起來不錯，但我無法得到它的工作：http://jsfiddle.net/Daniel_Hug/wBxFb/1/在Chrome中，我得到「未捕獲的SyntaxError：意外的令牌非法」。任何幫助，將不勝感激。 –

@Web_Designer，在JS中你引用像'var re =/expression/i;'這樣的正則表達式來代替所有你使用的'/ g'。請參閱http://jsfiddle.net/wBxFb/2/以獲取工作示例。 – Qtax

真棒，謝謝！ –

你需要一個語法高亮器。我不是編碼方面的專家，但你可以使用一些插件，如Google Code Prettify

來源

2012-06-12 19:00:59

我已經使用Google代碼美化，但它不包裝CSS顏色值的跨度。 –

JavaScript，正則表達式 - 在範圍中包裝顏色值

回答

相關問題