js 获取当前页面 h1 标题及链接，拼接成 markdown 链接格式

因为经常要在我大象笔记博客里将其他文章的引用链接贴到当前文章里，手动复制标题和链接太麻烦了。

所以需要在页面里嵌入一段 js 代码，自动获取当前页面 h1 标题 及 链接，拼接成 markdown 链接格式。

代码

const h1 = document.querySelector('h1');
if (h1) {
  const title = h1.textContent;
  const url = window.location.href;

  const markdownLink = `[${title}](${url})`;

  console.log(markdownLink);
}

这段代码会首先查找页面中第一个 h1 元素，然后从该元素中提取标题文本和当前页面的链接。最后，它将这些信息合并成一个 markdown 格式的链接，并将其输出到控制台。

同时判断如果页面中没有 h1 元素，则上述代码不会输出任何内容。

输出效果

[Android SQLDelight (一) 配置及数据库初始化](https://www.sunzhongwei.com/android-sqldelight-configuration-and-database-initialization)

页面上增加按钮触发这段 js

生成一个 html link，点击触发一段 js 代码，将当前 markdown link 复制到剪切板。分离 js 代码到 script 标签中

<a href="#" id="copyTitleLink">复制页面标题</a>

<script>
  var copyTitleLink = document.getElementById('copyTitleLink');
  copyTitleLink.addEventListener('click', function(e) {
    e.preventDefault();
    const h1 = document.querySelector('h1');
    if (h1) {
      const title = h1.textContent;
      const url = window.location.href;
      const markdownLink = `[${title}](${url})`;
      console.log(markdownLink);
      navigator.clipboard.writeText(markdownLink);
    }
  });
</script>

注意：

• 在回调函数中，首先使用 preventDefault 方法取消默认的链接行为
  
• 由于浏览器安全限制，navigator.clipboard.writeText() 方法只能在 HTTPS 页面或 localhost 上使用

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式