Vue.js auto-link directive for Tweet

autolink.vue

<template>
  <div v-auto-link>
    {{item.tweet}}
  </div>
</template>

<script>
export default {
  data: () => ({
    item: {
      tweet: '@twitter Hello, World! https://twitter.com #twitter'
    }
  }),
  directives: {
    'auto-link': {
      inserted(el) {
        // URL
        el.innerHTML = el.innerHTML.replace(
          /(https?:\/\/[a-zA-Z0-9\-_.:@!~*'(¥);/?&=+$,%#]+)/g,
          '<a href="$1" target="_blank">$1</a>'
        )

        // #hashtags or @mentions
        el.innerHTML = el.innerHTML.replace(/([@#])([\w]+)/gi, (_, p1, p2) => {
          const text = p1 + p2
          const route = p1 === '@' ? p2 : `hashtag/${p2}`
          return `<a href="https://twitter.com/${route}" target="_blank">${text}</a>`
        })
      }
    }
  }
}
</script>