本文主要是介绍记一次解析Pantone Color TCX 色彩码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
第一次尝试解析TCX
第二次尝试解析TPG
第三次一次到位TCX&TPG
①打开潘通·中国官网
②在找寻潘通色彩一栏输入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文档即可。
这篇关于记一次解析Pantone Color TCX 色彩码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
