验证html颜色代码JS

Question

我在查找验证html颜色代码的代码。想检查用户是否输入了有效的颜色代码，你可以帮助吗？

我知道我需要一个正则表达式的东西，但我无法理解一个想想正则表达式的东西：S

感谢

Answer 1

可以匹配十六进制颜色是这样的：

if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(str)) { 
    //Match 
} 

注意，这不会处理名称或rgb(n, n, n)。

可以匹配rgb(x, y, z)颜色是这样的：

if (/^rgb\s*(\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*)$/i.test(str)) { 
    //Match 
} 

注意，这将匹配rgb(299, 299, 299)。

Answer 2

你可以创建一个抽象元素，尝试将颜色应用于该元素：

function validate_color(c) { 
    var litmus = 'red'; 
    var d = document.createElement('div'); 
    d.style.color=litmus; 
    d.style.color=c; 
    //Element's style.color will be reverted to litmus or set to '' if an invalid color is given 
    if(c !== litmus && (d.style.color === litmus || d.style.color === '')){ 
     return false; 
    } 
    return true; 
}