一键将HTML网页选中区块复制转换为Markdown格式

工具

浏览器插件：tampermonkey 油猴 JS脚本：nameldk 的《复制为Markdown格式》 0.3.1版本 基础上添加代码。

需求

程序员做笔记最简洁的就是markdown了，html转存为markdown格式就好了，样式统一，编辑也方便。

上面的工具和脚本，转换代码块、图片、超链接文字都很好，支持标签区块识别(像是印象笔记或有道云笔记的网页剪辑那种)，随选随转，十分方便。 唯一的缺点就是不支持table标签。

实现

在原有脚本基础上修改，使其支持table标签转换。测试了几个想保存的页面，没什么问题。至于其他网页碰到再说，暂不确定兼容情况。

在转换规则中，添加tr、td&th、table规则

删掉顶部的// @require那句，将其引用的turndown.js内容完整复制，粘贴到在JS脚本头部，然后在其中添加table转换的部分。

// // ============================================================================== // // 在turndown中添加的转换table部分(author:watfe) // // ============================================================================== rules.td = { filter: ['td'], replacement: function (content, node, options) { content = content.trim(); content = content.replace(/\|/g,'/'); content = content.replace(/\n+/g,' <br> '); content = '|'+content // console.log('td:'+content); return content } }; rules.th = { filter: ['th'], replacement: function (content, node, options) { content = content.trim(); content = content.replace(/\|/g,'/'); content = content.replace(/\n+/g,' <br> '); content = '|#$&%th$#%&'+content if (node.getAttribute('colspan')!=null){ //如果表头存在合并单元格，对其进行处理 content = content+repeatStringNumTimes('|', node.getAttribute('colspan')); } // console.log('th:'+content); return content } }; rules.tr = { filter: ['tr'], replacement: function (content, node, options) { content = '|\n'+content.trim(); // console.log('tr:'+content); return content } }; function repeatStringNumTimes(str, num) { //字符串重复N次 let repeatStr = ''; for(let i = 0; i < num; i++){ repeatStr += str; } return repeatStr; } rules.table = { filter: ['table'], replacement: function (content, node, options) { // 删首尾空，删除最前面多余的|，并在最后补全| //console.log('table1:'+content); content = content.trim(); content = content.replace(/\n+/g, '\n'); content = content.replace(/\n\|\n/g, '|\n'); if (content.indexOf('|\n')===0){ content = content.substring(1, content.length)+'|'; } content = content.trim(); // 如果表最前端包含<caption>表名标签的，通过下面代码优化让<caption>变成独立一行 //console.log('table2:'+content); var captionLine = ''; if (content.slice(0,1)!='|' && (content.slice(-1)!='|')){ captionLine = content.slice(0,content.indexOf('|\n'));//captionn那行 content = content.slice(content.indexOf('|\n')+2); content = content+'|' } // 检查表格包含几个|，数字减1就是列数，模拟出markdown表格中间的---： var verticalLineCount = 0; var strs = new Array(); var thExist = false; strs = content.split('\n'); for (let i=0; i<strs.length; i++ ){ // 计算最多列数 if(strs[i].indexOf('|')>=0){ let tempnum = strs[i].match(/\|/ig).length; if (tempnum>verticalLineCount){ verticalLineCount = tempnum; } } } var buildTh = repeatStringNumTimes('| ',verticalLineCount).trim(); // 构造没有表头时候，markdown需要的表头 比如：| | | | var tableMDLine = '|'+repeatStringNumTimes('---|',verticalLineCount-1); // 构造markdown表中间的横线 比如：|---|---|---| // 检查是否包含表头 //console.log('table3:'+content); if (content.indexOf('|#$&%th$#%&')>=0){ content = content.replace(/\|#\$&%th\$#%&/g, '|'); content = content.replace('\n','\n'+tableMDLine+'\n'); } else{ content = buildTh+'\n'+tableMDLine+'\n'+ content; } content = '\n'+captionLine+'\n\n'+content+'\n\n'; //console.log('table4:'+content); return content } }; // // ============================================================================== // // 添加完毕 // // ==============================================================================

调整markdown输出格式

比如：h1用#而不是下划线，代码块用```等等。 在JS脚本建立TurndownService实例前，加入这些配置。

// ============================================================================== // 根据turndown文档，调整一些参数，让转化出来的markdown格式，满足自己的需要 // https://github.com/domchristie/turndown // ============================================================================== let options = { headingStyle: 'atx', bulletListMarker: '+', codeBlockStyle: 'fenced', emDelimiter: '*' }; // ============================================================================== // 添加完毕 // ============================================================================== let turndownService = new TurndownService(options);

其他bug修正

.replace(/(<a.+?href=")(.*?")(.*?<\/a>)/gi, parseHref);修改为.replace(/(<a.+?href=")(.*?)(".*?<\/a>)/gi, parseHref); 原本的代码，因为这个错误会导致herf链接包含#号时出错

测试

转换成功