サイトアイコン Lonely Mobiler

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

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

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

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

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

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

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
モバイルバージョンを終了