解析Pantone Color TCX 色彩码本文已参与「新人创作礼」活动，一起开启掘金创作之路。解析Pantone

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

②在找寻潘通色彩一栏输入TCX，提交在这里插入图片描述

③浏览器F12，找到搜索结果所在的div，右键copy element 在这里插入图片描述

④文本文档修改文件类型为js，并粘贴上一部的结果，将其赋值给str

str='<div class="colorInfo" id="fashionColorDiv"><a class="swatchContainer sml show" data-color-id="084a9bcef5f2452a9e287a3141178c65" ....................';

⑤新建html文件，导入上一部改好的js文件 ⑥并编写正则表达式，提取data-color-code、data-hex-code、background-color下的rgb三个值

!<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<script type="text/javascript" src="tcx.js"></script>
	<script>
	  const colorCodeRegx =  /(data-color-code)=[^\s][^"]+/gi;
	  const hexCodeRegx =  /(data-hex-code)=[^\s>]+/gi;
	  const colorRegx =  /<div\s[^>]*style=\"([^">]+)\"[^>]*>/ig;

	  const listOfColorCode = str.match(colorCodeRegx);
	  const listOfHexCode = str.match(hexCodeRegx);
	  const listOfColor = str.match(colorRegx);
	  
	  const listOfResult = listOfColor.map((item, index) => {
	    return {
	      color_code: listOfColorCode[index].match(/(?<=data-color-code\=").+/ig)[0],
	      hex_code: listOfHexCode[index].match(/(?<=data-hex-code\=").+[^"]/ig)[0],
	      rgb: item.match(/(?<=rgb\().+(?=\);")/ig)[0],

	    }
	  });
	  var result="[\r\n";
	  var len = listOfResult.length;
	  for (var i = 0; i < len; i++) {
	  	result+="\t"
	  	result+=JSON.stringify(listOfResult[i]);
	  	if (i != len-1) {
			result+=",\r\n"
	  	}else{
	  		result+="\r\n"
	  	}
	  }
	  result+="]";
	  console.log(result);
	</script>

</head>
<body>

</body>
</html>

⑦用浏览器打开上一部的html文件，F12查看控制台，将结果保存即可在这里插入图片描述

最后将文本粘贴至txt文档即可。