一键复制 markdown 链接

Posted on Edited on In

大家在写文章或者作笔记的时候必不可少的都会贴上链接，作为参考（Reference），但是每次都要分步复制链接和标题太麻烦了，于是找了下相关的工具。

一般有两种形式的链接：

  1. markdown 格式，适合纯文本的编辑器：[百度一下，你就知道](https://www.baidu.com/)
  2. 富文本格式，适合富文本编辑器：百度一下，你就知道

Chrome 插件

  • mUrl：个人开发，轻量，仅支持 markdown
  • TabCopy：功能全，支持各种格式，快捷键（推荐）

JS Bookmark

第一次接触的同学可能不知道，可以用书签的方式在当前页面执行 JS 脚本，比如在地址栏输入：

1
javascript: alert(document.title);

就会弹出当前页面的标题。那我们也可以通过这种方法实现复制链接的功能。
PS: 有部分定制浏览器可能不支持这种方式

利用 copy 事件监听

copy 事件的 event 对象可以直接访问 clipboardData 对象，可以设置剪贴板内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function copyHandler(e) {
  // markdown
  // e.clipboardData.setData('text/plain', `[${document.title}](${location.href})`)
  // 富文本link
  e.clipboardData.setData(
    "text/html",
    `<a href="${location.href}">${document.title}</a>`
  );
  e.preventDefault();
}

window.addEventListener("copy", copyHandler);
document.execCommand("copy");
window.removeEventListener("copy", copyHandler);

利用 Clipboard.write()方法

创建 Clipboard 对象，向剪贴板写入
例子：ClipboardItem JavaScript API

1
2
3
4
5
const html = `<a href="${location.href}">${document.title}</a>`;
const blob = new Blob([html], { type: "text/html" });
navigator.clipboard.write([new ClipboardItem({ "text/html": blob })]);

// tip: 不能直接复制到 console 运行，否则会报 DOMException: Document is not focused.

FYI

这里提供下两种格式的书签，需要的可以添加到书签：

富文本

1
javascript: navigator.clipboard.write([new ClipboardItem({'text/html': new Blob([`<a href="${location.href}">${document.title}</a>`], {type: 'text/html'})})])

markdown

1
javascript: navigator.clipboard.writeText(`[${document.title}](${location.href})`)

参考

通过 JS 将带格式的文本复制到剪贴版的两种方法 - 简书