Markdownのリンクを別タブで開くようにする #JavaScript

Markdown で書いたドキュメントのリンクから別タブで開くようにするための処理を書いていきます。

Markdown を表示する

index.html に JavaScript を使って Markdown を表示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- head -->
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
    <script>
      const markdown = `
## Markdown ドキュメント

### リンク一覧

[私のQiita](https://qiita.com/diskszk)  
[私のGitHub](https://github.com/diskszk)
`;

      (function () {
        const div = document.createElement("div");
        div.innerHTML = marked(markdown);
        document.body.appendChild(div);
      })();
    </script>
  </body>
</html>

index.html ファイルをブラウザで開くと Markdown を表示していることが確認できます。

developer tool で確認すると、当然 href 属性しか設定されていません。

aタグに属性を追加する

リンクをクリックした時に別タブで開かせたいので、 a タグに target="_black" と rel="noopener noreferrer の属性を追加する処理を書いていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- head -->
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
    <script>
      const markdown = `
    <!-- markdown の内容 -->
`;

      (function () {
        const div = document.createElement("div");
        div.innerHTML = marked(markdown);
        document.body.appendChild(div);
      })();

+      document.addEventListener("DOMContentLoaded", function () {
+        const links = document.querySelectorAll("a");
+        links.forEach(function (link) {
+          link.setAttribute("target", "blank");
+          link.setAttribute("rel", "noopener noreferrer");
+        });
+      });
    </script>
  </body>
</html>

これでリンクをクリックした時に別タブで開くようになりました。

Markdownのリンクを別タブで開くようにする

Markdown を表示する

aタグに属性を追加する

参考