React.js/jQuery 対応の JavaScript で文字列中の URL をリンクに変換するプラグイン Linkify

Programming

2017.05.312017.06.03

フロントエンドを JavaScript で記述する際、テキスト中にある URL をリンクに変換したい、という事は多いだろう。

しかし、URL の文字列をリンクに変換するというのは結構面倒だ。ググると正規表現で置換する方法が出て来るが、URL の正規表現は非常に複雑である上に、ユーザーが投稿するような Web アプリでは XSS の元にもなる。

何か良い方法は無いかと探してみた所、Linkify というプラグインを利用すると簡単にテキスト中の URL をリンクへ変換する事ができたので紹介しよう。

http://soapbox.github.io/linkifyjs/

このプラグインは単体で使う事もできるし、jQuery のプラグインや React.js のコンポーネント形式で利用する事もできる。

Linkify のインストール方法
Linkify の使い方
1. React での使い方
2. Linkify のオプション
Linkify のプラグイン

Linkify のインストール方法

Linkify のインストールは環境や利用する機能によって異なる。例えば、React で利用する場合には以下のようにする。

まずは npm でインストール。

$ npm install linkifyjs

javascript には以下のように書く。

const Linkify = require('linkifyjs/react');

ES6 なら import かな。

import Linkify from 'linkifyjs/react';

もしくは単純に script タグで以下のファイルを読み込むだけでも良い。

<script src="linkify.js"></script>
<script src="linkify-react.js"></script>

linkifyjs/react, linkify-react の部分は利用する機能に合わせて変更しよう。

Linkify の使い方

単純に HTML 文字列中にあるリンクを変換する場合は linkify-html を読み込んで以下のような感じに使う。

var html = "hogehoge http://loumo.jp/ fugafuga";
console.log(linkifyHtml(html));
// 以下出力
"hogehoge <a href="http://loumo.jp/" class="linkified" target="_blank">http://loumo.jp/</a> fugafuga"

React での使い方

React.js で使う場合、linkify-react を読み込むと Linkify コンポーネントが利用できるようになるので、以下のように記述するだけ。

<Linkify options={options}>{text}</Linkify><

こうすれば text 内の URL がリンクに置き換わる。

Linkify のオプション

linkify のメソッドの第二引数にオプションを設定できる。デフォルトは以下のようになっている。

linkify.options.defaults = {
  attributes: null,
  className: 'linkified',
  defaultProtocol: 'http',
  events: null,
  format: function (value, type) {
    return value;
  },
  formatHref: function (href, type) {
    return href;
  },
  ignoreTags: [],
  nl2br: false,
  tagName: 'a',
  target: {
    url: '_blank'
  },
  validate: true
};

オプション名から大体どんなものか把握できると思う。

Linkify のプラグイン

プラグインを利用すれば @ から始まる mention や # から始まるハッシュタグなどを自動的にリンクにする事もできる。

プラグインを読み込む方法は以下のような感じ。

var linkify = require('linkifyjs')
require('linkifyjs/plugin/<name>')(linkify);
// ES6
import * as linkify from 'linkifyjs';;
import plugin from 'linkifyjs/plugin/<name>';
plugin(linkify);

もちろん script タグでもおｋ

<script src="linkify.js"></script>
<script src="linkify-plugin-<name>.js"></script>

それぞれプラグインを読み込むだけで自動的にリンクできるが、リンク先をより細かく指定するには options の FormatHref を指定すると良い。

例えば @ から始まるリンクは Twitter のユーザーページにジャンプさせたいという場合には以下のようにする。

var options = {
	target: {
		mention: '_blank'
	},
	formatHref: function (href, type) {
		if (type == 'mention') {
			href = 'https://twitter.com/' + href;
		}
		return href;
	}
}

便利。

開発したアプリなど一覧