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

news/2024/12/23 5:53:25/

前言:

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

要求:

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


http://www.ppmy.cn/news/1062223.html

相关文章

vue 简单实验 自定义组件 局部注册

1.概要 2.代码 <html> </html> <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <body><div id"counter"><component-a></component-a></div> </body&g…

SpringBoot的日志级别你了解吗(自定义打印日志)?

1 SpringBoot日志介绍 ⽇志是程序的重要组成部分&#xff0c;想象⼀下&#xff0c;如果程序报错了&#xff0c;不让你打开控制台看⽇志&#xff0c;那么你能找到报错的原因吗&#xff1f; 如果是简单的错误有可能找出来&#xff0c;但是对于开发中的大多数错误还是需要我们打开…

「快学Docker」Docker容器安全性探析

「快学Docker」Docker容器安全性探析 引言容器安全性威胁Docker容器安全性目录容器镜像安全性主机与容器隔离访问控制运行时监控与防御网络安全性Docker容器安全性最佳实践 总结 引言 在当今快速发展的软件开发和部署领域&#xff0c;容器化技术已经成为一种不可或缺的工具。然…

Ribbon:listOfServers ,${variableName:defaultValue}

解释&#xff1a; 配置了address的地址,请求会走address&#xff0c;也就是http://127.0.0.1:8081&#xff0c;通常用户与别的后端服务进行联调设置为其本地服务的ip。 如果address的地址被注释掉&#xff0c;如下面所示&#xff0c;类似这样的占位符${variableName:defaultVa…

redis7高级篇3 数据量亿级别的统计分析(hyperloglog,bitmap,geo)

一 亿级别统计分类 1.1 统计分类 1.聚合统计&#xff1a;统计多个集合聚合的结果&#xff0c;也就是多个集合之间交并差的统计。 2.排序统计&#xff1a;在需要展示最新列表&#xff0c;排行榜等场景时&#xff0c;如果数据更新频繁或者需要分页时&#xff0c;建议使用zset12…

【鞋服零售ERP】应收单设计思路

引言 应收单是销售链路上最核心的单据&#xff0c;也是财务价值确认的关键单据&#xff0c;起着向上承接出库和订单&#xff0c;向下联接收款等业务&#xff0c;因此&#xff0c;无论是数据流&#xff0c;还是信息流、价值流都离不开应收单的承接。如此重要的单据&#xff0c;那…

Android JNI修改ByteArray参数并返回

在JNI中修改ByteArray类型的参数并返回&#xff1a; 添加native方法 class TestLib {companion object{init {System.loadLibrary("jnitest")}}external fun modifyByteArray(data:ByteArray):ByteArray } var data byteArrayOf(1,2,3,4,5,6) Log.i(TAG,"in …

护目镜佩戴检测识别算法

护目镜佩戴检测识别算法通过opencvpython网络深度学习模型&#xff0c;护目镜佩戴检测识别算法实时监测工人的护目镜佩戴情况&#xff0c;发现未佩戴或错误佩戴的情况&#xff0c;及时提醒调整。与C / C等语言相比&#xff0c;Python速度较慢。也就是说&#xff0c;Python可以使…