js实现十六进制HEX颜色值转rgb格式颜色值 -六月初技术站

js实现十六进制HEX颜色值转rgb格式颜色值

六月初 JavaScipt 2022-09-08 11:12:32

颜色格式转换在开发中是一个非常常见的操作，那么我们前端要如何通过js代码来实现该功能呢？

HEX十六进制和RGB颜色格式转换效果如图：

相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js十六进制HEX转RGB格式颜色值</title>
	</head>
	<body>
		<script>
			function hexTorgb(str) {
			  let _this = this
			  let r = /^\#?[0-9A-Fa-f]{6}$/;
			  //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
			  if (!r.test(str)) return alert('输入错误的hex颜色值');
			  //replace替换查找的到的字符串
			  str = str.replace("#", "");
			  //match得到查询数组
			  let hxs = str.match(/../g);
			  for (let i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
			  return hxs;
			}
			console.log("转换前HEX十六进制：#ffffff")
			console.log("转换后RGB格式："+hexTorgb("#ffffff"))
		</script>
	</body>
</html>