यह कैसे जांचें कि क्या एक स्ट्रिंग एक वैध हेक्स रंग प्रतिनिधित्व है?

Question

उदाहरण के लिए:

AA33FF = मान्य हेक्स रंग

Z34FF9 = अमान्य हेक्स रंग (इसमें Z है)

AA33FF11 = अमान्य हेक्स रंग (अतिरिक्त वर्ण हैं)

Comments

संदर्भ के आधार पर, अंतिम एक वैध रंग हो सकता है, अगर इसमें AARRGGBBप्रारूप में अल्फा शामिल है ।

— जे। होम्स

Answer 1

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

समझाने के लिए:

^ ->मैच 0 से 9 तक किसी भी पूर्णांक से
# ->हैश
[0-9A-F] ->और ए से एफ
{6} ->तक पिछले समूह के किसी भी अक्षर से
$ ->मेल खाता है, ठीक 6 गुना मैच अंत की
i ->अनदेखी

यदि आपको 3-वर्ण HEX कोड के लिए समर्थन की आवश्यकता है, तो निम्न का उपयोग करें:

/^#([0-9A-F]{3}){1,2}$/i.test('#ABC')

यहाँ केवल यही अंतर है

 [0-9A-F]{6}

के साथ बदल दिया गया है

([0-9A-F]{3}){1,2}

इसका मतलब यह है कि 6 अक्षरों के मिलान के बजाय, यह ठीक 3 वर्णों से मेल खाएगा, लेकिन 1 या 2 बार। अनुमति ABCऔर AABBCC, लेकिन नहींABCD

Comments

परिभाषा के अनुसार यह सही है, लेकिन 3 की लंबाई वाले कोड ब्राउज़र की व्याख्या के लिए भी मान्य हैं। color: #f00;लाल (# ff0000) के रूप में व्याख्या की जाएगी।

— 13

या दूसरा रूप:/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test("#f00")

— जे। होम्स

मैं भी /^#([0-9a-f]{3}){1,2}$/iमिश्रण में जोड़ना होगा ।

— मास्टरम

@AndresSepar /^#[0-9A-F]{3,6}$/i.test('#aabb')भी गुजरता है, लेकिन #aabbएक वैध हेक्स रंग नहीं है।

— रोमन बोइको

var isOk = /^#( [IA-Fa-f0-9 तिरछे नज़र ६k[[[ @RomanBoiko यह सही है! धन्यवाद!

— एंड्रेस अलग

Answer 2

// regular function
function isHexColor (hex) {
  return typeof hex === 'string'
      && hex.length === 6
      && !isNaN(Number('0x' + hex))
}

// or as arrow function (ES6+)
isHexColor = hex => typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex))

console.log(isHexColor('AABBCC'))   // true
console.log(isHexColor('AABBCC11')) // false
console.log(isHexColor('XXBBCC'))   // false
console.log(isHexColor('AAXXCC'))   // false

यह उत्तर झूठी सकारात्मकता को फेंक देता था क्योंकि इसके बजाय Number('0x' + hex), इसका उपयोग किया जाता था parseInt(hex, 16)।
parseInt()स्ट्रिंग की शुरुआत से तब तक पार्स होगा जब तक कि यह एक ऐसे चरित्र तक नहीं पहुंच जाता जो कि मूलांक ( 16) में शामिल नहीं है । इसका मतलब यह है कि यह 'AAXXCC' की तरह तार को पार कर सकता है, क्योंकि यह 'AA' से शुरू होता है।

Number()दूसरी ओर, केवल तभी पार्स करेगा जब पूरा स्ट्रिंग मूलांक से मेल खाता हो। अब, Number()एक मूलांक पैरामीटर नहीं लिया जाता है, लेकिन सौभाग्य से, आप संख्याओं को दूसरे मूलांक में प्राप्त करने के लिए संख्याओं का उपसर्ग कर सकते हैं।

यहाँ स्पष्टीकरण के लिए एक तालिका है:

╭─────────────┬────────────┬────────┬───────────────────╮
│ Radix       │ Characters │ Prefix │ Will output 27    │
╞═════════════╪════════════╪════════╪═══════════════════╡
│ Binary      │ 0-1        │ 0b     │ Number('0b11011') │
│ Octal       │ 0-7        │ 0o     │ Number('0o33')    │
│ Decimal     │ 0-9        │ -      │ -                 │
│ Hexadecimal │ 0-9A-F     │ 0x     │ Number('0x1b')    │
╰─────────────┴────────────┴────────┴───────────────────╯

Comments

+1 पढ़ने के लिए बेहतर है और एक रेक्स की तुलना में समझने में तेज़ है

— क्रिस

@Chris 'क्योंकि' भी काफी बेहतर पढ़ सकते हैं और तेजी से करने के लिए है 'BCS' ;-) से समझने के लिए

— क्रिस

