Render html from string vuejs

Question

I'm struggling with a problem, I want to create a chat app, and the users to be able to tag each other, by using @. For example, user1 type in chat input 'hi @user2', the output should look the same, but '@user2' be a link instead of simple text, I figured how to do that, but the problem is that, if user input for example html tags, it's rendered as html.

HTML:

<span v-html="chatFormat(chat.text)"></span>

VUE:

chatFormat(text) {
  var words = text.split(" ");
  var newStr = '';
  words.forEach(function (word) {
  if (word.includes('@') >= 1) {
    if (word.charAt(0) == '@') {
      word = '{{ <a href="/user" class="font-weight-bold" style="text-decoration:none">' + word + '</a> }}';
    }
  }
  newStr = newStr + ' ' + word;
  });
  return newStr;
}

Does this answer your question? [Rendering html tags in Vue.js](https://stackoverflow.com/questions/51430422/rendering-html-tags-in-vue-js) — MAMY Sébastien, Oct 16 '20 at 07:25

Jan Madeyski · Accepted Answer · 2020-10-16T07:24:25.663

Well, using v-html directive renders value as HTML - it's not parsed for variables. You could change Your code and get rid of {{}} so only link would appear in the output.

word = '<a href="/user" class="font-weight-bold" style="text-decoration:none">' + word + '</a>';

But, be aware that using v-html to display user-input is a risky thing. User input should be escaped first to get rid of potential harmful code. (You can check Sanitizing user input before adding it to the DOM in Javascript as Michal Levý suggested)

I would also suggest using arrow functions and template literals

chatFormat(text) {
  // using let instead of var for declaring variables in the local scope
  let safeText= this.sanitizeHTML(text), // for security reasons
      words = safeText.split(" "),
      newStr = '';

  words.forEach(word => { // arrow function
    if (word.includes('@') >= 1) {
      if (word.charAt(0) == '@') {
        word = `<a href="/user" class="font-weight-bold" style="text-decoration:none">${word}</a>`; // template literal
      }
    }
    newStr = newStr + ' ' + word;
  });

  return newStr;
},

// This should be a secure sanitization method from some library
sanitizeHTML(string) {
  return string
},

score 0 · Answer 2 · edited Jul 15 '22 at 00:55

0

A subject that has been discussed an number of times.

in Vuejs.org: https://v2.vuejs.org/v2/api/#v-html

in stackoverflow.com: (one of many) Rendering html tags in Vue.js

edited Jul 15 '22 at 00:55

tony19

125,647
18
229
307

answered Oct 16 '20 at 07:24

MAMY Sébastien

103
10

Render html from string vuejs

2 Answers2