需求

通过纯前端来解析用户上传的文件,并在前端直接做出反馈
从而减少后端服务器的压力,也减少等待时间优化了用户体验
例如用纯js解析chrome浏览器的导出的书签文件bookmarks_xxx.html



演示



代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>导入chrome书签</title>
  6. </head>
  7. <body>
  8. <input type="file" id="file" onchange="getFileContent()">
  9. <div id="info">
  10. </div>
  11. <script>
  12. const info = document.querySelector('#info');
  13. const defaultIcon = 'data:https://cdn2.zzzmh.cn/blog/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';
  14. function getFileContent() {
  15. /*创建文件读取对象*/
  16. const reader = new FileReader();
  17. const file = document.querySelector("#file").files;
  18. // reader.readAsDataURL();
  19. reader.readAsText(file[0], "utf-8");
  20. reader.onload = function (e) {
  21. const bookmarks = reader.result.replace(/<DT>/g,"");
  22. // const parser = new DOMParser();
  23. // const doms = parser.parseFromString(bookmarks, "text/xml");
  24. const doms = document.createElement('html');
  25. doms.innerHTML = bookmarks;
  26. const dts = doms.getElementsByTagName('A');
  27. info.innerHTML = '';
  28. console.log(dts.length)
  29. console.log(doms)
  30. console.log(dts)
  31. console.log(bookmarks)
  32. for (const index in dts) {
  33. const dta = dts[index];
  34. let div = '<div>';
  35. if (dta && dta.innerHTML) {
  36. const href = dta.getAttribute('HREF');
  37. const icon = dta.getAttribute('ICON') ? dta.getAttribute('ICON') : defaultIcon;
  38. const date = formatTime(dta.getAttribute('ADD_DATE'), 'Y/M/D');
  39. div += '<a href="' + href + '" target="_blank">'
  40. + '<img src="' + icon + '">'
  41. + dta.innerHTML
  42. + date
  43. + '</a>'
  44. }
  45. div += '</div>';
  46. info.innerHTML += div;
  47. }
  48. }
  49. }
  50. /**
  51. * 时间戳转化为年 月 日 时 分 秒
  52. * number: 传入时间戳
  53. * format:返回格式,支持自定义,但参数必须与formateArr里保持一致
  54. */
  55. function formatTime(number, format) {
  56. const formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  57. const returnArr = [];
  58. const date = new Date(number * 1000);
  59. returnArr.push(date.getFullYear());
  60. returnArr.push(formatNumber(date.getMonth() + 1));
  61. returnArr.push(formatNumber(date.getDate()));
  62. returnArr.push(formatNumber(date.getHours()));
  63. returnArr.push(formatNumber(date.getMinutes()));
  64. returnArr.push(formatNumber(date.getSeconds()));
  65. for (const i in returnArr) {
  66. format = format.replace(formateArr[i], returnArr[i]);
  67. }
  68. return format;
  69. }
  70. //数据转化
  71. function formatNumber(n) {
  72. n = n.toString();
  73. return n[1] ? n : '0' + n
  74. }
  75. </script>
  76. </body>
  77. </html>