文字列に含まれるURLをhtmlのAタグに変換するJSライブラリ「anchorify」

 Slackなどに見られるチャットアプリには、 メッセージ本文内に ' URL ' や ' Eメールアドレス ' が含まれていると 自動でリンクが作成される機能が搭載されています。

 それと同等の機能を実装するとなると、文字列を読み込みこんだ後、 「URL が含まれているか?」「プロトコルが入っているか?」「それはEメールアドレスなのか?」など色々と解析、判別する必要があります。

そんな面倒なことが簡単に実現できる javascriptライブラリが「anchorify」です。

- 文字列内に含まれる ' URL ', ' Eメールアドレス ' を自動で判別し、HTMLのアンカータグに変換できる

# base
'この example.com がリンクタグに!';

# output
この <a href="http://example.com"> example.com </a> がリンクタグに！

anchorify は ' npm ', ' yarn ' を使って、コマンドライン上からライブラリ本体を入手します。

# npm
npm i --save anchorify
# yarn 
yarn add anchorify

( * anchorifyはモダンブラウザ上での動作はサポートされていますが、モジュール形式で作成されているため、ブラウザ上で使用するには babel + webpackなどを通してライブラリ本体を読み込む必要があります ) 

anchorify は1メソッド、1オプションという必要最低限の構成なので、簡単に使うことができます。

// 最低限の使い方 * node.js , モダンなwebブラウザで動作します
anchorify(解析する文字列, オプション)

 下のスニペットは 変数 baseStr の文字列を アンカータグ付きの文字列で返します。文字列内にURLが含まれているので、アンカータグが添えられています。

const anchorify = require('anchorify');

var baseStr = 'この example.com がリンクタグに！';

anchorify(baseStr);
// output:
// この <a href="http://example.com"> example.com </a> がリンクタグに！

Eメールアドレスが含まれている場合は ' mailto: ' オプションが自動で含まれます

const anchorify = require('anchorify');

var emailStr = 'Eメールアドレス test@email.test のテスト';

anchorify(emailStr)
// output :
// Eメールアドレス <a href="mailto:test@email.test"> test@email.test </a> のテスト

 第二引数に ' target ' オプションが入っていると、アンカータグに ' target="_blank" ' が入り、新しいタブでURLが開かれます。また、Eメールアドレスには ' _blank ' は添えられません。

const anchorify = require('anchorify')

var str = `blankオプション:
            URL : example.com
            E-mail : test@email.test`;

anchorify(str, { target: '_blank' });
// output:
/*
blankオプション:
  URL : <a href="http://example.com"rel="noreferrer noopener" target="_blank"> example.com </a>
  E-mail : <a href="mailto:test@email.test"> test@email.test </a>
*/

以上が anchorify の紹介でした。下記のリンクには実際に anchorifyを使ったデモページを作成しました。

cupOF Demo : anchorifyを使ったデモ

 フォームから受け取る文字列で、その他 Socket.ioや WebSocketを使って チャップアプリなどを開発している人には 活躍する機会がありそうなライブラリです。

GitHub : poppinss/anchorify