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