My tech diary

ソフトウェアエンジニアをやっています。技術的内容を中心に調べたことを書いていきます。

URL 一覧を Markdown リンク一覧に変換する

Markdown

一時的に取っておいた URL 一覧を見やすい Markdown の形に変換したいというニーズが生じたため、サクッと行いました。

基本的には References に挙げた Gist を参考にさせていただきました。 ただ、元コードが CORS 制限回避のため crossorigin.me という proxy ツールを使っていたんですが、こちらのサービスサイト (https://crossorigin.me/) がドメイン切れを起こしていたため、代替として CORS Anywhere というツールを使うように変更しました。

モダンブラウザで新規 blank タブを開いた状態で DevTools を開き、 Console に以下のスニペットを打ち込めば、そのまま動きます。 応用すれば、 HTML リンク一覧や、 Facebook や Twitter みたいなカード形式での一覧とか、いろいろできそうです。

// Only using native browser features (no jQuery).
// Uses `fetch`, `DOMParser` and `querySelectorAll`.

const urls = [
  // Replace them with what you wanna save.
  'https://dev.classmethod.jp/articles/cdk-over-21-lambda-create-error/',
  'https://github.com/ReactorKit/ReactorKit',
  'https://github.com/date-fns/date-fns',
];

const getTitle = async (url) => {
  return fetch(`https://cors-anywhere.herokuapp.com/${url}`)
    .then(response => response.text())
    .then(html => {
      const doc = new DOMParser().parseFromString(html, 'text/html');
      const title = doc.querySelectorAll('title')[0];
      return title.innerText;
    });
};

const convertToMarkdownLink = async (url) => {
  const title = await getTitle(url);
  return `[${title}](${url})`;
};

const links = await Promise.all(
  urls.map(url => convertToMarkdownLink(url))
);

console.log(links.map(link => `- ${link}`).join('\n'));

References