Vue.js 表示文字列にURLが含まれていたときにリンク化する

目的

• Vue.jsにおいて表示する文字列の中にURLが含まれていた場合リンク化して表示する方法を簡単にまとめる

詳細

1. 下記のPタグの中に変数textの内容を格納する。

   vue.js

   <p v-html="text"></p>
   

2. 変数testにURLが含まれている場合、リンクとして表示したい。下記のようなメソッドを定義する。

   vue.js

   /**
    * @param {String} text
    */
   autoLink(text) {
       return _.isString(text) ? text.replace(/(https?:\/\/[^\s]*)/g, "<a href='$1'>$1</a>") : '';
   },
   

3. 下記のようにPタグ部分で定義したメソッドを呼ぶ。

   vue.js

   <p v-html="autoLink(text)"></p>
   

メソッド部分の簡単な解説

• 下記にメソッドの処理部分を記載する。

  vue.js

  return _.isString(text) ? text.replace(/(https?:\/\/[^\s]*)/g, "<a href='$1'>$1</a>") : '';
  

• isString(text)? : ;

  • 参考演算子を用いて引数に文字列が格納されているかチェックしている。
  • isString(引数文字列)? isStringが真のときの処理 : isStringが偽のときの処理のようになる。

• text.replace(/(https?:\/\/[^\s]*)/g, "<a href='$1'>$1</a>"

  • replaceメソッドを使用して文字列の置換を行っている。
  • replace(検索条件の文字列, 置換後の文字列)として指定している。

• /(https?:\/\/[^\s]*)/g（検索条件文字列の正規表現）

  • 正規表現部分を細かくまとめてみる。
    • 最初と最後の/はデリミタ（区切り文字）といって「この部分が正規表現ですよ」ということを表している。
    • 最後の/のあとのgは直前の正規表現を繰り返し検索する修飾子である。
    • デリミタの最初から最後部分までの( )は正規表現部分が一つの文字列であることを表している。
    • 「https」の後ろの?は直前の文字があるかないかでヒットとなる。なのでhttpでもhttpsでもヒットするように正規表現を用いて記述している。
    • :\/\/は「://」という文字列をエスケープを使用して記載しているだけである。
    • [ ]は内部に記載された内容いずれかにヒットする。
    • ^は後述する内容以外にヒットする。
    • \sは空白文字、半角スペース、タブ、改行文字のいずれかにヒットする。
    • *は直前文字0回以上繰り返すときにヒットする。（URLのあとに半角スペース、全角スペース、改行が入るところで区切る）

  • 上記に記載した内容を日本語にしてまとめてみる。

    /(httpかhttpsにマッチ://空白文字、半角スペース、タブ、改行文字以外のいずれかにマッチする。直前の文字列が0回以上マッチする。)/
    

• <a href='$1'>$1</a>

  • 置換後の文字列であり$1にはマッチした文字列が格納されている。