Как заменить имена пользователей на вёрстку при рендеринге элементов массива?

Question

[Роман]

Как можно отрендерить список комментариев, только если в нём есть например пользователи с символом @ то чтобы их можно было отрендерить (хочу подсветить) в вёрстке вместо обычного текста?
Например, если обычные комментарии рендерятся как <div> lorem ipsum </div>, а если есть имя пользователя, то чтобы рендерились как

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

Похожий функционал есть на гитхабе, например в обсуждениях.
Допустим, мой код в вью выглядит так:

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

Answer 1

[0xD34F]

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

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

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

Comments

[Роман]

Спасибо! То что надо :)

Answer 2

[Aetae]

<div
  v-for="item in splitComments"
  :key="item.id"
  class="comment-item"
>
  ...
  <span 
    class="comment-text" 
    v-for="(str, i) in item.textList" 
    :class="{highlight: i%2}"
  > 
      {{ str }} 
  </span>
</div>

computed: {
  splitComments() {
    return this.comments.map(item => ({
      ...item,
      textList: item.text.split(/(@\S+)/)
    }))
  }
}

Comments

[Роман]

спасибо, тоже интересное решение)

[Aetae]

Роман, ток ты учитывай, что решение 0xD34F фигачит всё как html. Соответственно, если там попадутся теги, то будет грустно.

[Роман]

Aetae, хорошо, но как мне кажется https решает проблему xss? Или нет?

[Aetae]

Роман, https никак не решает проблему xss. Вообще разные вещи.

Да даж еслиб проблем с xss не было, что-нить типа следовательно: a<c случайно в коде, и тебе развалило страницу.)

[Роман]

Aetae, спасибо за информацию), буду использовать ваше решение :D

[Роман]

Aetae, привет, можете пожалуйста обьяснить как работает новый массив с пропом textList и почему там индекс делиться на 2 с остатком? Как я могу там добавить ещё одну проверку и проверять есть ли в массиве тегнутых юзеров(например

const arr = [{ value: "John Doe" }, { value: "Peter Griffin" } ]

) имеется данный textList? Чтобы я добавлял класс highlight только если textList есть в массиве arr?

[Aetae]

Роман, как то так, не проверял.

<span 
    class="comment-text" 
    v-for="{str, cls} in item.textList" 
    :class="cls"
  > 
      {{ str }} 
  </span>

computed: {
  userSet() {
    return new Set(this.arr.map(({value}) => value));
  },
  splitComments() {
    return this.comments.map(item => ({
      ...item,
      textList: item.text.split(/(@\S+)/).map((str, i) => i%2 ? {
        str,
        cls: this.userSet.has(str.slice(1)) ? 'highlight-user' : 'highlight-some'
      } : {
        str
      })
    }))
  }
}

[Роман]

Aetae, спасибо! Быстро вы :). Можно ещё спросить что делает index % 2? Вроде бы обычная математическая операция но как она это фильтрует по индексах?

[Aetae]

Роман, split по regexp когда в regexp есть скобочки (/(@\S+)/) сохраняет в результирующем массиве значения из скобочек, т.е. строка "a @b@c d" превращается в массив ["a ", "@b", "", "@c", " d"], соответственно каждое второе значение в таком массиве - id-шник. i % 2 - остаток от деления i на 2, т.е. при последовательном наборе чисел - это просто чередование 0 1 0 1 ..., в условных выражениях же 0 приводится к false, не 0 к true.

[Роман]

Aetae, спасибо за обьяснение)