How to replace usernames with layout when rendering array elements in Vue?

Question

JavaScript

Hello, how can I render a list of comments only if it contains, for example, users with the @ symbol so that they can be rendered (I want to highlight) in the layout instead of plain text?
For example, if regular comments are rendered as , and if there are users, then they should be rendered as:<div> lorem ipsum </div>,

<div> lorem ipsum  <span>@name</span> set nomini </div>

? Similar functionality is on github, for example, in discussions.
Let's say my code in view looks like this:

<div
      v-for="item in comments"
      :key="item.id"
      class="comment-item"
   >
     ...
    <span class="comment-text"> {{ item.text }} </span>
  </div>

Answer 1

.highlight {
  color: white;
  background: red;
}

methods: {
  highlightNames: str => str.replace(/(?<=^|\s)@\S+/g, '<span class="highlight">$&</span>'),
},

<div v-html="highlightNames(item.text)"></div>

Answer 2

Answer 3

Not that it's a program, on OS X you can take several types of screenshots out of the box.

Command + Shift + 3: весь экран в файл на рабочем столе
Command + Shift + 4: выделенная область в файл
Command + Shift + 4 + пробел: окно программы в файл

Answer 4

Alt + PrtScr - делает принтскин активного окна

Answer 5

Вопрос такой: это какая-то особая программа на OS X для снятия скриншотов,

именно.
В OS X, такой скриншот делается путем нажатия
cmd+shift+4 и затем нажать пробел.

Answer 6

Monosnap - OS X , screencloud, Joxi - Ubuntu
В Screencloud нет редактора, Joxi нет возможности загружать на фтп.
Моноснап идеальный вариант, но его нет под линь.