Question

原样，如果您在浏览器中运行它，它将无法正常工作。但是，如果你要注释掉第一个＆＃34; var rgbArray＆＃34;并取消注释第二个＆＃34; var rgbArray＆＃34;那么脚本就可以了。

为什么第一种方式不起作用？

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript">
            var rgbColorString = "rgb(60, 59, 110)";
            var rgbArray = parseRGBColor(rgbColorString);
            // var rgbArray = [60, 59, 110]
            convertRGBToHEX(rgbArray);

            function parseRGBColor(rgbColorString){
                var colorStringMatch = rgbColorString.match(/[0-9]{1,3}/g);
                return colorStringMatch;
            }

            function convertRGBToHEX(rgbArray){
                document.write("rgbArray: " + rgbArray + "<br>");
                var hexColor = "";
                for(var i=0; i<rgbArray.length; i++){
                    hexColor = hexColor + convertToHexString(rgbArray[i]);
                }
            }

            function convertToHexString(base10Color){
                document.write("Color In: " + base10Color + " => ");
                var convertedColor = (base10Color < 16) ? ("0" + base10Color.toString(16)) : base10Color.toString(16);
                document.write("Color Out: " + convertedColor + "<br>");
            }
        </script>
    </body>
</html>

Answer 1

正则表达式总是将其匹配作为字符串返回，即使匹配的部分是数字的因此，当您在数组元素上调用.toString(16)时，它们的值保持完全相同。

您需要先更改convertToHexString以将其转换为整数，最好使用parseInt：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript">
            var rgbColorString = "rgb(60, 59, 110)";
            var rgbArray = parseRGBColor(rgbColorString);
            // var rgbArray = [60, 59, 110]
            convertRGBToHEX(rgbArray);

            function parseRGBColor(rgbColorString){
                var colorStringMatch = rgbColorString.match(/[0-9]{1,3}/g);
                return colorStringMatch;
            }

            function convertRGBToHEX(rgbArray){
                document.write("rgbArray: " + rgbArray + "<br>");
                for(var i=0; i<rgbArray.length; i++){
                    convertToHexString(rgbArray[i]);
                }
            }

            function convertToHexString(base10Color){
                document.write("Color In: " + base10Color + " => ");
                var convertedColor = (base10Color < 16 ? "0" : "" ) + parseInt(base10Color).toString(16);
                document.write("Color Out: " + convertedColor + "<br>");
            }
        </script>
    </body>
</html>

Answer 2

第一个：

  var rgbArray = parseRGBColor(rgbColorString);
  //=> ["60","59","110"]

将返回一个字符串数组。

第二个：

  var rgbArray = [60, 59, 110]

是一个整数数组

Answer 3

你需要做两件事：

从convertToHexString
在convertToHexString

Working JSBin

var rgbColorString = "rgb(60, 59, 110)";
var rgbArray = parseRGBColor(rgbColorString);
// var rgbArray = [60, 59, 110]
convertRGBToHEX(rgbArray);

function parseRGBColor(rgbColorString){
  var colorStringMatch = rgbColorString.match(/[0-9]{1,3}/g);
  return colorStringMatch;
}

function convertRGBToHEX(rgbArray){
  document.write("rgbArray: " + rgbArray + "<br>");
  var hexColor = "";
  for(var i=0; i<rgbArray.length; i++){
    hexColor = hexColor + convertToHexString(rgbArray[i]);
  }
  document.write("final hex color:" + hexColor);
}

function convertToHexString(base10Color){
  base10Color = parseInt(base10Color);
  document.write("Color In: " + base10Color + " => ");
  var convertedColor = (base10Color < 16) ? ("0" + base10Color.toString(16)) : base10Color.toString(16);
  document.write("Color Out: " + convertedColor + "<br>");
  return convertedColor;
}

为什么我的JavaScript不能正常工作？这似乎是我的RegEx的麻烦，但我无法弄清楚

3 个答案: