Extract links from text in Vue and add them as anchors (safely)

linkify.vue

<template>
<div>
  <template v-for="(item, i) of text">
    <a v-if="item.link" :key="i" :href="item.text">
      {{ item.text }}
    </a>
    <template v-else>
      {{ item.text }}
    </template>
  </template>
</div>
</template>

<script>
export default {
  data: () => ({
    message: 'bananana http://codepen.io and http://google.com nice one bro http://cartera.com.br'
  }),
  
  computed: {
    text () {
      const HTTP = /https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]/gim
      
      const splitted = this.message.split(HTTP)     
      const urls = Array.from(this.message.matchAll(HTTP))
        .map(i => i[0])
      
      let res = []
      for (let i = 0; i < splitted.length; i++) {
        res.push({ text: splitted[i], link: false })
        res.push({ text: urls[i], link: true })
      }
      
      res.pop()
      return res
    }
  }
}
</script>