Javascript自动转换十六进制值

Javascript converting hex values automatically

本文关键字：十六进制 转换 Javascript      更新时间：2023-09-26

目前我正在使用这段非常简单的代码:field.style.backgroundColor="#ffffff";直到现在它对我来说工作得很好，但最近我注意到，在webkit中十六进制值总是转换为rgb值，如rgb(255, 255, 255)。通常这不会是一个问题，但我需要十六进制值稍后在php脚本创建一个图像。把它们转换回来只会减慢整个过程。所以我的基本问题是如何避免得到那些烦人的rgb值

你可以将值分成几个部分，将每个数字转换为十六进制，然后返回一个格式化的字符串，例如:

// convert rgb colour values to hex, e.g. rgb(255, 255, 255) to #ffffff;
function rgbToHex(rgb) {
  var re = /^rgb'(.*')$/;
  var bits;
  function z(n){return (n<10?'0':'') + n;}
  if (re.test(rgb)) {
    bits = rgb.match(/'d+/g);
    return '#' + z((+bits[0]).toString(16)) + 
                 z((+bits[1]).toString(16)) +
                 z((+bits[2]).toString(16));
  }
  return rgb;
}
alert(rgbToHex('rgb(255, 255, 255)')); // #ffffff   
alert(rgbToHex('rgb(0, 0, 0)')); // #000000
alert(rgbToHex('rgb(100, 230, 90)')); // #64e65a

在测试正则表达式上可能需要一个i标志，以防某些浏览器返回"RGB(…)"。

编辑

根据Xotic750的帖子，z函数应该是: 
function z(n){return (n.length == 1?'0':'') + n;}

也可以使用不那么严格的正则表达式:

  var re = /^rgb/i;

其他失败是垃圾输入，垃圾输出的情况。如果需要，可以修改正则表达式以允许在"rgb("中添加空格。更新后的版本为:

function rgbToHex(rgb) {
    var re = /^rgb/i;
    var bits = rgb.match(/'d+/g);;
    function z(n) {
        return (n.length == 1? '0' : '') + n;
    }
    if (re.test(rgb) && bits.length == 3) {
        return '#' + z((+bits[0]).toString(16))
                   + z((+bits[1]).toString(16))
                   + z((+bits[2]).toString(16));
    }
    return rgb;
}

唯一的选择是如果测试失败，它应该返回原始字符串还是未定义?

这实际上是相当琐碎的编写自己的转换器，这是一个非常快速的计算，为什么要重新发明轮子，当有一个充气轮胎已经安装?:)看看colors javascript库。

好吧，所以库不是你的东西，这里有一个函数可以为你做。

var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";
var rgbToHex = (function () {
    var rx = /^rgb's*'('s*('d+)'s*,'s*('d+)'s*,'s*('d+)'s*')$/i;
    function pad(num) {
        if (num.length === 1) {
            num = "0" + num;
        }
        return num;
    }
    return function (rgb, uppercase) {
        var rxArray = rgb.match(rx),
            hex;
        if (rxArray !== null) {
            hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));
            if (uppercase === true) {
                hex = hex.toUpperCase();
            }
            return hex;
        }
        return;
    };
}());
console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));
在jsfiddle

这里是jsperfs

你不能只是解释值为十六进制值在php甚至不需要转换它?实际上，我不知道JavaScript递给你什么，但如果它只是一个值解释他们十六进制和cocatenate他们。

不应该有性能损失。

问候

相关文章：