vue实现把字符串中的所有@内容，替换成带标签的

最新推荐文章于 2024-04-23 21:34:27 发布

妍崽崽@

最新推荐文章于 2024-04-23 21:34:27 发布

阅读量636

点赞数

分类专栏： vue js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44727080/article/details/132489250

版权

vue 同时被 2 个专栏收录

137 篇文章 9 订阅

订阅专栏

22 篇文章 1 订阅

订阅专栏

文章描述了一个需求，如何在使用v-html渲染文本时，高亮显示输入框中的@符号，并避免因多次替换导致的无限循环问题。作者提供了一段JavaScript代码来实现这个功能，通过查找和替换@符号，同时确保不会重复替换已处理的部分。

摘要由CSDN通过智能技术生成

前言：

目前有个需求是，要把输入框里面的@还有姓名高亮。

要求：

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'>@")
};