javascript实现纯前端导入Chrome书签文件并解析

home 编辑时间 2019/09/30

![](/api/file/getImage?fileId=5d916bed16199b04500013f2)

## 需求
用纯js解析chrome浏览器的导出的书签文件bookmarks_xxx.html

## 演示
![](/api/file/getImage?fileId=5d916b1016199b04500013ef)

## 代码
```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>
```

送人玫瑰,手留余香