@ क्रिस: मैं तो मेरे लिए 'बीकेएस' के लिए इस्तेमाल किया गया है फर्क नहीं पड़ता। वैसे भी मेरी टिप्पणी एक बधाई के रूप में थी ताकि खुश रहें।

— क्रिस

यह गलत है: parseInt ('abcZab', 16) आउटपुट नंबर देगा और टेस्ट पास करेगा

— सल्वाडोर डाली

@fflorent क्योंकि parseIntलगेगा "abcZab", "Z"वह अमान्य है (मूलांक 16 के लिए), और इसे और उसके बाद कुछ भी अनदेखा करें। यह तब शुरुआत करता है "abc"और इसे 2748(जो parseInt("abcZab", 16)कि तर्क हो रहा है, यह साबित करने का परिणाम भी है) में बदल देता है। जैसा कि नाम का तात्पर्य है, एक स्ट्रिंग को parseInt पार्स करता है। जैसे अगर आप 10 के मूलांक के साथ इस पर इकाइयों के साथ एक संख्या पार्स कर रहे थे, जैसे parseInt("10px", 10), आपको मिलेगा 10। आप इसे यहाँ वर्णित देख सकते हैं: es5.github.io/#x15.1.2.2 (चरण 11)

— Ian

Answer 3

यह एक जटिल समस्या हो सकती है। कई प्रयासों के बाद मैं काफी साफ समाधान के साथ आया। ब्राउजर को आपके लिए काम करने दें।

चरण 1: सीमा-शैली सेट के साथ एक div बनाएँ जो कोई नहीं करता है। डिव को ऑफ स्क्रीन पर पोस्ट किया जा सकता है या यह आपके पेज पर कोई भी डिव हो सकता है जो सीमाओं का उपयोग नहीं करता है।

चरण 2: सीमा रंग को एक खाली स्ट्रिंग पर सेट करें। कोड कुछ इस तरह दिख सकता है:

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

चरण 3: सीमा के रंग को उस रंग में सेट करें जिसके बारे में आप निश्चित नहीं हैं।

e.style.borderColor=testcol;

चरण 4: यह देखने के लिए जांचें कि क्या वास्तव में रंग बदल गया है। यदि अंडकोष अमान्य है, तो कोई परिवर्तन नहीं होगा।

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

चरण 5: खाली स्ट्रिंग पर रंग वापस सेट करके अपने आप को साफ करें।

e.style.borderColor="";

द डिव:

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

अब जावास्क्रिप्ट फ़ंक्शन:

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

इस मामले में, फ़ंक्शन प्रश्न का सही / गलत उत्तर दे रहा है, दूसरा विकल्प यह है कि उसके पास वैध रंग मान लौटाया जाए। आपका मूल रंग मान, सीमा रंग से मान या अमान्य रंगों के स्थान पर एक रिक्त स्ट्रिंग।

Comments

IMO, यह कम से कम

— Gust van de Wal

Answer 4

यदि आप इसे HTML में उपयोग करने का प्रयास कर रहे हैं, तो इस पैटर्न का उपयोग करके सीधे देखें:

 pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"

पसंद

<input id="hex" type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" />

यह अनुरोधित प्रारूप से मेल खाने के लिए एक मान्यता देगा।

Answer 5

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

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

नोट: इसके लिए jQuery की आवश्यकता है

यह सभी रंग प्रकारों के लिए काम करता है न कि केवल हेक्स मान। यह DOM ट्री में अनावश्यक तत्वों को शामिल नहीं करता है ।

Comments

अच्छा और आसान और बहुत अच्छा काम करता है। व्यक्तिगत रूप से मैंने जोड़ा अगर (hexString.indexOf ('#') == -1) {झूठे लौटें; } हैश की जांच करने के लिए एक अल्पविकसित चेक के रूप में देखें कि रंग एक हेक्स मान था

— 365SplendidSuns

Answer 6

यदि आपको यह बताने के लिए किसी फ़ंक्शन की आवश्यकता है कि क्या कोई रंग वैध है, तो हो सकता है कि आपके पास यह उपयोगी हो - आपको उस रंग के गणना किए गए मान - और यह वैध रंग न होने पर वापस आ जाए। यहाँ एक संगत (Chrome54 और MSIE11) समारोह में मेरे स्टैब को किसी भी प्रारूप में "रंग" के RGBA मान प्राप्त करने के लिए दिया गया है - यह 'हरा', या '#FFF', या '# 89abcd', या 'rgb' (0,0,128) ', या' आरजीबीए (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;
}

Answer 7

यह सुनिश्चित करने के लिए कि आपको एक झूठा पॉज़िटिव न मिले, एक लंबाई जाँच जोड़ें

function isValidHex(testNum){
  let validHex = false;
  let numLength = testNum.length;
  let parsedNum = parseInt(testNum, 16);
  if(!isNan(parsedNum) && parsedNum.length===numLength){
     validHex = true;
  }
  return validHex;

}