【vue3】自動リンク表示するコンポーネントを作る

Tweet

Category JavaScript / Tagged vue 2021/09/16

問題

例えば以下のようなURLを含む文字列を、

ソフテルをGoogleで検索
https://www.google.com/search?q=%E3%82%BD%E3%83%95%E3%83%86%E3%83%AB
ソフテルをYahoo!で検索
https://search.yahoo.co.jp/search?p=%E3%82%BD%E3%83%95%E3%83%86%E3%83%AB

URLの部分をaタグでリンクにして表示してほしいです。

答え

vueのコンポーネントを作って対応する例。

const autolink = {
	props: ['text'],
	render: function () {
		var a = this.text.split(/(https?:\/\/[\w!?\/\+\-_~=;\.,*&@#$%\(\)\'\[\]]+)/i)
		var vnodes = a.map(function(x, i) {
			if (i % 2) {
				return Vue.h('a', {href:x}, x)
			} else {
				return x
			}
		}, this);
		return Vue.h('span', vnodes)
	}
}

自動リンク表示したい文字列が変数 x に入っているとしたら、

以下のように使うと、

<autolink :text="x"></autolink>

以下のように表示される。

メモ

splitで1個だけキャプチャする正規表現を使うと、[分割された部分, キャプチャされた部分, 分割された部分, キャプチャされた部分 …… 分割された部分, キャプチャされた部分, 分割された部分] の形の配列がもらえるので、偶数個目はテキスト、奇数個目はリンクにしている。