moozik

将网页中的表格转为markdown[迷上了js]
githubhttps://github.com/moozik/script/blob/master/table2...
扫描右侧二维码阅读全文
08
2017/05

将网页中的表格转为markdown[迷上了js]

github

https://github.com/moozik/script/blob/master/table2md.js

工具按钮

表格转md

拖到收藏夹,看到想偷的表格点一下然后去看console就行了。

目标表格

测试用的table,源地址为HTML DOM 事件对象 | 菜鸟教程

属性描述DOM
onclick当用户点击某个对象时调用的事件句柄。2
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发右边有空格 左边有空格
ondblclick当用户双击某个对象时调用的事件句柄。2
onmousedown多个标签:span标签3333span标签ssss2
onmouseenter当鼠标指针移动到元素上时触发。2
onmouseleave当鼠标指针移出元素时触发2
onmousemove鼠标被移动。2
onmouseover鼠标移到某元素之上。2
onmouseout鼠标从某元素移开。2
onmouseup鼠标按键被松开。2

上次写求数独的程序的时候去菜鸟教程查资料,看到了表格就很想偷过来,可是发现table转成markdown很恶心,而且现有的程序很难方便的转换成能够直接用的markdown代码。

以下为查到的不能用的在线工具,第一个不过滤数据里的html标签,第二个就不支持table。
html转markdown
Html/MarkDown互转工具

主要代码

window.table2md=(function(e){
    var table2md=function(innerHTML=false, debug=false){
        var doc_table = document.getElementsByTagName('table');
        if(doc_table.length!==0)
        {
            for(var i=0;i<doc_table.length;i++)
            {
                clog('table ['+i+']','rgb(242, 107, 169)');
                table2md_one(i, innerHTML, debug);
            }
        }else{
            clog('找不到table','brown');
        }
        e();
    }

    var clog = function(str,color){
        console.log('\n%c'+str+'\n\n','font-size:15px;color:rgb(250, 250, 242);background:'+color+';padding:3px 0px;border-radius:3px 3px 3px 3px;');
    }
    var table2md_one = function(index=0, innerHTML=false, debug=false){

        var doc_table = document.getElementsByTagName('table');
        // if(doc_table.length===0)return '没有找到表格';
        // if(doc_table.length<=index)return '索引为"'+index+'"的表格不存在';
        //当前表格
        var table = doc_table[index];
        //table=>[thead|tbody]
        var table_type = ['thead','tbody'];
        //生成数组
        var table_arr=[];
        //数据对象
        var tbody,tbody_tr,tbody_tr_td;
        //临时变量
        var data,arr_i;
        //循环变量
        var a,b,c,d;
        //列数
        var column_length=0;

        //遍历可能的组合
        for(a=0; a<table_type.length; a++)
        {
            //[thead|tbody]不存在则跳出
            tbody = table.getElementsByTagName(table_type[a]);
            if(tbody.length === 0)
            {
                continue;
            }
            //遍历每一个[tbody|thead]
            for(b=0; b<tbody.length; b++)
            {
                tbody_tr = tbody[b].getElementsByTagName('tr');
                if(tbody_tr.length === 0)
                {
                    continue;
                }
                //遍历每一个tr
                for(c=0; c<tbody_tr.length; c++)
                {
                    //判定标签为[td|th]
                    tbody_tr_td = tbody_tr[c].getElementsByTagName('td');
                    if(tbody_tr_td.length === 0)
                    {
                        tbody_tr_td = tbody_tr[c].getElementsByTagName('th');
                        if(tbody_tr_td.length === 0)
                        {
                            continue;
                        }
                    }
                    //第一次匹配到非空[td|th]时确定列数
                    if(column_length === 0)
                    {
                        column_length = tbody_tr_td.length;
                    }
                    arr_i = table_arr.length;
                    table_arr[arr_i] =[];
                    //遍历每一个[td|th]
                    for(d=0; d<column_length; d++)
                    {
                        //是否debug
                        if(debug)
                        {
                            console.log(index,table_type[a],b,c,d,tbody_tr_td[d]);
                            console.log("document.getElementsByTagName('table')["+index+"].getElementsByTagName('"+table_type[a]+"')["+b+"].getElementsByTagName('tr')["+c+"].getElementsByTagName('"+tbody_tr_td[d].localName+"')["+d+"]");
                        }
                        //当前数据为空
                        if(typeof tbody_tr_td[d] === 'undefined')
                        {
                            data = '<empty>';
                        //表格嵌套判定
                        }else if(tbody_tr_td[d].getElementsByTagName('table').length !== 0)
                        {
                            data = '<is a table>';
                        }else
                        {
                            //innerHTML or innerText 获取方式
                            if(innerHTML)
                            {
                                data = tbody_tr_td[d].innerHTML;
                            }else
                            {
                                if(typeof tbody_tr_td[d].innerText === 'undefined')
                                {
                                    data = '';
                                }else
                                {
                                    data = tbody_tr_td[d].innerText;
                                }
                            }
                        }
                        table_arr[arr_i][d] = data.replace(/\|/g,'\\\|').replace(/\n/g,'');

                    }//tbody_tr_td end

                }//tbody_tr end

            }//tbody end

        }//table_type end

        console.log((function(t_arr){
            var output='| '+t_arr[0].join(' | ')+' |\n';
            var i;
            for(i=0;i<t_arr[0].length;i++)
            {
                output += '| :--- ';
            }
            output += '|\n';
            for(i=1;i<t_arr.length;i++)
            {
                output += '| ' + t_arr[i].join(' | ') + ' |\n';
            }
            return '\n'+output+'\n';
        })(table_arr));
    }
    return table2md;
}(function(){
    var text = '%ctable2md by:https://moozik.cn/\n' +
    '%c页面内获取所有表格:table2md([true=>use innerHTML,false=>use innerText], 是否开启debug[true,false])\n\n' + 
    'example:table2md() 文本数据\n' + 
    'example:table2md(1,0) html数据\n' + 
    'example:table2md(0,1) 文本数据,debug';
    console.log('\n'+text+' \n\n','font-size:16px;color:rgb(242, 107, 169);','font-size:15px;color:blue;');
}));

