CSS Javascript – 检查字符串是否是有效的CSS颜色

在本文中，我们将介绍如何使用Javascript检查给定的字符串是否是有效的CSS颜色。 CSS颜色是在网页开发中非常常用的一部分，我们经常需要验证用户输入的颜色值是否有效，以确保网页显示的效果符合预期。

阅读更多：CSS 教程

什么是有效的CSS颜色？

在CSS中，颜色值可以有多种格式。我们常见的颜色格式有rgb(R, G, B)、rgba(R, G, B, A)、#RRGGBB、#RGB、hsl(H, S%, L%)和hsla(H, S%, L%, A)等。其中，R、G、B、A、H、S和L分别表示红色、绿色、蓝色、透明度、色相、饱和度和亮度。

对于CSS颜色的验证，需要满足以下条件：
– 颜色格式正确：颜色值必须是合法的CSS颜色格式。
– 颜色值范围正确：颜色值的取值范围必须在合法范围内。

检查颜色格式

要检查颜色值的格式是否正确，我们可以使用正则表达式来匹配各种颜色格式。以下是一个示例代码，可以用来检查字符串是否满足合法的CSS颜色格式：

function isValidColorFormat(color) {
  const colorFormat = /^(rgb(d{1,3}, d{1,3}, d{1,3})|rgba(d{1,3}, d{1,3}, d{1,3}, (0(.d+)?|1(.0+)?))|#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})|hsl(d{1,3}, d{1,3}%, d{1,3}%)|hsla(d{1,3}, d{1,3}%, d{1,3}%, (0(.d+)?|1(.0+)?)))$/;
  return colorFormat.test(color);
}

const color1 = 'rgb(255, 0, 0)';
console.log(isValidColorFormat(color1)); // true

const color2 = '#abc';
console.log(isValidColorFormat(color2)); // true

const color3 = 'invalid';
console.log(isValidColorFormat(color3)); // false

在上面的代码中，我们使用了正则表达式colorFormat来匹配各种合法的CSS颜色格式。通过调用test()方法，我们可以判断给定的颜色字符串是否满足合法的CSS颜色格式。

检查颜色值范围

除了检查颜色格式外，还需要确保颜色值的范围正确。对于rgb格式的颜色，每个分量的取值范围应该在0到255之间；对于hsl格式的颜色，色相的取值范围是0到360，饱和度和亮度的取值范围是0到100。以下是一个示例代码，用于验证颜色值范围是否正确：

function isValidColorValueRange(color) {
  const colorFormat = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

  if (color.startsWith('#')) {
    color = color.substring(1);
  }

  if (colorFormat.test(color)) {
    if (color.length === 3) {
      color = color
        .split('')
        .map((c) => c + c)
        .join('');
    }

    const r = parseInt(color.substring(0, 2), 16);
    const g = parseInt(color.substring(2, 4), 16);
    const b = parseInt(color.substring(4, 6), 16);

    return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;
  }

  return false;
}

const color1 = '#fff';
console.log(isValidColorValueRange(color1)); // true

const color2 = '#123456';
console.log(isValidColorValueRange(color2)); // true

const color3 = '#ggg';
console.log(isValidColorValueRange(color3)); // false

在上面的代码中，我们首先使用正则表达式colorFormat检查颜色值是否是合法的6位16进制颜色码。如果颜色值是3位的简写形式（如#fff），则将其转换为6位形式（如#ffffff）。然后，我们将颜色值分别从字符串中解析出rgb分量，并判断它们是否处于合法的范围内。

示例应用

现在，我们可以将上述的颜色验证函数应用到实际的代码中。以下是一个示例代码，演示如何检查用户输入的颜色值是否合法：

function isValidCSSColor(color) {
  return isValidColorFormat(color) && isValidColorValueRange(color);
}

const userInputColor = prompt('请输入一个CSS颜色值：');
if (isValidCSSColor(userInputColor)) {
  console.log('颜色值合法！');
} else {
  console.log('颜色值不合法！');
}

在上面的示例中，我们使用prompt()函数获取用户输入的颜色值，并通过调用isValidCSSColor()函数来检查颜色值是否合法。如果颜色值合法，则打印”颜色值合法！”；否则，打印”颜色值不合法！”。