前端如何设置模板参数

这篇具有很好参考价值的文章主要介绍了前端如何设置模板参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.背景:

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


2.效果:

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

前端如何设置模板参数,工作经验总结,前端

前端如何设置模板参数,工作经验总结,前端


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


3.实现

 要注意的是:你和后端约定好特殊字符的格式,比如我这里是的是:文章来源地址https://www.toymoban.com/news/detail-767513.html

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

 以下是完整的实现代码

// template 部分
<div id="text-container"> </div>

// 功能部分,我封装成了三个函数,使用时updatePageWithText传入即可
function updatePageWithText(textData:any) {
    const regex = /(\|`[^`]+`\|)/g; // 匹配 |` 和 `| 之间的内容
    const newText = textData.replace(regex, function (match:any) {
        // 去除 |` 和 `|,同时为匹配文本创建一个可点击的 span
        const 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元素
}

到了这里,关于前端如何设置模板参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android应用程序中使用 Gemini Pro AI开发——2年工作经验如何淘汰10年工作经验的Android开发?

    上周,谷歌推出了最强大的基础模型 Gemini 。 Gemini 是多模式的AI——它可以接受文本和图像输入。 谷歌为 Android 开发者引入了一种在设备上,利用最小模型Gemini Nano的方法。此功能可通过 AICore 在部分设备上使用,这是一项处理模型管理、运行时、安全功能等的系统服务,可

    2024年01月18日
    浏览(68)
  • TP-Link路由器设置登录地址总结

    TP-Link路由器的登陆网址是什么?不少新手用户在第一次设置TP-Link路由器时,发现自己不知道TP-Link路由器的登陆网址,导致不能够完成TP-Link的上网设置。下面本文详细介绍TP-Link的登陆网址,以及获取登陆网址的办法。 (1)、旧版本的TP-Link路由器的登陆网址是:192.168.1.1 (

    2024年02月08日
    浏览(52)
  • [职场] 求职如何设置预期 #笔记#经验分享

    求职如何设置预期 在求职的道路上,无论处于哪个年龄阶段,合理的就业期望值才能使我们的愿望与社会的需求相吻合,才能让自己在今后的工作中发挥出最大的实力与能力。 一、结合测评软件,明确求职目标 根据霍兰德职业兴趣测试结果,偏向于什么型人格,最好就寻求

    2024年02月21日
    浏览(45)
  • Azure 机器学习 - 如何使用模板创建安全工作区

    本教程介绍如何使用 [Microsoft Bicep]和 [Hashicorp Terraform]模板创建以下 Azure 资源: Azure 虚拟网络。 以下资源在此 VNet 后面进行保护: Azure 机器学习工作区 Azure 机器学习计算实例 Azure 机器学习计算群集 Azure 存储帐户 Azure Key Vault Azure Application Insights Azure 容器注册表 Azure Bastion

    2024年02月04日
    浏览(49)
  • [word] word如何设置每行字符数 #笔记#经验分享#媒体

    word如何设置每行字符数 如何设置每行字符数? 设置WORD设定每行中的字符数和每页中的行数的具体步骤如下: 我们需要准备的材料分别是:电脑、word文档。 1、首先我们打开需要编辑的word文档,点击打开“页面布局”。 2、然后我们在弹出来的子菜单栏中点击打开页面设置

    2024年02月22日
    浏览(42)
  • 前端团队协同工作,如何保证质量

    传统软件的持续集成主要有以下措施。 daily build:每日构建,开发者每天提交代码到代码仓库,构建一个可运行的版本。 build verification test(BVT):构建验证测试,每日构建版本出来后,运行一组自动化的测试用例,保证基本功能可用。 对于前端来说,有一些现实的区别:

    2023年04月18日
    浏览(65)
  • idea如何设置注释模板,图文超详细讲解

    目录 先打开idea设置 一,idea类注释 1,找到以下设置 2,设置模板 3,apply保存完成 二,idea方法注释 1,创建自定义的组 2,创建模板 3,设置模板 4,选择生成模板的文件 5,绑定选择参数 6,完成ok 类注释模板和接口注释模板 方法注释模板 生成模板 /** +模板名+快捷键, 选择

    2024年02月14日
    浏览(48)
  • 一文教你如何设置git commit模板规范

    今天看公司代码的提交历史,发现信息量过少,甚至是误导的commit message非常常见,并且无法定位到禅道的相关任务(有的公司用的是jira),对新人来说,查找以往的提交记录很不友好。 为方便新人更快更准确的理解工程师所提交的需求或缺陷,git在提交时需要指定格式提交

    2024年02月11日
    浏览(36)
  • 如何在前端应用中合并多个 Excel 工作簿

    本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网, 葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 SpreadJS是纯前端的电子表格控件,可以轻松加载 Excel 工作簿中的数据并将它们呈现在前端浏览器应用的网页上。 在某些情况下

    2024年02月06日
    浏览(56)
  • SpringBoot如何优雅接收前端请求参数

    @RequestParm 我们可以通过 @RequestParm 注解去绑定请求中的参数,将(查询参数或者form表单数据)绑定到controller的方法参数中,通俗点说就是,我们可以在get请求和post请求中使用改注解,get请求中会从查询参数中获取参数,post请求会从form表单或者查询参数中获取参数 默认情况

    2024年02月11日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包