使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>。但它仍然无法点击。

更改为<a>并没有解决问题。

你能澄清一下吗，我应该怎么做才能让这篇文章成为一个工作链接？

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>