当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/146319.html

相关文章:

  • 「MySQL-00」MySQL在Linux上的安装、登录与删除
  • 8月29-31日上课内容 第五章
  • 数据库导出工具
  • ChatGPT 制作可视化柱形图突出显示第1名与最后1名
  • 前端学习记录~2023.8.10~JavaScript重难点实例精讲~第6章 Ajax
  • 2023年Java核心技术第九篇(篇篇万字精讲)
  • C#上位机中的单例应用思考
  • Python分享之redis
  • Linux常用命令——dd命令
  • DETR-《End-to-End Object Detection with Transformers》论文精读笔记
  • 网络流量监控-sniffnet
  • 验证go循环删除slice,map的操作和map delete操作不会释放底层内存的问题
  • C++二级题2
  • DataWhale 机器学习夏令营第三期——任务二:可视化分析
  • ubuntu 上安装flutter dart android studio
  • 【Golang】go交叉编译
  • 【人工智能】—_贝叶斯网络、概率图模型、全局语义、因果链、朴素贝叶斯模型、枚举推理、变量消元
  • 学习笔记:ROS使用经验( 查看rostopic的信息)
  • 数据库——redis内存淘汰,持久化机制
  • 亚马逊云科技 云技能孵化营 我也说ai
  • 『PyQt5-基础篇』| 04 Qt Designer的初步快速了解
  • SpringCloud学习笔记(十一)_Hystrix仪表盘
  • # ruby安装设置笔记
  • 关于对文件路径权限判断的记录
  • git 基础
  • C语言网络编程实现广播
  • js对url进行编码解码(三种方式)
  • React面向组件编程
  • Linux 多线程同步机制(上)
  • C++学习vector