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

发布时间: 2023-05-26 10:29:49 作者: 大象笔记

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

所以需要在页面里嵌入一段 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>

注意:

我是一名山东烟台的开发者,联系作者