前端如何设置模板参数

1.背景:

最近接到一个需求,在一个类似chatGpt的聊天工具中,要在对话框中设置模板,后端提供了很多模板参数,然后要求将后端返回的特殊字符转成按钮,编辑完成后在相应的位置拼接成字符串。


2.效果:

在点击发送后,页面上就是如此拼接后的字符串


当然,还进一步拓展了其功能,比如可以上传文件,解析出来后和其他字符拼接


3.实现

 要注意的是:你和后端约定好特殊字符的格式,比如我这里是的是:

text:"|`社工背景`| 根据信息介绍,请你写一封内容丰富的|`诱饵类型`|电子邮件"

 以下是完整的实现代码

// template 部分
<div id="text-container"> </div>// 功能部分,我封装成了三个函数,使用时updatePageWithText传入即可
function updatePageWithText(textData:any) {const regex = /(\|`[^`]+`\|)/g; // 匹配 |` 和 `| 之间的内容const newText = textData.replace(regex, function (match:any) {// 去除 |` 和 `|,同时为匹配文本创建一个可点击的 spanconst cleanMatch = match.replace(/\|`|`\|/g, '');return `<span class="green-text">${cleanMatch}</span>`;}).replace(/\+/g, ' '); // 把 `+` 替换为空格以正确显示文本const textContainer:any = document.getElementById('text-container');textContainer.innerHTML = newText;// 为所有绿色文本添加点击事件监听const greenTexts = textContainer.querySelectorAll('.green-text');greenTexts.forEach(function (greenText:any) {greenText.addEventListener('click', function () {convertToInput(this);});});
}function convertToInput(element:any) {const input = document.createElement('input');input.type = 'text';input.value = element.textContent;input.className = 'green-text'; // 保持输入框具有相同的类名,这样它的外观与span时相同// 添加失焦事件处理器以在输入结束时替换文本input.addEventListener('blur', function () {finishInput(element, this);});// 添加回车键事件处理器以在按下回车时替换文本input.addEventListener('keydown', function (event) {if (event.key === "Enter") {finishInput(element, this);}});element.replaceWith(input); // 替换 span 元素为输入框input.focus();
}function finishInput(spanElement:any, inputElement:any) {// 创建一个新的span元素来替换输入框const newSpan = document.createElement('span');newSpan.textContent = inputElement.value; // 使用输入框的值newSpan.className = 'green-text'; // 恢复原来的类名,以便保持外观和行为newSpan.addEventListener('click', function () {convertToInput(newSpan); // 添加点击事件,使得新的span也可以被点击并转换});inputElement.replaceWith(newSpan); // 替换输入框为新建的span元素
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/227616.shtml

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

相关文章

C++ 类模板

目录 前言 类模板语法 类模板和函数模板的区别 类模板没有自动类型推导的使用方式 类模板在模板参数列表中可以有默认参数 类模板中成员函数创建时机 类模板对象做函数参数 指定传入的类型 参数模板化 整个类模板化 类模板与继承 类模板成员函数类外实现 类模板分…

在Spring Cloud中使用OpenFeign完成从一个微服务上传到另一个微服务中

跨服务上传文件&#xff0c;嘿嘿&#xff0c;来一篇实用性高的&#xff0c;本篇将主要完成在Feign中上传文件到另一个微服务中。步骤如下&#xff1a; 我们需要在服务提供者和服务消费者的项目中添加相应的依赖&#xff1a; 对于服务提供者的项目&#xff0c;你需要添加Sprin…

Redis设计与实现之集合及有序集

目录 一、集合 1、编码的选择 2、编码的切换 3、 字典编码的集合 4、集合命令的实现 5、 求交集算法 6、求并集算法 7、 求差集算法 二、有序集 1、编码的选择 2、编码的转换 3、ZIPLIST 编码的有序集 4、SKIPLIST 编码的有序集 三、如何添加元素到集合或有序集中…

Next.js 学习笔记(二)——项目结构

Next.js 项目结构 此页面提供了 Next.js 项目的文件和文件夹结构的概述。它涵盖了 app 和 pages 目录中的顶级文件和文件夹、配置文件以及路由约定。 顶级文件夹 文件夹名描述appApp RouterpagesPages Routerpublic待服务的静态资源src可选的应用程序源文件夹 顶级文件 文…

万兆网络之屏蔽线序接法(中)

在介绍优质网线选购之前&#xff0c;先简单介绍一下水晶头 1毛钱一颗跟1元一颗的水晶头&#xff0c;往往是金手指厚度差别&#xff0c;你可以想象压制的时候可能会有什么情况 另外&#xff0c;一些3元一颗的镀金水晶头会有15U、30U之类的是电镀厚度单位&#xff0c;数值越大镀…

React Native面试题总结

1,简单介绍下React Native,以及和React.js的区别 React Native是一个JavaScript框架,由Facebook开发,以满足日益增长的移动应用开发的需求。它是开源的,基于JavaScript的。它被设计为用可重复使用的组件构建本地移动应用程序。它使用了大量的ReactJS组件,但在不同的设备…

文档安全加固:零容忍盗窃,如何有效预防重要信息外泄

文档安全保护不仅需要从源头着手&#xff0c;杜绝文档在使用和传播过程中产生的泄密风险&#xff0c;同时还需要对文档内容本身进行有效的保护。为了防范通过拷贝、截屏、拍照等手段盗窃重要文档内容信息的风险&#xff0c;迅软DSE加密软件提供了文档加密保护功能&#xff0c;能…

10 新字符设备驱动文件

一、新字符设备驱动原理 因为 register_chrdev 和 unregister_chrdev 两个函数是老版本驱动文件&#xff0c;现在可以用新字符设备驱动 API 函数。 1. 分配和和释放设备号 使用 register_chrdev 函数注册字符设备的时候只需要给定一个主设备号即可&#xff0c;但是这样会带来两…

如何计算2的n次方

今天在写代码的时候&#xff0c;遇到了纹饰评分的计算&#xff0c;纹饰的等级和评分的关系为&#xff1a; 1级纹饰&#xff1a;202级纹饰&#xff1a;403级纹饰&#xff1a;80 得出纹饰等级grade和纹饰评分score的关系&#xff1a;score (2 ^ grade) * 10&#xff0c;所以就…

git 不小心操作 reset current branch to here后,怎么还原

可以通过reflog来进行恢复&#xff0c;前提是丢失的分支或commit信息没有被git gc清除 一般情况下&#xff0c;gc对那些无用的object会保留很长时间后才清除的 可以使用git reflog show或git log -g命令来看到所有的操作日志 恢复的过程很简单&#xff1a; 通过git log -g命…

信息安全和网络安全的区别

信息安全与网络安全都属于安全领域&#xff0c;但它们的范围和重点不同。 信息安全主要关注数据的保护&#xff0c;包括对敏感数据进行加密、防止数据丢失或泄露等措施。信息安全通常与数据存储、传输和处理相关。 而网络安全更侧重于保护计算机系统和网络免受攻击、病毒、蠕…

Mac安装软件显示文件已损坏处理方法

今天安装软件&#xff0c;突然遇到了文件已损坏&#xff0c;扔到废纸篓的情况&#xff0c;于是搜索了下解决办法&#xff0c;跟大家分享下&#xff0c;希望对你有所帮助 一、检查安全性设置 打开【设置】-【隐私与安全】&#xff0c;下拉找到安全性&#xff0c;将安全性更改为…

自定义指令Custom Directives

<script setup langts> import { ref } from "vue"const state ref(false)/*** Implement the custom directive* Make sure the input element focuses/blurs when the state is toggled* */ // 以v开头的驼峰式命名的变量都可以作为一个自定义指令 const VF…

System作为系统进程陔如何关闭?

一、简介 system进程是不可以关闭的&#xff0c;它是用来运行一些系统命令的&#xff0c;比如reboot、shutdown等&#xff0c;以及用来运行一些后台程序&#xff0c;比如ntfs-3g、v4l2loopback等。system进程也被用于运行一些内核模块&#xff0c;比如nvidia、atd等。system进程…

mars3d加载arcgis发布的服务,⽀持4523坐标

问题 1.从这个服务地址加载&#xff0c;具体在哪⾥去转坐标呢&#xff1f; 加个 usePreCachedTilesIfAvailable&#xff1a;false 参数即可 坐标系为4490的arcgis影像服务图层&#xff0c;配置后瓦片加载不出来&#xff0c;没报错 甚至可以跳转 没有看出问题&#xff0c;或者测…

linux系统启动时运行web程序

1.修改rc.local文件 执行命令如果找不到会报错command not found &#xff0c;使用全路径即可 找不到的话 可以使用which 命令 找到路径 后台查看执行日志 2.修改rc.local文件的权限 chmod x rc.local 然后reboot 可以查到进程和启动日志

vue3:直接修改reative的值,页面却不响应,这是什么情况?

目录 前言&#xff1a; 错误示范&#xff1a; reactive() 的局限性 解决办法&#xff1a; 1.使用ref 2.reative多套一层 3.使用Object.assign 前言&#xff1a; 今天看到有人在提问&#xff0c;问题是这样的&#xff0c;我修改了reative的值&#xff0c;数据居然失去了响…

MySQL异步操作在C++中的应用

在开发高性能的C应用中&#xff0c;数据库操作的效率往往成为一个瓶颈。传统的同步数据库操作在等待数据库响应时会阻塞程序的执行&#xff0c;导致整体性能下降。为了解决这个问题&#xff0c;异步操作成为了一个重要的技术手段。 本文将详细介绍如何在C中使用MySQL的异步接口…

YOLOv5改进 | 注意力篇 | DAttention (DAT)注意力机制实现极限涨点

一、本文介绍 本文给大家带来的是YOLOv5改进DAT(Vision Transformer with Deformable Attention)的教程&#xff0c;其发布于2022年CVPR2022上同时被评选为Best Paper&#xff0c;由此可以证明其是一种十分有效的改进机制&#xff0c;其主要的核心思想是&#xff1a;引入可变形…

微信小程序置顶导航,替代原生导航栏

效果图&#xff1a; 思路&#xff1a;Navigation是小程序的顶部导航组件&#xff0c;当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏&#xff0c;wx.getSystemInfoSync获取可使用窗口高度 wxml代码&#xff1a; <!-- 头部 --> <view cla…