当前位置: 首页 > 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'>@")
};

相关文章:

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

前言&#xff1a; 目前有个需求是&#xff0c;要把输入框里面的还有姓名高亮。 要求&#xff1a; 1、必须用 v-html ,带标签的给他渲染 2、把字符串中的全部查找出来&#xff0c;替换掉&#xff0c;注意要过滤已经替换好的&#xff0c;不然就是无限循环了 实现方法&#xff1a…...

「MySQL-00」MySQL在Linux上的安装、登录与删除

目录 一、安装MySQL 0. 安装前请先执行一遍删除操作&#xff0c;把预装或残留的MySQL删除掉 1. 安装yum源 &#xff08;解决了在哪里找MySQL的问题&#xff09; 2. 安装哪个版本的MySQL 二、启动和登录MySQL 三、删除MySQL / MariaDB 安装与卸载前&#xff0c;建议先将用户切换…...

8月29-31日上课内容 第五章

第一章...

数据库导出工具

之前根据数据库升级需求&#xff0c;需要导出旧版本数据&#xff08;sqlserver 6.5&#xff09;&#xff0c;利用c# winfrom写了一个小工具&#xff0c;导出数据。 →→→→→多了不说&#xff0c;少了不唠。进入正题→→→→ 连接数据库&#xff1a;输入数据库信息 连接成功…...

ChatGPT 制作可视化柱形图突出显示第1名与最后1名

对比分析柱形图的用法。在图表中显示最大值与最小值。 像这样的动态图表的展示只需要给ChatGPT,AIGC,OpenAI 发送一个指令就可以了, 人工智能会快速的写出HTML与JS代码来实现。 请使用HTML,JS,Echarts完成一个对比分析柱形图,在图表中突出显示第1名和最后1名用单独一种不…...

前端学习记录~2023.8.10~JavaScript重难点实例精讲~第6章 Ajax

第 6 章 Ajax 前言6.1 Ajax的基本原理及执行过程6.1.1 XMLHttpRequest对象&#xff08;1&#xff09;XMLHttpRequest对象的函数&#xff08;2&#xff09;XMLHttpRequest对象的属性 6.1.2 XMLHttpRequest对象生命周期&#xff08;1&#xff09;创建XMLHttpRequest对象&#xff…...

2023年Java核心技术第九篇(篇篇万字精讲)

目录 十七 . 并发相关基础概念 17.1 线程安全 17.2 保证线程安全的两个方法 17.2.1 封装 17.2.2 不可变 17.2.2.1 final 和 immutable解释 17.3 线程安全的基本特性 17.3.1 原子性&#xff08;Atomicity&#xff09; 17.3.2 可见性&#xff08;Visibility&#xff09; 17.3.2.1…...

C#上位机中的单例应用思考

文章目录 一、前言二、上位机单例应用场景2.1 上位机2.2 单例及其应用2.3 上位机中的应用2.3.1 用户登录信息2.3.2 配置文件2.3.3 数据连接池 2.4 一个应用场景的思考 三、总结 一、前言 之前写过一篇关于单例的文——C#中单例模式的实现&#xff0c;讲了讲单例是什么以及在C#…...

Python分享之redis

String 操作 redis中的String在在内存中按照一个name对应一个value来存储 set() #在Redis中设置值&#xff0c;默认不存在则创建&#xff0c;存在则修改 r.set(name, zhangsan) 参数&#xff1a; set(name, value, exNone, pxNone, nxFalse, xxFalse) ex&#xff…...

Linux常用命令——dd命令

在线Linux命令查询工具 dd 复制文件并对原文件的内容进行转换和格式化处理 补充说明 dd命令用于复制文件并对原文件的内容进行转换和格式化处理。dd命令功能很强大的&#xff0c;对于一些比较底层的问题&#xff0c;使用dd命令往往可以得到出人意料的效果。用的比较多的还是…...

DETR-《End-to-End Object Detection with Transformers》论文精读笔记

