整理书签

先展示一下之前的书签

image

• 身为假强迫症.想把书签整理成从短到长(真强迫症会把 title 都改到非常简洁)

开始吧

• 把 chrome 书签导出为 html 格式

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("a").parent().parent().each(function(){
  
            var newArr = new Array(),
            title = $(this).prev().text(),
            arr = $(this).children('dt').children('a'),
                copy_arr = $.extend(true, {}, arr),  // 深拷贝一份.
                new_arr = arr_sort(copy_arr);
                set(arr,new_arr);
            });
  
        // 重新赋值
        function set(arr,newArr) {
            $(arr).each(function (i) {
                var new_link_html = newArr[i].title,
                new_link_icon = newArr[i].icon,
                new_link_href = newArr[i].href;
                new_link_date = newArr[i].date
                $(this).html(new_link_html).attr('href',new_link_href).attr('icon',new_link_icon).attr('add_date',new_link_date);
            });
        }
  
        // 排序 返回一个目录下标签的对象
        function arr_sort(arr) {
            arr.sort(function (a,b) {
                var a_title = $(a).html(),
                b_title = $(b).html();
                if (!a_title) {
                    a_title = 'no';
                }
                if (!b_title) {
                    b_title = 'no';
                }
  
                if (strlen(a_title)< strlen(b_title)) {
                    return -1;
                }else{
                    return 1;
                }   
            });
  
            var new_list = [];
            arr.each(function (i) {
                var newLink = new new_link($(this).html(),$(this).attr('icon'),$(this).attr('href'),$(this).attr('add_date'));
                new_list[i] = newLink;
            })
  
            return new_list;
        }
  
        // 返回字符串的长度
        function strlen(str){
            var len = 0;
            for (var i=0; i<str.length; i++) {
                var c = str.charCodeAt(i); 
                //单字节加1 
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
                    len++; 
                } else { 
                    len+=2; 
                } 
            } 
            return len;
        }
  
        // 返回一个书签的关键信息
        function new_link(title,icon,href,date) {
            this.title = title;
            this.icon = icon;
            this.href = href;
            this.date = date;
        }
    })
    </script> 
  

• 在 html 中粘入这串代码

• 放在</body>结束后就可以

• 在浏览器打开就发现排好序了.保存该网页,导入浏览器就可以

  image

说下思路吧

• 各书签文件夹目录不动.

• 只排序各目录下的书签.

• 从 a 标签入手,找该标签属于哪个目录
  

  image
  • 已经提出过目录文件夹不动,所以只是排序蓝色<dl>标签下的顺序.
  • 一个目录下的每个 a 标签都被 <dt> 标签包裹,但每个目录下的标签长度都是不变的,所以不需要处理 <dt>
  • 将一个目录下 <dl> 下的 a 标签都找出, 深拷贝一份,(否则排序会导致原有数组也排序,之后无法正常赋值)
  • 根据innerHTML排序(要注意一个英文字符占1,一个中文字符占2),生成包含一个书签必要的4元素的数组
  • 将原有书签数组和排序后的数组进行循环赋值.

坑: 一定要深拷贝一份.否则循环的时候,原有书签,在内存中已经是排序后的,赋值没有效果

写了一个 Chrome 插件 webstore

• 从打开浏览器每一个小时,会发出水滴声.提醒自己休息一下
• 将书签排序
• 备用地址