Làm cách nào để kiểm tra xem chuỗi có phải là biểu diễn màu hex hợp lệ không?

Question

Ví dụ:

AA33FF = giá trị hex màu

Z34FF9 = color hex không hợp lệ (có Z trong đó)

AA33FF11 = không hợp lệ màu hex (có nhân vật phụ)

Answer 1

var isOk = /^#[0-9A-F]{6}$/i.test('#aabbcc') 

Để xây dựng:

^ trận đấu bắt đầu
# một hash
[a-f0-9] bất kỳ lá thư từ af và 0-9
{6} nhóm trước đó xuất hiện chính xác 6 lần
$ trận đấu cuối
i bỏ qua trường hợp

và nâng cao hơn:

var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#ac3') // for #f00 (Thanks Smamatti) 

Answer 2

function isHexaColor(sNum){ 
    return (typeof sNum === "string") && sNum.length === 6 
     && ! isNaN(parseInt(sNum, 16)); 
} 

isHexaColor("AA33FF") => true 
isHexaColor("Z34FF9") => false 
isHexaColor("AA33FF11") => false 

Chỉnh sửa: Vui lòng xem nhận xét của @SalvadorDali bên dưới, có một số trường hợp sai trong một số trường hợp. Thay vì sử dụng một giải pháp khác.

Answer 3

Đây có thể là một vấn đề phức tạp. Sau một vài lần thử tôi đã nghĩ ra một giải pháp khá sạch sẽ. Hãy để trình duyệt thực hiện công việc cho bạn.

Bước 1: Tạo div có kiểu đường viền được đặt thành không. Div có thể được định vị ngoài màn hình hoặc có thể là bất kỳ div nào trên trang của bạn không sử dụng đường viền.

Bước 2: Đặt màu đường viền thành một chuỗi trống. Mã có thể trông giống như sau:

e=document.getElementbyId('mydiv'); 
e.style.borderColor=""; 

Bước 3: Đặt màu đường viền thành màu bạn không chắc chắn.

e.style.borderColor=testcol; 

Bước 4: Kiểm tra xem màu thực sự đã thay đổi chưa. Nếu testcol không hợp lệ, sẽ không có thay đổi nào xảy ra.

col2=e.style.borderColor; 
if(col2.length==0) {alert("Bad Color!");} 

Bước 5: Tự dọn dẹp sau khi đặt màu trở lại chuỗi rỗng.

e.style.borderColor=""; 

Các Div:

<div id="mydiv" style="border-style:none; position:absolute; left:-9999px; top:-9999px;"></div> 

Bây giờ hàm JavaScript:

function GoodColor(color) 
{ 
    var color2=""; 
    var result=true; 
    var e=document.getElementById('mydiv'); 
    e.style.borderColor=""; 
    e.style.borderColor=color; 
    color2=e.style.borderColor; 
    if (color2.length==0){result=false;} 
    e.style.borderColor=""; 
    return result; 
} 

Trong trường hợp này, các chức năng đang trở lại một câu trả lời đúng/sai cho câu hỏi, tùy chọn khác là để nó trả về giá trị màu hợp lệ. Giá trị màu gốc của bạn, giá trị từ borderColor hoặc một chuỗi trống thay cho màu không hợp lệ.

Answer 4

function validColor(color){ 
    var $div = $("<div>"); 
    $div.css("border", "1px solid "+color); 
    return ($div.css("border-color")!="") 
} 

https://gist.github.com/dustinpoissant/22ce25c9e536bb2c5a2a363601ba261c

Lưu ý: Điều này đòi hỏi jQuery

này làm việc cho ALL loại màu không chỉ là giá trị hex. Nó cũng làm không nối thêm các phần tử không cần thiết vào cây DOM.

Answer 5

Nếu bạn cần chức năng cho bạn biết màu có hợp lệ hay không, bạn cũng có thể cung cấp cho bạn thứ gì đó hữu ích - giá trị được tính toán của màu đó - và trả về giá trị rỗng khi màu không hợp lệ. Đây là lỗi của tôi ở chức năng tương thích (Chrome54 & MSIE11) để nhận các giá trị RGBA của một "màu" trong bất kỳ định dạng nào - có thể là 'xanh' hoặc '#FFF' hoặc '# 89abcd' hoặc 'rgb (0,0,128) 'hoặc' rgba (0, 128, 255, 0,5) '.

/* getRGBA: 
    Get the RGBA values of a color. 
    If input is not a color, returns NULL, else returns an array of 4 values: 
    red (0-255), green (0-255), blue (0-255), alpha (0-1) 
*/ 
function getRGBA(value) { 
    // get/create a 0 pixel element at the end of the document, to use to test properties against the client browser 
    var e = document.getElementById('test_style_element'); 
    if (e == null) { 
    e = document.createElement('span'); 
    e.id = 'test_style_element'; 
    e.style.width = 0; 
    e.style.height = 0; 
    e.style.borderWidth = 0; 
    document.body.appendChild(e); 
    } 

    // use the browser to get the computed value of the input 
    e.style.borderColor = ''; 
    e.style.borderColor = value; 
    if (e.style.borderColor == '') return null; 
    var computedStyle = window.getComputedStyle(e); 
    var c 
    if (typeof computedStyle.borderBottomColor != 'undefined') { 
    // as always, MSIE has to make life difficult 
    c = window.getComputedStyle(e).borderBottomColor; 
    } else { 
    c = window.getComputedStyle(e).borderColor; 
    } 
    var numbersAndCommas = c.replace(new RegExp('[^0-9.,]+','g'),''); 
    var values = numbersAndCommas.split(','); 
    for (var i = 0; i < values.length; i++) 
    values[i] = Number(values[i]); 
    if (values.length == 3) values.push(1); 
    return values; 
}