DETR&#xff08;基于Transformer架构的目标检测方法开山之作&#xff09; End-to-End Object Detection with Transformers 参考&#xff1a;跟着李沐学AI-DETR 论文精读【论文精读】 摘要 在摘要部分作者&#xff0c;主要说明了如下几点&#xff1a; DETR是一个端到端&am…...

网络流量监控-sniffnet

{alert type“info”} 今天来分享一个监控流量的应用sniffnet。 github项目地址&#xff1a;https://github.com/GyulyVGC/sniffnet {/alert} 可以在github的readme上看到这个程序有的特性&#xff1a; 为什么要介绍它呢&#xff1a;主要是多线程、跨平台、可靠、操作简单 我…...

验证go循环删除slice,map的操作和map delete操作不会释放底层内存的问题

目录 切片 for 循环删除切片元素其他循环中删除slice元素的方法方法1方法2&#xff08;推荐&#xff09;方法3 官方提供的方法结论 切片 for 循环删除map元素goalng map delete操作不会释放底层内存go map原理源码CRUD查询新增 操作注意事项map元素是无法取址的map是线程不安全…...

C++二级题2

数字字符求和 #include<iostream> #include<string.h> #include<stdio.h> #include<iomanip> #include<cmath> #include<bits/stdc.h> int a[2000][2000]; int b[2000]; char c[2000]; long long n; using namespace std; int main() {ci…...

DataWhale 机器学习夏令营第三期——任务二:可视化分析

DataWhale 机器学习夏令营第三期 学习记录二 (2023.08.23)——可视化分析1.赛题理解2. 数据可视化分析2.1 用户维度特征分布分析2.2 时间特征分布分析 DataWhale 机器学习夏令营第三期 ——用户新增预测挑战赛 学习记录二 (2023.08.23)——可视化分析 2023.08.17 已跑通baseli…...

ubuntu 上安装flutter dart android studio

因为国内网站不能使用 使用一下&#xff1a; vi ~/.bashrc 最后添加 export FLUTTER_STORAGE_BASE_URLhttps://mirrors.cloud.tencent.com/flutter export PUB_HOSTED_URLhttps://mirrors.tuna.tsinghua.edu.cn/dart-pub export PATH$PATH:/usr/local/go/bin export GOPROXY…...

【Golang】go交叉编译

交叉编译是用来在一个平台上生成另一个平台的可执行程序 。Go 命令集是原生支持交叉编译的。 Mac下编译&#xff1a;Linux 或 Windows 的可执行程序 # linux 可执行程序 CGO_ENABLED0 GOOSlinux GOARCHamd64 go build main.go # Windows可执行程序 CGO_ENABLED0 GOOSwindow…...

【人工智能】—_贝叶斯网络、概率图模型、全局语义、因果链、朴素贝叶斯模型、枚举推理、变量消元

文章目录 频率学派 vs. 贝叶斯学派贝叶斯学派Probability&#xff08;概率&#xff09;:独立性/条件独立性&#xff1a;Probability Theory&#xff08;概率论&#xff09;:Graphical models &#xff08;概率图模型&#xff09;什么是图模型&#xff08;Graphical Models&…...

学习笔记:ROS使用经验( 查看rostopic的信息)

查看topic的信息 要查看ROS中的话题信息&#xff0c;你可以使用以下命令&#xff1a; 1.查看所有活动话题&#xff1a; $ rostopic list这将列出当前运行的所有活动话题。 2.查看特定话题的消息类型&#xff1a; $ rostopic info <topic_name>将<topic_name>替…...

数据库——redis内存淘汰,持久化机制

文章目录 Redis 内存淘汰机制了解么&#xff1f;⭐了解操作系统中lru并尝试用java实现lru 2.Redis 持久化机制(怎么保证 Redis 挂掉之后再重启数据可以进行恢复)快照&#xff08;snapshotting&#xff09;持久化&#xff08;RDB&#xff09;AOF&#xff08;append-only file&am…...

1Panel新手必看:5分钟搞定RustDesk远程桌面搭建(含端口配置避坑指南)

