[英]Making links in the text of a div clickable
I'm trying to make URLs in a text clickable using Nuxt/Vue.我正在尝试使用 Nuxt/Vue 使文本中的 URL 可点击。
The input text is: Learning Outside the Box - https://learningoutsidethebox.com
输入文本为:
Learning Outside the Box - https://learningoutsidethebox.com
I have a method that converts it to a link:我有一种方法可以将其转换为链接:
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>");
}
After that I get a result: Learning Outside the Box - <NuxtLink to='https://learningoutsidethebox.com' target='_blank'>https://learningoutsidethebox.com</NuxtLink>
.之后我得到了一个结果:
Learning Outside the Box - <NuxtLink to='https://learningoutsidethebox.com' target='_blank'>https://learningoutsidethebox.com</NuxtLink>
。 But it is still not clickable.但它仍然无法点击。
Changing to didn't solve the problem.更改为并没有解决问题。
Could you please clarify, what should I do to make this text become a working link?您能否澄清一下,我应该怎么做才能使本文成为有效链接?
You can try with a
tag and v-html
:您可以尝试
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.