javascript 纯前端实现文件解析 例如导入Chrome书签
2019-10-17
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
## 需求
用纯js解析chrome浏览器的导出的书签文件bookmarks_xxx.html
## 演示
## 代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入chrome书签</title>
</head>
<body>
<input type="file" id="file" onchange="getFileContent()">
<div id="info">
</div>
<script>
const info = document.querySelector('#info');
const defaultIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADCUlEQVQ4jXWTTWwTVxSFz7w3Q+yMhSM5hga6aRgFEoGiuiUVqapGQsREbJAgi26yoEFqF+4iUlYRQl1X2SA2hbKhlG5YWEFWayuVoraEEIk2NBBja4ynBQcwJpJt7Jk372e6CZSfchZXd/Hdo3ulczW8RWNjYx2RSGR7o9HgjLEnCwsL4m3sK5qamjqYTqczjUajXSgUgtW/VtXxY8eqs7OzFyYnJ/tf5+nzZmRkRE+lUmdnZmbOVKtP+hhjRi6XQ3xbXCuXy+ZGrfb+aHL0RCKRqM3Pz//xhsH4+PjZ6enpLymlmucx9Pa+h9XV28hkMmi1Wmg06ujoCBmfT54cE4L/vbS0dOuFwfGjRw+eOn36zNatUU1KhUjExNzcVZTLDjyPIVAKSircv/8PYt3dZHnp+ic7du78vlQqPSMAEI3FpmKxbk1IgWaziXPnL+D2Wh5t1wWlFIQQaIRAKYW7a2v49vx3sWQy+QUA6AMDA1s0YCSfz+PG8jIMYwuebmwgUAGCIAAQIACAzbrLsmAYBgYHBw8D+Fo3TXO763qdjuNgvVJBKBwG8zwEQQDBOYQQUFJCKQWlFKJdXeCcIxrteteyLIMA4NxnwfXFRcTjcTxcf4hwqAOe54IxD9z3IQSHFAJSCjx+9AitdhuOU1YAoJumWePCr1UePIjX63XsHxqCruvwGUO1WoUQHL7vg29uc+niReSyWbRd17Ztm1PHcVRfX99uJWWCaBpSX6UwPDyMxAcJhENh3FpZge/78H0GJSWCQOFZswlK6ezdQuGGDgC+z78hCD6jlHRKKSGEhGmaODR6COFwCMViEbmff/ovfbpuu4xdfpED27af7ukfeOy2WkdKJZt8uH8IhBAIIdHTswNSSfz+268AAE0j9YhpTlzNZNZeSWKxWFzZt3ffvfVK5VMAnbv39EMIgcVr1/DjD5fQbrVAdd2OmObElXT6l+dz2uvPkUwmeyyr9+RHBz4+/OfNm+/k79xRlNJ7hmHMuYxdzmazGy/zbxi8JGJZlrF5Igeg/g/6F88wgad2mBiQAAAAAElFTkSuQmCC';
function getFileContent() {
/*创建文件读取对象*/
const reader = new FileReader();
const file = document.querySelector("#file").files;
// reader.readAsDataURL();
reader.readAsText(file[0], "utf-8");
reader.onload = function (e) {
const bookmarks = reader.result.replace(/<DT>/g,"");
// const parser = new DOMParser();
// const doms = parser.parseFromString(bookmarks, "text/xml");
const doms = document.createElement('html');
doms.innerHTML = bookmarks;
const dts = doms.getElementsByTagName('A');
info.innerHTML = '';
console.log(dts.length)
console.log(doms)
console.log(dts)
console.log(bookmarks)
for (const index in dts) {
const dta = dts[index];
let div = '<div>';
if (dta && dta.innerHTML) {
const href = dta.getAttribute('HREF');
const icon = dta.getAttribute('ICON') ? dta.getAttribute('ICON') : defaultIcon;
const date = formatTime(dta.getAttribute('ADD_DATE'), 'Y/M/D');
div += '<a href="' + href + '" target="_blank">'
+ '<img src="' + icon + '">'
+ dta.innerHTML
+ date
+ '</a>'
}
div += '</div>';
info.innerHTML += div;
}
}
}
/**
* 时间戳转化为年 月 日 时 分 秒
* number: 传入时间戳
* format：返回格式，支持自定义，但参数必须与formateArr里保持一致
*/
function formatTime(number, format) {
const formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
const returnArr = [];
const date = new Date(number * 1000);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (const i in returnArr) {
format = format.replace(formateArr[i], returnArr[i]);
}
return format;
}
//数据转化
function formatNumber(n) {
n = n.toString();
return n[1] ? n : '0' + n
}
</script>
</body>
</html>
```
沪公网安备31010602005070号