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

Answer 3

现在是2020年，所以我为此创建了一个npm软件包： https://www.npmjs.com/package/validate-color

它通过name，hex，rgb，rgba，hsl或hsla值来验证HTML颜色。

验证所有可能的HTML颜色：

   import validateColor from 'validate-color';

用法：

   import React from 'react';
   import validateColor from 'validate-color';

   const ColorBox = props => {
     const {
       color = '',
       text = ''
     } = props;
     const theColor = color && validateColor(color) ? color : 'transparent';
     return (
       <div className="color-box" style={{backgroundColor: theColor}}>
         <p>{text}</p>
       </div>
     )
   };

   export default ColorBox;

仅验证 HTML颜色（hex，rgb，rgba，hsl，hsla），不带 name：

   import { validateHTMLColor } from 'validate-color';

仅验证颜色hex：

   import { validateHTMLColorHex } from 'validate-color';

仅验证颜色name：

   import { validateHTMLColorName } from 'validate-color';

还有一个演示页面，其中包含应用于React组件的验证：

https://dreamyguy.github.io/validate-color/

从那里您将找到GitHub存储库的链接。编写了大量的测试，以作为良好的衡量标准。我接受拉取请求，万岁开源！

验证HTML颜色代码JS

3 个答案: