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

シェアする

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

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

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

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

Sponsored Links

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 タグでもおk

<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;
	}
}

便利。

Sponsored Link

シェアする

フォローする