记一次解析Pantone Color TCX 色彩码

jack_dos

已于 2024-04-26 15:28:37 修改

阅读量1k

点赞数

分类专栏：笔记文章标签：爬虫 html js

于 2020-07-23 21:21:52 首次发布

本文链接：https://blog.csdn.net/u013283476/article/details/107548202

版权

笔记专栏收录该内容

24 篇文章 2 订阅

订阅专栏

第一次尝试解析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>