স্ট্রিংটি বৈধ হেক্স রঙের উপস্থাপনা কিনা তা কীভাবে পরীক্ষা করবেন?


120

উদাহরণ স্বরূপ:

AA33FF = বৈধ হেক্স রঙ

Z34FF9 = অবৈধ হেক্স রঙ (এতে জেড রয়েছে)

AA33FF11 = অবৈধ হেক্স রঙ (অতিরিক্ত অক্ষর রয়েছে)


10
প্রসঙ্গের উপর নির্ভর করে, শেষেরটিটি বৈধ রঙ হতে পারে, যদি এতে AARRGGBBফর্ম্যাটটিতে আলফা অন্তর্ভুক্ত থাকে ।
জে হোমস

উত্তর:


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

সম্প্রসারিত:

^ ->0 থেকে 9
# ->অবধি
[0-9A-F] ->কোনও পূর্ণসংখ্যার সাথে হ্যাশ শুরু করুন এবং
{6} ->পূর্ববর্তী গ্রুপে এ থেকে এফ থেকে যে কোনও চিঠি উপস্থিত হবে ঠিক 6 বার
$ ->ম্যাচ শেষ
i ->উপেক্ষা কেস

আপনার যদি 3-অক্ষরের এইচএক্স কোডগুলির জন্য সমর্থন প্রয়োজন হয় তবে নিম্নলিখিতগুলি ব্যবহার করুন:

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

এখানে কেবল পার্থক্য

 [0-9A-F]{6}

সঙ্গে প্রতিস্থাপন করা হয়

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

এর অর্থ হ'ল ঠিক characters টি অক্ষরের সাথে মিলে না গিয়ে এটি ঠিক 3 টি অক্ষর, তবে 1 বা 2 বারের সাথে মিলবে। মঞ্জুরি দিচ্ছে ABCএবং AABBCCতবে তা নয়ABCD


18
সংজ্ঞা অনুসারে এটি সঠিক, তবে 3 দৈর্ঘ্যের কোডগুলি ব্রাউজার ব্যাখ্যার জন্যও বৈধ। color: #f00;পাশাপাশি লাল (# ff0000) হিসাবে ব্যাখ্যা করা হবে।
স্মাট্টি

13
বা অন্য ফর্ম:/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test("#f00")
জে. হোমস

8
আমি /^#([0-9a-f]{3}){1,2}$/iমিশ্রণ যোগ করতে হবে ।
মাস্টারাম

1
@ আন্ড্রেসেপারও /^#[0-9A-F]{3,6}$/i.test('#aabb')পাস করে তবে #aabbএকটি বৈধ হেক্স রঙ নয়।
রোমান বোইকো

3
var isOk = /^#( PDA-Fa-f0-9আর{}}[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[;;;;;;; ;$$$$$$$$; @ রোমানবাইকো এটা ঠিক! ধন্যবাদ!
আন্দ্রেস

32

// 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()স্ট্রিংয়ের শুরু থেকে বিশ্লেষণ করবে যতক্ষণ না এটি এমন কোনও চরিত্রের কাছে পৌঁছায় যা Radix ( 16) এ অন্তর্ভুক্ত থাকে না । এর অর্থ এটি 'AAXXCC' এর মতো স্ট্রিংগুলি বিশ্লেষণ করতে পারে কারণ এটি 'এএ' দিয়ে শুরু হয় with

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')    
╰─────────────┴────────────┴────────┴───────────────────╯

6
রিজেক্সের চেয়ে +1 বিসিএস পড়ার চেয়ে আরও ভাল এবং বুঝতে আরও দ্রুত
ক্রিস

10
@ ক্রিস 'কারণ' পড়ার চেয়ে 'বিসিএস' তুলনায় আরও ভাল এবং দ্রুত বোঝার জন্য ;-)
ক্রিস

1
@ ক্রিস: আমার কাছে 'বিসিএস' ব্যবহারের এতটা অভ্যস্ত হয়ে উঠেনি nt যাইহোক আমার মন্তব্যটি প্রশংসা হিসাবে বোঝানো হয়েছিল তাই খুশি হোন।
ক্রিস

12
এটি ভুল: পার্সেন্ট ('abcZab', 16) আউটপুট নম্বর এবং পরীক্ষায় উত্তীর্ণ হবে
সালভাদোর ডালি

