使 div 文本中的链接可点击

Question

我正在尝试使用 Nuxt/Vue 使文本中的 URL 可点击。

输入的文字是： Learning Outside the Box - https://learningoutsidethebox.com

我有一种方法可以将其转换为 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='' target='_blank'></NuxtLink>");
}

之后我得到一个结果：Learning Outside the Box - <NuxtLink to='https://learningoutsidethebox.com' target='_blank'>https://learningoutsidethebox.com</NuxtLink>。但是还是点不了

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

能否请您澄清一下，我应该怎么做才能使这段文字成为有效的link？

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='' target='_blank'></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>

使 div 文本中的链接可点击

Making links in the text of a div clickable

javascript

hyperlink

vue.js

nuxt.js