1Panel极速部署RustDesk&#xff1a;零基础构建安全远程桌面的完整指南 当我们需要远程管理Linux服务器时&#xff0c;一个轻量级、开源的远程桌面解决方案往往比商业软件更灵活可控。RustDesk作为新兴的远程工具&#xff0c;凭借其跨平台特性和自建服务器的能力&#xff0c;正…...

K230目标检测实战:手把手教你用Labelme标注数据并一键转成VOC格式(附避坑指南)

K230目标检测实战&#xff1a;高效数据标注与VOC格式转换全攻略 当你第一次接触K230开发板进行目标检测项目时&#xff0c;数据准备往往是最大的拦路虎。特别是从原始图片到符合AI_Cube要求的VOC格式数据集&#xff0c;这个过程充满了各种"坑"。本文将分享一套经过实…...

Qwen3.5-4B-Claude-Opus企业实操:数据治理元数据血缘关系推理补全工具

Qwen3.5-4B-Claude-Opus企业实操&#xff1a;数据治理元数据血缘关系推理补全工具 1. 平台概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B架构的推理蒸馏模型&#xff0c;专门针对企业级数据治理场景中的元数据血缘关系分析任务进行了优化。该模…...

PyTorch 2.8镜像多场景落地:在线教育平台个性化习题生成引擎部署

PyTorch 2.8镜像多场景落地&#xff1a;在线教育平台个性化习题生成引擎部署 1. 教育行业的AI转型机遇 在线教育行业正面临个性化学习的迫切需求。传统题库系统存在内容同质化、更新成本高、难以匹配学生个体差异等问题。基于PyTorch 2.8构建的个性化习题生成引擎&#xff0c…...

HunyuanVideo-Foley 社区贡献指南:如何提交Prompt案例与优化建议

HunyuanVideo-Foley 社区贡献指南&#xff1a;如何提交Prompt案例与优化建议 1. 为什么你的贡献很重要 开源项目的生命力来自社区的共同参与。HunyuanVideo-Foley作为一款专注于音效生成的AI模型&#xff0c;其效果提升离不开用户的实际使用反馈和创意贡献。你的每一次Prompt…...

3步搞定黑苹果配置:OpCore-Simplify让EFI构建效率提升80%的智能方案

3步搞定黑苹果配置&#xff1a;OpCore-Simplify让EFI构建效率提升80%的智能方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否经历过这些痛苦…...

wan2.1-vae提示词评估体系:构建BLEU-Style指标量化中文提示词有效性

wan2.1-vae提示词评估体系&#xff1a;构建BLEU-Style指标量化中文提示词有效性 1. 为什么需要评估提示词质量 在AI图像生成领域&#xff0c;提示词的质量直接影响最终生成效果。好的提示词能准确表达创作意图&#xff0c;而模糊或不当的提示词可能导致生成结果与预期不符。特…...

STM32从入门到实战:两周速成指南

STM32快速入门指南&#xff1a;从零基础到项目实战1. 项目概述1.1 STM32与8051的对比分析对于已经掌握8051和C语言的开发者而言&#xff0c;STM32的学习曲线并不陡峭。关键在于理解何时需要从8051迁移到STM32平台&#xff1a;计算能力需求&#xff1a;当8051的主频无法满足复杂…...

4 大平台 “免费拿” 玩法大拆解,看完不踩坑

现在很多平台都有 “0元领东西” 的活动&#xff0c;玩法不一样&#xff0c;难度也差很多。今天用大白话对比拼dd、淘b、京d、全能锦鲤&#xff0c;简单易懂&#xff0c;看完就知道该选哪个。一、各平台免费拿怎么玩&#xff1f;1. 拼dd&#xff08;老牌砍价&#xff09;玩法&a…...

Greasy Fork:开源用户脚本平台的价值探索与实践指南

Greasy Fork&#xff1a;开源用户脚本平台的价值探索与实践指南 【免费下载链接】greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork 一、价值定位&#xff1a;重新定义浏览器增强体验 1.1 开源平台的核心价值…...