如何在网页中实现用户输入动态替换代码模板中的关键词

本文介绍一种轻量、易集成的前端方案，帮助非开发人员快速为代码模板添加“关键词替换”功能：用户输入文本，点击按钮即可将模板中所有指定占位符（如 character）自动替换为输入内容，并实时显示结果。无需后端，纯 html + javascript 即可实现。

本文介绍一种轻量、易集成的前端方案，帮助非开发人员快速为代码模板添加“关键词替换”功能：用户输入文本，点击按钮即可将模板中所有指定占位符（如 character）自动替换为输入内容，并实时显示结果。无需后端，纯 html + javascript 即可实现。

在为 Episode 等互动剧平台提供脚本模板时，常需用占位符（如 CHARACTER、SCENE_NAME 或 VOICE_LINE）标记待用户自定义的部分。若依赖用户手动 Ctrl+F 替换，不仅易出错，还降低使用体验。一个专业、友好的替代方案是：在网页中嵌入一个输入框和生成按钮，让用户一键完成全文精准替换。

以下是一个完整、开箱即用的实现方案，已针对初学者优化——无框架依赖、语义清晰、样式简洁，并默认处理大小写一致性问题：

✅ 核心逻辑说明

• 使用 textContent 获取原始模板文本（避免误操作 HTML 标签）；
• 利用 String.prototype.replaceAll() 进行全局替换（注意：IE 不支持，但现代浏览器均兼容）；
• 输入值统一转为大写（toUpperCase()），确保替换结果风格统一（如 CHARACTER → ALEX）；
• 通过 CSS 的 text-transform: uppercase 实时显示大写效果，提升表单友好性。

? 完整示例代码

<!-- HTML 结构 --> <input type="text" id="inp" placeholder="请输入角色名（如 ALEX）"> <button class="btnChange">生成定制代码</button>  <pre class="brush:php;toolbar:false;" id="output" style="background:#f5f5f5; padding:12px; border-radius:4px; overflow-x:auto;"> CHARACTER enters from left to screen center.   CHARACTER says: "This is my line."   CHARACTER exits right.

/* CSS：让输入框自动显示大写，提升视觉一致性 */ #inp {   text-transform: uppercase;   padding: 8px 12px;   border: 1px solid #ccc;   border-radius: 4px;   margin-right: 8px; } .btnChange {   padding: 8px 16px;   background: #2a75ff;   color: white;   border: none;   border-radius: 4px;   cursor: pointer; } .btnChange:hover {   background: #1a60e0; }

// JavaScript：核心替换逻辑 const btnChange = document.querySelector(".btnChange"); const inp = document.querySelector("#inp"); const output = document.querySelector("#output"); const originalContent = output.textContent; // ⚠️ 仅读取一次原始内容，避免覆盖丢失  btnChange.addEventListener("click", () => {   const replacement = inp.value.trim();   if (!replacement) {     alert("请输入有效文本！");     return;   }   // 全局替换所有 "CHARACTER"（区分大小写），并保持大写格式   output.textContent = originalContent.replaceAll("CHARACTER", replacement.toUpperCase()); });

⚠️ 注意事项与最佳实践

• 占位符命名建议：使用全大写 + 下划线（如 CHARACTER_NAME、BACKGROUND_MUSIC）可显著降低误匹配风险（避免把 character 单词中的 character 错替）；
• 安全性提示：此方案仅作用于前端展示文本，不执行、不提交、不解析代码，因此无 xss 风险；但若后续需将替换结果用于实际部署，请务必在服务端再次校验输入；
• 扩展性增强：如需支持多个占位符（如同时替换 CHARACTER 和 location），可封装为对象映射：

  const placeholders = { CHARACTER: inp1.value, LOCATION: inp2.value }; let result = originalContent; for (const [key, val] of Object.entries(placeholders)) {   result = result.replaceAll(key, val?.toUpperCase() || ""); } output.textContent = result;

通过以上实现，你只需将代码嵌入现有网页，即可为用户提供直观、可靠的模板定制能力——告别复制粘贴+查找替换，真正实现「所见即所得」的创作体验。