使 div 文本中的鏈接可點擊

Question

我正在嘗試使用 Nuxt/Vue 使文本中的 URL 可點擊。

輸入文本為： Learning Outside the Box - https://learningoutsidethebox.com

我有一種方法可以將其轉換為鏈接：

setLinks(text) {
            var Rexp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
              
            return text.replace(Rexp, "<NuxtLink to='$1' target='_blank'>$1</NuxtLink>");
}

之后我得到了一個結果： Learning Outside the Box - <NuxtLink to='https://learningoutsidethebox.com' target='_blank'>https://learningoutsidethebox.com</NuxtLink> 。 但它仍然無法點擊。

更改為並沒有解決問題。

您能否澄清一下，我應該怎么做才能使本文成為有效鏈接？

Answer 1

您可以嘗試a標簽和v-html ：

 new Vue({ el: '#demo', data() { return { url: 'Learning Outside the Box - https://learningoutsidethebox.com' } }, computed: { getLink() { return this.setLinks(this.url) } }, methods: { setLinks(text) { const Rexp = /(\\b(https?|ftp|file):\\/\\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\\/=~_|!:,.;]*)[-A-Z0-9+&@#\\/%=~_|])/ig; return text.replace(Rexp, "<a href='$1' target='_blank'>$1</a>"); } } }) Vue.config.productionTip = false Vue.config.devtools = false

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-html="getLink"></div> </div>