第一次尝试解析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文档即可。