Por ejemplo:

AA33FF = hexadecimal válido color

Z34FF9 = no válido hexagonal de color (tiene Z en ella)

AA33FF11 = no válido hexagonal de color (tiene caracteres adicionales)

  • dependiendo del contexto, el último podría ser un color válido, si se incluye alfa en AARRGGBB formato.
InformationsquelleAutor Alex | 2011-11-06

7 Comentarios

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

    A elaborar:

    ^ partido de principio

    # un hash

    [a-f0-9] cualquier letra de la a a la f y del 0 al 9

    {6} el grupo anterior aparece exactamente 6 veces

    $ partido final

    i ignorar caso

    y más avanzado :

     var isOk  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#ac3') //for #f00 (Thanks Smamatti)
    • Por definición, esto es correcto, pero los códigos con una longitud de 3 son válidos para el navegador de interpretación, también. color: #f00; será interpretado como el rojo (#ff0000) también.
    • o de otra forma: /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test("#f00")
    • Cómo usar esto? Me estoy haciendo la entrada hexadecimal de color de la JS de símbolo del sistema.
    • de petición devuelve un valor de cadena que se puede probar
    • He añadido una opción en la mina para hacer que el carácter ‘#’ opcional. (Acabo de añadir un signo de interrogación después de la libra char) Si el usuario está introduciendo este valor hexadecimal que puede o no puede saber para incluir la libra char. con la modificación: /(^#?[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.de prueba(‘f00’)
    • Golf \d para 0-9
    • También me gustaría añadir /^#([0-9a-f]{3}){1,2}$/i a la mezcla.
    • también pasa, pero #aabb no es válido hexagonal de color.
    • var isOk = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i.de prueba(‘#aabbcc’); @RomanBoiko esta es la derecha! Gracias!
    • Gran respuesta, he probado con este; #010A este Debe ser aceptado, ya que no está?
    • Para incluir #AARRGGBB formato (además de a #RGB y #RRGGBB ya cubierto): /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i (y no de la captura de la versión para la mejora de la eficiencia: ^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3})$). regexr.com/3p38r

  2. 27
    function isHexaColor(sNum){
      return (typeof sNum === "string") && sNum.length === 6 
             && ! isNaN( parseInt(sNum, 16) );
    }
    
    isHexaColor("AA33FF") => true
    isHexaColor("Z34FF9") => false
    isHexaColor("AA33FF11") => false

    Editar: por Favor, ver el comentario de @SalvadorDali de abajo, hay falsos positivos en algunos casos. En lugar de utilizar otra solución.

    • +1 bcs mucho mejor para leer rápido y comprender de una expresión regular
    • también es mucho mejor para leer rápido y comprender que ‘bcs’ 😉
    • yo estaba tan acostumbrado a » bcs » para mí no hacer una diferencia. de todos modos mi comentario fue pensado como un complemento para ser feliz.
    • Esto es incorrecto: parseInt(‘abcZab’, 16) ¿número de salida y pasar la prueba
    • Oh, sí, eso es cierto. Me pregunto por qué.
    • Porque parseInt tendrá "abcZab", encontrar que "Z" no es válida (para base 16), y lo ignoran y nada después de él. Luego toma el principio "abc" y convertir a 2748 (que también es el resultado de parseInt("abcZab", 16), demostrando que la lógica sucediendo). Como el nombre implica, parseInt analiza una cadena. Como si se tratara de análisis de un número con unidades con una base de 10, como parseInt("10px", 10), conseguiría 10. Usted puede ver que se describe a continuación: es5.github.io/#x15.1.2.2 (paso 11).
    • Realmente aprecio la honestidad! +1 para que!
    • usted puede comparar el resultado con source.ToString(16) y no obtener falsos positivos más.
    • Por qué sólo se compara con la longitud de 6? Código de colores Hex longitud puede ser de 3 así.
    • Añadir una comprobación de la longitud y funciona y es probable que sea más fácil de leer que un regex
    • Usted puede resolver el problema de abcZab por la división de la cadena a caracteres y la aplicación de la condición de cada personaje. A continuación, se recoge Z y devuelve false. s.split('').every(char=>!isNaN(parseInt(char, 16)));

  3. 9

    Esto puede ser un problema complicado. Después de varios intentos se me ocurrió una forma bastante limpia. Dejar que el navegador hacer el trabajo para usted.

    Paso 1: Crear un div con border-style establecido ninguno. El div puede ser colocado fuera de la pantalla, o puede ser cualquier div en la página en la que no usa las fronteras.

    Paso 2: Establecer el color del borde para una cadena vacía. El código podría ser algo como esto:

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

    Paso 3: Establecer el color del borde, el color no está seguro acerca de.

    e.style.borderColor=testcol;

    Paso 4: Revise para ver si el color que realmente han cambiado. Si testcol no es válido, no se producirá ningún cambio.

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

    Paso 5: Limpiar después de ti mismo al establecer el color de fondo a una cadena vacía.

    e.style.borderColor="";

    El Div:

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

    Ahora la función de 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;
    }

    En este caso, la función devuelve un tipo verdadero/falso, respuesta a la pregunta, la otra opción es tener que devolver un color válido de valor. Su color original valor, el valor de borderColor o una cadena vacía en lugar de válido colores.

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

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

    Nota: Esto requiere de jQuery

    Esto funciona para TODOS tipos de colores no sólo valores hexadecimales. También hace no anexar elementos innecesarios para el árbol DOM.

    • Agradable y fácil y funciona muy bien. Personalmente he añadido si(hexString.indexOf(‘#’) == -1) { return false; } para comprobar un hash como un rudimentario comprobar que el color era un valor hexadecimal
  5. 1

    Si usted necesita una función para indicar si un color es válida, usted podría tener que dar algo útil-los valores calculados de ese color — y devolver null cuando no es un color válido. Aquí está mi intento de una compatible (Chrome54 & MSIE11) función para obtener los valores RGBA de un «color» en cualquiera de los formatos, se lo ‘verde’, o ‘#FFF’, o ‘#89abcd», o » rgb(0,0,128)’, o ‘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;
    }
  6. 1

    Si usted está tratando de utilizar en HTML Trate de usar este patrón Directamente :

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

    como

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

    Dará una validación para que coincida con el formato solicitado.

  7. 0

    Agregar una longitud de verificación para asegurarse de que usted no consigue un falso positivo

    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;

    }

Dejar respuesta

Please enter your comment!
Please enter your name here