Vue テキストの中身のURL 遷移させたい

Question

やりたいこと
Vue.jsを使っています
テキストの中身にURLが入っていそれをクリックしたらそのULRまで遷移できるようにしたいです。
textの中身は以下のようにURLと文字列が混ざっています

// textの中身
このサイト面白いよーーー
ｈttps:// ufdgwufkdgksfdkshkjd

<template>
  <p class="relation">
    {{ text }}
  </p>
</template>

//追記

<template>
  <p class="label">{{ text }}</p>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
export default class Text extends Vue {
  @Prop({ type: String, required: true }) text: string
}
GetUrlInText() {
    const matches = this.text.match(/https?://\S+/gi)
    if(matches != null) {
        return matches
    } else {
        return []
    }
}

Answer 1

これ難しいですよね。
Vueのテンプレートだと普通はできなくて、 v-html を使った場合は XSS になりえるので、サニタイズなりしないといけなくなってきます。

あまり簡潔には書けないのですが、VueでもJSXを使えるのでJSXを使う方法があります。
VueでJSXを使ってテキスト中のURLをaタグにする - Qiita

上記記事などを参考に、私は以前以下のように書いていました。

UrlToLink.vue

<script>
import * as urlRegex from "urlregex";

export default {
  methods: {
    parseSlot() {
      if (
        !this.$slots ||
        !this.$slots.default ||
        !this.$slots.default[0] ||
        !this.$slots.default[0].text
      ) {
        return [];
      }
      let processText = this.$slots.default[0].text;
      const matchedURL = processText.match(urlRegex({ exact: false }));
      if (matchedURL) {
        const set = new Set(matchedURL);
        set.forEach(url => {
          processText = processText.split(url).join(`\t\v${url}\v\t`);
        });
      }
      return processText.split("\t");
    }
  },
  render(h) {
    return (
      <div>
        {this.parseSlot().map(text => {
          const matched = text.match(/^\v(.+)\v$/);
          if (matched) {
            return (
              <a href={matched[1]} rel="ugc noreferrer noopener" target="_blank">
                {matched[1]}
              </a>
            );
          }
          return text;
        })}
      </div>
    );
  }
};
</script>

aタグの属性などは適宜書き換えてください。
URLの正規表現はこちらのライブラリを使用しました urlregex

使う際は以下のようにします。

<template>
  <p class="relation">
    <UrlToLink>{{ text }}</UrlToLink>
  </p>
</template>

<script>
import UrlToLink from "@/components/UrlToLink.vue";

export default {
  components: {
    UrlToLink
  },
  // ...
};
</script>

Comments

[cuku]

ありがとうございます！！
なかなか手間がかかるんです！！！！
調べたところurlRegexというライブラリはあんまり使われていなさそうですね。少し検討してみます！！

https://noknow.info/it/javascript/get_url_from_text_string?lang=ja
調べたところjsでURLを取得する関数があったのですがpタグにこの関数を埋め込んでURLだけ<a>タグにするとかはできませんか？

[aaharu]

ライブラリは別に何でもいいです。
https://www.npmjs.com/package/url-regex
これでもいいですが（urlRegexのもとはこれです）、これだとIE11で動かすためには工夫がいります。
ライブラリも結局正規表現あててるだけなので、その関数の正規表現を使いたいのであればそのように書けばできるのではないでしょうか。

[cuku]

ありがとうございます。
そのようにとはどう書けばいいのでしょうか？

[cuku]

追記しました

[aaharu]

processText.match(urlRegex({ exact: false }));
を
processText.match(/https?://\S+/ig);
にするとか。

関数を埋め込んで～ってのはよくわかんなかったので考えてません。

[cuku]

埋め込むという言葉が悪かっったです。すいません。
GetUrlInText() {
const matches = this.text.match(/https?://\S+/gi)
if(matches != null) {
return matches
} else {
return []
}
上記の関数を使いたいのですがどうやったら使えるのでしょうか？

[aaharu]

その関数をどうしても使いたいなら text の文字列を書き換えて、表示する際は v-html を使うしかないのかなと思います。

[cuku]

すいません。理解しました！！
ありがとうございます

[cuku]

parseSlot() {
if (
!this.$slots ||
!this.$slots.default ||
!this.$slots.default[0] ||
!this.$slots.default[0].text
) {
return []
}
の処理は何をしている処理なのでしょうか？

[aaharu]

<UrlToLink>hoge</UrlToLink>
からhogeの部分を取り出す処理という感じでしょうか。

Vueのドキュメントの以下のあたりです。
https://jp.vuejs.org/v2/guide/render-function.html
https://jp.vuejs.org/v2/api/#vm-slots