I am trying to use the Filter feature in Vue.js to add html tags inside a String, the documents suggests this should be somehow feasible but I'm getting nowhere. The point is the data should just a String that's brought into the html and before it's mounted the filter should search the data for key words (e.g. 'See REFERENCE') and the REFERENCE word should be turned into an anchor link.

E.g.

 <p>{{String | filterFunction}}</p>    

Instead of piping out say:

 <p>The text string with a link</p>  

It should pipe out the string but with a node insert.

 <p>The text string with a <a href="someLink">link</a></p>  

The Vue documentation suggests javascript ponent assemblage is possible but so far the testing has gone poorly.

I am trying to use the Filter feature in Vue.js to add html tags inside a String, the documents suggests this should be somehow feasible but I'm getting nowhere. The point is the data should just a String that's brought into the html and before it's mounted the filter should search the data for key words (e.g. 'See REFERENCE') and the REFERENCE word should be turned into an anchor link.

E.g.

 <p>{{String | filterFunction}}</p>    

Instead of piping out say:

 <p>The text string with a link</p>  

It should pipe out the string but with a node insert.

 <p>The text string with a <a href="someLink">link</a></p>  

The Vue documentation suggests javascript ponent assemblage is possible but so far the testing has gone poorly.

• javascript
• html
• filter
• vue.js

• 1 Possible duplicate of How to make links clickable in a chat, while this doesn't use a filter, it shows how to make links clickable in the way you seem to want it – Ferrybig Commented Apr 16, 2018 at 8:15
• 1 share live demo of your code ? – Niklesh Raut Commented Apr 16, 2018 at 8:15
• Does the String in {{ String | filterFunction }} consist of an object or just a string? – Ru Chern Chong Commented Apr 16, 2018 at 8:16
• Why not use the v-html directive? vuejs/v2/guide/syntax.html#Raw-HTML – Mulhoon Commented Apr 16, 2018 at 9:58
• I was hoping for a filter method for this but I guess that's not appropriate pared to the render in a functional Vue ponent- thanks. – Varanus Commented Apr 16, 2018 at 11:06

1 Answer 1

Filters only replace as text. Since you are trying to transform plain text in HTML, you'll have to resort to v-html or equivalent. Check your options in the demo below.

function _linkify(text) {
  return text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
}

Vue.filter('linkify', function (value) {
    return _linkify(value)
})

Vue.ponent('linkify', {
  props: ['msg'],
  template: '<span v-html="linkifiedMsg"></span>',
  puted: {
  	linkifiedMsg() { return _linkify(this.msg); }
  }
});

Vue.ponent('linkify-slot', {
  render: function (h) {
    let html = _linkify(this.$slots.default[0].text);
    return h('span',{domProps:{"innerHTML": html}})
  }
});

new Vue({
  el: '#app',
  data: {
    message: 'The text string with a http://example.'
  },
  methods: {
    linkifyMethod(text) {
      return _linkify(text); // simply delegating to the global function
    }
  }
})

<script src="https://unpkg./vue"></script>

<div id="app">
  <p>Doesn't work: {{ message | linkify }}</p>
  
  <p v-html="$options.filters.linkify(message)"></p>
  
  <p :inner-html.prop="message | linkify"></p>
  
  <p v-html="linkifyMethod(message)"></p>
  
  <p><linkify :msg="message"></linkify></p>
  
  <p><linkify-slot>{{ message }}</linkify-slot></p>
</div>