【Blogger】コメント本文の URL をリンク化する

Blogger ブログでコメントを書き込むとき、ソースとして URL を載せることがある。コメント欄ではアンカータグ a が使えるが、アドレスバーからコピーした URL をプレーンテキストのまま投稿する人も多い。

そのような URL がリンクになっていたほうが便利だと思い、JavaScript でコメント本文の URL をリンク化する方法を考えてみた。

コメント本文の URL をリンク化する

コメント本文は以下のコードによって表示されるものとする。

<p class='comment-body'><data:comment.body/></p>

次に、テーマの HTML の </body> の上らへんに以下のコードを追加する。と言いつつ、DOMContentLoaded 使ってるからある程度はどこでもいけるはず。

<b:if cond='data:view.isSingleItem'>
<script>
window.addEventListener('DOMContentLoaded', () => {
  const siteUrl = /<data:blog.homepageUrl.cssEscaped/>/g;
  //<![CDATA[
  const regUrl = /(https?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+)/g;
  const comments = document.querySelectorAll('.comment-body');
  for(let i = 0; i < comments.length; i++){
    const comment = comments[i];
    if(regUrl.test(comment.textContent)){
      const link = `<a href="$1"${siteUrl.test(comment.textContent) ? '' : ' target="_blank" rel="noopener noreferrer"'}>$1</a>`;
      comment.innerHTML = comment.innerHTML.replace(regUrl, link);
    }
  }
})
//]]></script>
</b:if>

うまくいったら、コメント本文のただの URL がちゃんとリンクになっているはず。ついでに外部リンクの場合は target="_blank" と rel="noopener noreferrer" を a タグに付け、内部リンクには何も付けない、という処理もしている。

今まで指定文字列の存在確認に match() を使っていた。

• String.prototype.match() - JavaScript | MDN

ただよくよく調べてみたらこのメソッドは戻り値として配列か null を返すとのことで、if 文の条件式で使うのはあまりよくないかもなあと思い始めた。

そこで、match() と同じように正規表現を使って指定文字列の検索ができる test() を代わりに使うことにした。

• RegExp.prototype.test() - JavaScript | MDN

このメソッドなら戻り値として true か false を返すから条件式で使うのも自然だし、どうやらこっちのほうが処理も速いらしい。

コード中の正規表現は以下の記事を参考にした。

• 文字列中のURLを探してリンクにするJavaScript - ginpeiのブログ

ttp 表記の URL については、そもそも自分しか書き込まないコメント欄で頭の h 取るようなことしないので対応させなかった。

すぐ上の発言からもわかるように、このカスタマイズは自分が使うことしか想定していない。

コメント本文にプレーンな URL と一緒に他のリンクが存在する場合、本スクリプトのせいで表示がバグるかもしれないので使うときは注意。

あとがき

コメント本文の URL のリンク化に挑戦してみた。正規表現に対して苦手意識しかないのでどうなることかと思ったが、神みたいな記事を見つけたので事なきを得た。まじで感謝。

あと絶対ここで言うことじゃないけれどあけましておめでとうございます！