Display links as <a> tags but don't allow other tags?

Question

So, I am using Vue.js and want to display some text that contains links. The text is input by the users.

Example:

This is a site www.example.com which is better than www.oldexample.com

I want it to appear as:

This is a site www.example.com which is better than www.oldexample.com

So, I want the links to be hyperlinked. The problem is that this is user input, so it has to be XSS protected. I currently display it as text, so I can't use HTML tags in it. If I were to use v-html and wrap all links in a tags it would be too unsafe as users could enter any HTML.

I was thinking about splitting the string by URLs, and wrapping every part that is not a link in a span tag and every link in a a tag. But this seems a bit too much processing to be done just to hyperlink the URLs.

Is there a simpler method for this, that is XSS safe (users can't enter other tags except of <a>) ?

Answer 1

Use vue-linkify it create a v-linkified directive that do exactly what you need

new Vue({
  el:'#app',
  data:{
    input:'Hello from vuejs.org'
  }
})

<div id="app">
  <input v-model="input"/>

  <div v-html="input" v-linkified>
  </div>

</div>