如何从JS中的字符串中获取十六进制整数？
[英]How to get hex integer from a string in JS?
问题描述
I would like to convert this: "#FFFFFF" to this: 0xFFFFFF .
我想将这个： "#FFFFFF"转换为： 0xFFFFFF 。 How is it possible without using eval?不使用eval怎么可能？
Thanks in advance,提前致谢，
2 个解决方案
解决方案1
48 已采纳 2012-04-23 21:17:19
Strip off the "#" and use parseInt() .去掉“#”并使用parseInt() 。
var hex = parseInt(str.replace(/^#/, ''), 16);
Then, if you want to see it in hex, you can use .toString() :然后，如果你想以十六进制查看它，你可以使用.toString() ：
console.log(hex.toString(16));
解决方案2
0 2020-03-10 02:57:14
Use this code:使用此代码：
var resultP = document.getElementById('result'); var btn = document.querySelector('button'); var input = document.querySelector('input'); function convert(hex) { return Number(`0x${hex.substr(1)}`); } btn.addEventListener('click', () => { resultP.innerHTML = convert(input.value); })
* { font-family: Arial; }
<!DOCTYPE html> <html> <head> <title>Hex code to hex integer</title> <meta charset="UTF-8" /> </head> <body> <input type="text" maxlength="7" /> <button>Done</button> <br /> Result: <p id="result"></p> </body> </html>
解决方案3
0 2022-01-06 13:44:49
I know this answer is coming quite late, but I had a similar issue and here is what helped me (please note, the code provided below is not mine, this is simply a combination of multiple StackOverflow answers).我知道这个答案来得很晚，但我遇到了类似的问题，这对我有帮助（请注意，下面提供的代码不是我的，这只是多个 StackOverflow 答案的组合）。
General workflow: convert hex code to RGB and then to the 0x representation.一般工作流程：将十六进制代码转换为 RGB，然后再转换为 0x 表示。
You can check different HEX TO RGB conversion options here: RGB to hex and hex to RGB您可以在此处查看不同的 HEX TO RGB 转换选项： RGB to hex 和 hex to RGB
I used this function to do it (easy to reverse, as it returns an array [r, g, b]. Also works with shorthand hex triplets such as "#03F").我使用这个函数来完成它（很容易反转，因为它返回一个数组 [r, g, b]。也适用于速记的十六进制三元组，例如“#03F”）。
hexToRgb(hex) {
return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
, (m, r, g, b) => "#" + r + r + g + g + b + b)
.substring(1).match(/.{2}/g)
.map(x => parseInt(x, 16));
}
Idea for the final conversion is taken from here: convert rgba color value to 0xFFFFFFFF form in javascript最终转换的想法取自这里： convert rgba color value to 0xFFFFFFFF form in javascript
Like user @Chanwoo Park mentions, a color in this representation 0xFFFFFFFF is formed as Alpha, Blue, Green, Red and not Alpha, Red, Green, Blue.就像用户@Chanwoo Park 提到的那样，这种表示中的颜色 0xFFFFFFFF 形成为 Alpha、蓝色、绿色、红色，而不是 Alpha、红色、绿色、蓝色。 So simply converting a color #4286F4 to 0xFF4286F4 would not render the same color.因此，简单地将颜色 #4286F4 转换为 0xFF4286F4 不会呈现相同的颜色。
What you can do is reverse RGB values and then do the conversion.您可以做的是反转 RGB 值，然后进行转换。 The full code:完整代码：
hexToRgb(hex) {
return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
, (m, r, g, b) => "#" + r + r + g + g + b + b)
.substring(1).match(/.{2}/g)
.map(x => parseInt(x, 16));
},
getFillColor(color) {
let rgbColor = this.hexToRgb(color);
let reversed = rgbColor.reverse();
let hex = 0xff000000 | (reversed[0] << 16) | (reversed[1] << 8) | reversed[2];
return parseInt(`0x${(hex >>> 0).toString(16)}`);
}
PS this is Vue.js code, but should be super simple to convert to vanilla JS. PS 这是 Vue.js 代码，但转换为 vanilla JS 应该非常简单。
All credit goes to users: https://stackoverflow.com/users/7377162/chanwoo-park , https://stackoverflow.com/users/10317684/ricky-mo , https://stackoverflow.com/users/3853934/micha%c5%82-per%c5%82akowski所有功劳归用户所有： https : //stackoverflow.com/users/7377162/chanwoo-park、https : //stackoverflow.com/users/10317684/ricky-mo、https : //stackoverflow.com/users/3853934/ micha%c5%82-per%c5%82akowski
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.