笔记

js正则模式
http://www.cnblogs.com/seven7seven/p/4778726.html

字符含义
i不区分大小写
g全局匹配
m多行匹配

js正则编译

htmlcode[p][0] = new RegExp(htmlcode[p][0],"g");

HTML字符实体
http://www.w3school.com.cn/html/html_entities.asp

显示结果描述实体名称实体编号
空格  
<小于号<<
>大于号>>
&和号&&
"引号""
'撇号' (IE不支持)'
分(cent)¢¢
£镑(pound)££
¥元(yen)¥¥
欧元(euro)
§小节§§
©版权(copyright)©©
®注册商标®®
商标
×乘号××
÷除号÷÷
最后修改:2019 年 04 月 30 日 05 : 58 PM

8 条评论

  1. rua!

    博主是不是忘记放`js`到`moozik.cn/js/table2md.js`目录了...

    1. moozik
      @rua!

      是啊,空间到期了不是没了吗,有些小脚本没了
      这个东西也就当时脑子一热写了,后来没咋用过

  2. Flyer

    好厉害的样子

    1. moozik
      @Flyer

      然而没什么用,瞎折腾∠( ᐛ 」∠)_

  3. 小尾巴

    好腻害的样子 OωO

    1. moozik
      @小尾巴

      原生js才是男人的浪漫ヾ(≧∇≦*)ゝ

  4. themebetter

    搞技术就是要多想多研究多折腾,很不错。

    1. moozik
      @themebetter

      大佬过奖了୧(๑•̀⌄•́๑)૭

发表评论