Vue は、文字列内のすべての @ コンテンツをラベル付きのものに置き換えることを実装します。

序文:

        現在、入力ボックスで @ と名前を強調表示する必要があります。

必要とする:

1. タグ付きでレンダリングするには、v-html を使用する必要があります。

2. 文字列内の @ をすべて見つけて置換します。置換されたものをフィルタリングして除外しないと、無限ループになるので注意してください。

実装:

// 消息展示中处理@样式
const textPointTo = (content:any) => {
  let index = value.indexOf('@');
  while (index !== -1) {
    const endIndex = value.indexOf(' ', index);
    const replaceStr = value.substring(index, endIndex !== -1 ? endIndex : undefined);
    value = value.replace(replaceStr, `<span class='replyPointTo'>${replaceStr.split('@')[1]}</span>&nbsp;`);
    index = value.indexOf('@', index + 1);
 }
 return value.replace(/PointTo'>/g, "PointTo'>@")
};

おすすめ

転載: blog.csdn.net/weixin_44727080/article/details/132489250