フロントエンドでテンプレートパラメータを設定する方法

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) {
        // 去除 |` 和 `|，同时为匹配文本创建一个可点击的 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元素
}