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.mzph.cn/news/59793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面向对象的设计原则

设计模式 Python 设计模式&#xff1a;对软件设计中普遍存在&#xff08;反复出现&#xff09;的各种问题&#xff0c;所提出的解决方案。每一个设计模式系统地命名、解释和评价了面向对象系统中一个重要的和重复出现的设计 面向对象 三大特性&#xff1a;封装、继承、多态 …

多线程应用——单例模式

单例模式 文章目录 单例模式一.什么是单例模式二.如何实现1.口头实现2.利用语法特性 三.实现方式&#xff08;饿汉式懒汉式&#xff09;1.饿汉式2.懒汉式3.线程安全的单例模式4.双重检查锁5.禁止指令重排序 一.什么是单例模式 单例模式&#xff08;Singleton Pattern&#xff…

基于天鹰算法优化的BP神经网络(预测应用) - 附代码

基于天鹰算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于天鹰算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.天鹰优化BP神经网络2.1 BP神经网络参数设置2.2 天鹰算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…

[Android]JNI的基础知识

目录 1.什么是JNI 2.配置JNI开发环境NDK 3.创建Native C类型的项目 4. 了解CMakeLists.txt 文件 5.了解native-lib.cpp 文件 6.在 Android 的 MainActivity 中调用 native-lib.cpp 中实现的本地方法 1.什么是JNI JNI&#xff08;Java Native Interface&#xff09;是一…

消息中间件 介绍

MQ简介 MQ,Message queue,消息队列&#xff0c;就是指保存消息的一个容器。具体的定义这里就不类似于数据库、缓存等&#xff0c;用来保存数据的。当然&#xff0c;与数据库、缓存等产品比较&#xff0c;也有自己一些特点&#xff0c;具体的特点后文会做详细的介绍。 现在常用…

pandas添加新行

import pandas as pd 创建示例数据 data = {‘A’: [1, 2, 3], ‘B’: [4, 5, 6]} df = pd.DataFrame(data) 创建新行 new_row1 = {‘A’: 7, ‘B’: 8} 使用 append() 方法追加新行 df = df.append(new_row, ignore_index=True) print(df) 输出: A B 0 1 4 1 2 5 2 3…

leetcode做题笔记109. 有序链表转换二叉搜索树

给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为高度平衡的二叉搜索树。 本题中&#xff0c;一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差不超过 1。 思路一&#xff1a;递归双指针 struct ListNode* getMedi…

【Java Easypoi Apache poi】 Word导入与导出

引入依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId> </dependency> <!-- 下面的版本需要对应上面依赖中的版本 否则可能会起冲突 --> <!-- 下面的依赖主要是为了使用A…

USB通信学习-基础概念理解

USB通信 1、USB是轮询总线&#xff0c;USB主机发起所有数据交换。数据往返于USB设备中的端点。USB主机输出使用OUT端点&#xff0c;USB主机输入使用IN端点。USB主机中没有端点&#xff0c;数据存储于缓冲区中。从主机的FIFO到设备的端点&#xff0c;中间是Pipes。全速USB传输中…

解决.gitignore无效的问题

git 总提交乱七八糟的文件&#xff0c;改了gitignore无效&#xff0c;是git 缓存问题 清空git缓存 git rm -r --cached . git add . git commit -m ‘update .gitignore’ 读了下git文档&#xff0c;才发现&#xff0c;这些东西其实很简单&#xff0c;很容易理解。cached其实…

java八股文面试[JVM]——JVM内存结构2

知识来源&#xff1a; 【2023年面试】JVM内存模型如何分配的_哔哩哔哩_bilibili

Python文本终端GUI框架详解

今天笔者带大家&#xff0c;梳理几个常见的基于文本终端的 UI 框架&#xff0c;一睹为快&#xff01; Curses 首先出场的是 Curses。 Curses 是一个能提供基于文本终端窗口功能的动态库&#xff0c;它可以: 使用整个屏幕 创建和管理一个窗口 使用 8 种不同的彩色 为程序提供…

计算机竞赛 基于Django与深度学习的股票预测系统

文章目录 0 前言1 课题背景2 实现效果3 Django框架4 数据整理5 模型准备和训练6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于Django与深度学习的股票预测系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff…

TypeScript配置-- 1. 新手处理TS文件红色波浪线的几种方式

Typescript 规范化了JS的项目开发&#xff0c;但是对一些项目的一些新手来说&#xff0c;确实是不怎么优好&#xff0c;譬如我&#xff1a;将我之前珍藏的封装JS代码&#xff0c;拿进了配置了tsconfig.json的vue3项目&#xff0c;在vscode下&#xff0c;出现了满屏的红色 &…

HTML总结2 [转]

以下转载和参考自&#xff1a;HTML 表单。 1、表格 可以通过 CSS 设置表格的样式&#xff1a; 如下为将上面table.lamp th,td样式中的padding注释掉&#xff0c;开启table.lamp中的padding的效果&#xff1a; 2、列表 3、导航栏 导航栏使用<ul>列表实现&#xff0c;…

iptables教程

iptables netfilter/iptables&#xff08;简称iptables&#xff09;是与2.4.x和2.6.x系列版本Linux内核集成的IP信息包过滤系统。 Iptables Tutorial 1、表和链 1.1、表 iptables会根据不同的数据包处理功能使用不同的规则表。它包括如下五个表&#xff1a;filter、nat和m…

table,设置 数据相同时, 合并列

<el-table :data"tableData" :span-method"objectSpanMethod" border style"width: 100%" show-summary><el-table-column type"index" label"序号" width"100" /><el-table-column prop"dat…

C语言练习题解析:挑战与突破,开启编程新篇章!(2)

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言刷题专栏&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…

加密的PDF文件,如何解密?

PDF文件带有打开密码、限制编辑&#xff0c;这两种密码设置了之后如何解密&#xff1f; 不管是打开密码或者是限制编辑&#xff0c;在知道密码的情况下&#xff0c;解密PDF密码&#xff0c;我们只需要在PDF编辑器中打开文件 – 属性 – 安全&#xff0c;将权限状态修改为无保护…

JDBC连接

JDBC连接 加载JDBC驱动程序打开JDBC连接 打开带有URL的连接使用URL、用户和密码打开连接使用URL和属性打开连接 关闭JDBC连接 通过Try With Resources关闭连接 setAutoCommit()commit()rollback()createStatement()prepareStatement()getMetaData() JDBC连接类java.sql.Conne…