1
@ ফ্লোরেন্ট যেহেতু parseIntনেবে "abcZab", এটি "Z"অবৈধ (মূল ১ 16 এর জন্য) খুঁজে পাবে এবং এটি এবং এর পরে যে কোনও কিছু উপেক্ষা করবে। এরপরে এটি সূচনা নেয় "abc"এবং এটিকে রূপান্তর করে 2748( parseInt("abcZab", 16)এটি এর যুক্তি যা ঘটছে তা প্রমাণ করে)। নামটি বোঝা যায়, একটি স্ট্রিংকে parseInt বিশ্লেষণ করে । আপনি যদি 10 এর মূল্যের সাথে এর এককগুলির সাথে একটি সংখ্যা পার্স করে চলেছিলেন ঠিক তেমন parseInt("10px", 10), আপনি পেয়ে যাবেন 10। আপনি এখানে বর্ণিত এটি দেখতে পারেন: es5.github.io/#x15.1.2.2 (পদক্ষেপ 11)
ইয়ান

8

এটি একটি জটিল সমস্যা হতে পারে। বেশ কয়েকটি চেষ্টার পরে আমি বেশ পরিষ্কার সমাধান নিয়ে এসেছি। ব্রাউজারটি আপনার জন্য কাজটি করতে দিন।

পদক্ষেপ 1: সীমানা-শৈলীর সাথে সেট না করে একটি ডিভ তৈরি করুন। ডিভি স্ক্রিনের বাইরে অবস্থান করা যেতে পারে বা এটি আপনার পৃষ্ঠায় কোনও ডিভ হতে পারে যা সীমানা ব্যবহার করে না।

পদক্ষেপ 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;
}

এই ক্ষেত্রে, ফাংশনটি প্রশ্নের সত্য / মিথ্যা উত্তর ফিরিয়ে দিচ্ছে, অন্য বিকল্পটি এটির জন্য একটি বৈধ রঙের মান ফিরিয়ে আনতে হবে। আপনার আসল রঙ মান, সীমানা রঙের মান বা অবৈধ রঙের জায়গায় একটি খালি স্ট্রিং।


আইএমও, এটি কমপক্ষে কোনও পরিষ্কার সমাধান নয়
গাস্ট ভ্যান ডি ওয়াল

5

আপনি যদি এইচটিএমএলে এটি ব্যবহার করার চেষ্টা করছেন তবে এই প্যাটার্নটি সরাসরি ব্যবহার করার চেষ্টা করুন:

 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})$" />

এটি অনুরোধ করা ফর্ম্যাটটি মেলে একটি বৈধতা দেবে।


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

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

দ্রষ্টব্য: এর জন্য jQuery প্রয়োজন

এটি হেক্স মানগুলির জন্য নয় সমস্ত রঙের ধরণের জন্য কাজ করে । এটি ডিওএম গাছে অপ্রয়োজনীয় উপাদান যুক্ত করে না


সুন্দর এবং সহজ এবং খুব ভাল কাজ করে। ব্যক্তিগতভাবে আমি যোগ করেছি যদি (hexString.indexOf ('#') == -1) false মিথ্যা ফিরে আসে; as একটি হ্যাশটিকে প্রাথমিক হিসাবে চেক করতে চেক করতে যে রঙটি একটি হেক্স মূল্য ছিল
365 স্লিপডিডসস

1

যদি কোনও রঙের বৈধতা আছে কিনা তা জানানোর জন্য যদি আপনার কোনও ফাংশন প্রয়োজন হয় তবে আপনাকে সেই রঙের গণিত মানগুলি - এবং এটি কোনও বৈধ রঙ না হলে শূন্য ফিরে আসতে পারে useful যে কোনও ফরমেটে "রঙ" এর আরজিবিএ মানগুলি পেতে - এটি 'সবুজ', বা '# এফএফএফ', বা '# 89abcd', বা 'আরজিবি'র জন্য সামঞ্জস্যপূর্ণ (Chrome54 & MSIE11) ফাংশনে আমার ছুরিকাঘাত (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;
}

0

আপনি কোনও মিথ্যা ধনাত্মক না পেয়ে তা নিশ্চিত করতে একটি দৈর্ঘ্যের চেক যুক্ত করুন

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;

}

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.