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

前端如何设置模板参数

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元素
}

相关文章:

前端如何设置模板参数

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

06 使用v-model实现双向数据绑定

概述 Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI. Vue 通过创建一个专用指令来观…...

【C++11特性篇】C++11中新增的initializer_list——初始化的小利器(2)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C11系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.探究std::initializer_list是什么…...

计算机网络传输层(期末、考研)

计算机网络总复习链接&#x1f517; 目录 传输层的功能端口UDP协议UDP数据报UDP的首部格式UDP校验 TCP协议&#xff08;必考&#xff09;TCP报文段TCP连接的建立TCP连接的释放TCP的可靠传输TCP的流量控制零窗口探测报文段 TCP的拥塞控制慢开始和拥塞控制快重传和快恢复 TCP和U…...

【STM32入门】4.1中断基本知识

1.中断概览 在开展红外传感器遮挡计次的实验之前&#xff0c;有必要系统性的了解“中断”的基本知识. 中断是指&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转…...

HCIA-H12-811题目解析(3)

1、【单选题】 以下关于路由器的描述&#xff0c;说法错误的是&#xff1f; 2、【单选题】某网络工程师在输入命令行时提示如下信息&#xff1a;Error:Unrecognized command foun at position.对于该提示信息说法正确的是&#xff1f; 3、【单选题】如下图所示的网络&#xf…...

【异步绘制】UIView刷新原理 与 异步绘制

快捷目录 壹、 iOS界面刷新机制贰、浅谈UIView的刷新与绘制概述一.UIView 与 CALayer1. UIView 与 CALayer的关系2. CALayer的一些常用属性contents属性contentGravity属性contentsScale属性maskToBounds属性contentsRect属性 二.View的布局与显示1.图像显示原理2.布局layoutSu…...

[ERROR] ocp-server-ce-py_script_start_check-4.2.1 RuntimeError: ‘tenant_name‘

Oceanbase 安装成功后关闭OCP&#xff0c;在重新启动时报错 使用OBD 启动OCP报如下错误 [adminobd ~]$ obd cluster start ocp Get local repositories ok Search plugins ok Open ssh connection ok Load cluster param plugin ok Check before start ocp-server x [ERROR] …...

模拟实验中经常遇到的问题和常用技巧

简介 最近在进行新文章的数值模拟阶段。上一次已经跟读者们分享了模拟实验的大致流程&#xff0c;见&#xff1a;数值模拟流程记录和分享 。 本文是在前提下&#xff0c;汇总了小编在模拟实验中经常遇到的问题和常用技巧。 文章目录 简介1. 隐藏输出结果自动创建文件夹保存多…...

微信小程序(二) ——模版语法1

文章目录 wxml模板语法拼接字符数据绑定 wxml模板语法 拼接字符 <image src"{{test1src}}" mode""/>数据绑定 在data中定义数据&#xff0c;吧数据定义到data对象中在wxml中使用数据不论是绑定内容还是属性都是用 {{}} 语法 动态绑定内容 *声明…...

牛客小白月赛83 解题报告

题目链接&#xff1a; https://ac.nowcoder.com/acm/contest/72041#question A题 解题思路 签到 代码 #include <bits/stdc.h> using namespace std;int main() {int a, b, c, d, e;cin >> a >> b >> c >> d >> e;int A, B, C, D…...

蓝桥杯专题-真题版含答案-【三角螺旋阵】【干支记年法】【异或加密法】【金字塔】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…...

鸿蒙篇——初次使用鸿蒙原生编译器DevEcoStudio创建一个鸿蒙原生应用遇到的坑--汇总(持续更新)

前言&#xff1a;欢迎各位鸿蒙初学者、开发者来本帖交流讨论&#xff0c;包含各位遇到的问题、鸿蒙的bug、解决方法等等&#xff0c;我会收集有效的内容更新到本文章中。 背景&#xff1a;2023年12月13日&#xff0c;使用DevEcoStudio 4.0.0.600版本&#xff0c;项目的compileS…...

细胞培养之一二三:哺乳动物细胞培养污染问题和解决方案

一、哺乳动物细胞污染是什么[1]&#xff1f; 污染通常是指在细胞培养基中存在不需要的微生物、不需要的哺乳动物细胞和各种生化或化学物质&#xff0c;从而影响所需哺乳动物细胞的生理和生长。由于微生物在包括人体特定部位在内的环境中无处不在&#xff0c;而且它们的繁殖速度…...

《Linux C编程实战》笔记:文件属性操作函数

获取文件属性 stat函数 在shell下直接使用ls就可以获得文件属性&#xff0c;但是在程序里应该怎么获得呢&#xff1f; #include<sys/types.h> #include <sys/stat.h> #include <unistd.h> int stat(const char *file_name,struct stat *buf); int fstat(i…...

linux中的网络知识

网络 认识基本网络网络划分计算机网络分为LAN、MAN、WAN公网ip和私网ip 传输介质单位换算客户端和服务端 OSI模型osi七层模型TCP/IP:传输控制协议簇HTTP协议简介UDP协议介绍物理地址&#xff1a;mac地址&#xff0c;全球唯一&#xff0c;mac由6段16进制数组成&#xff0c;每段有…...

tp中的调试模式

ThinkPHP有专门为开发过程而设置的调试模式&#xff0c;开启调试模式后&#xff0c;会牺牲一定的执行效率&#xff0c;但带来的方便和除错功能非常值得。 我们强烈建议ThinkPHP开发人员在开发阶段始终开启调试模式&#xff08;直到正式部署后关闭调试模式&#xff09;&#xf…...

【docker 】基于Dockerfile创建镜像

Dockerfile文档 Dockerfile文档地址 Dockerfile 是一个用来构建镜像的文本文件&#xff0c;文本内容包含了一条条构建镜像所需的指令和说明。 DockerFile 可以说是一种可以被 Docker 程序解释的脚本&#xff0c;DockerFile 是由一条条的命令组成的&#xff0c;每条命令对应 …...

C# 提取PDF中指定文本、图片的坐标

获取PDF文件中文字或图片的坐标可以实现精确定位&#xff0c;这对于快速提取指定区域的元素&#xff0c;以及在PDF中添加注释、标记或自动盖章等操作非常有用。本文将详解如何使用国产PDF库通过C# 提取PDF中指定文本或图片的坐标位置&#xff08;X, Y轴&#xff09;。 ✍ 用于…...

CTF网络安全大赛是干什么的?发展史、赛制、赛程介绍,参赛需要学什么?

CTF&#xff08;Capture The Flag&#xff09;是一种网络安全竞赛&#xff0c;它模拟了各种信息安全场景&#xff0c;旨在提升参与者的网络安全技能。CTF 赛事通常包含多种类型的挑战&#xff0c;如密码学、逆向工程、网络攻防、Web 安全、二进制利用等。 发展史 CTF 的概念…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

ZYNQ学习记录FPGA(二)Verilog语言

一、Verilog简介 1.1 HDL&#xff08;Hardware Description language&#xff09; 在解释HDL之前&#xff0c;先来了解一下数字系统设计的流程&#xff1a;逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端&#xff0c;在这个过程中就需要用到HDL&#xff0c;正文…...

接口 RESTful 中的超媒体:REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...

简约商务通用宣传年终总结12套PPT模版分享

IOS风格企业宣传PPT模版&#xff0c;年终工作总结PPT模版&#xff0c;简约精致扁平化商务通用动画PPT模版&#xff0c;素雅商务PPT模版 简约商务通用宣传年终总结12套PPT模版分享:商务通用年终总结类PPT模版https://pan.quark.cn/s/ece1e252d7df...