本文介绍一种轻量级、无需后端的前端方案，通过原生 javascript 实现用户在网页中输入自定义文本，点击按钮后自动将预设代码模板中所有指定占位符（如 `character`）替换为该文本，并实时显示结果。适合非开发人员快速集成到静态网站中。

要实现类似 Episode 模板网站中“输入角色名 → 一键替换全部占位符”的功能，核心在于：捕获用户输入 + 定位模板文本 + 批量安全替换 + 即时渲染。整个过程完全运行在浏览器端，无需服务器参与，部署简单、响应迅速。

✅ 基础实现步骤（三步到位）

1. 准备 HTML 结构
   包含一个输入框（）、一个触发按钮（）和一个用于显示替换后代码的容器（如

    或 <div>）。注意：建议使用 <pre class="brush:php;toolbar:false;"> 保留代码缩进与换行，提升可读性。

   用 JavaScript 绑定交互逻辑
   推荐使用 addEventListener（而非内联 onclick），更易维护且符合现代实践。关键点：

   • 使用 textContent 获取原始模板内容（避免误操作 HTML 标签）；
   • 使用 String.prototype.replaceAll() 进行全局替换（注意：IE 不支持，但现代浏览器均兼容）；
   • 对用户输入调用 .toUpperCase() 确保大小写统一（可根据需求改为 .trim() 或其他处理）。

   增强用户体验的小技巧

   

   DeepBI DHTML 页面生成器

   生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

   下载

   • CSS 添加 text-transform: uppercase 让输入框内文字实时大写显示（视觉提示）；
   • 替换前校验输入是否为空，避免清空占位符；
   • 可选：添加 readonly 或 tabindex="-1" 防止意外修改输出区。

   ? 完整可运行示例

   <!-- HTML -->
   <input type="text" id="inp" placeholder="请输入角色名（如：ALEX）"><button class="btnChange">生成代码</button>
   
   <pre class="brush:php;toolbar:false;" id="output" style="background:#f5f5f5; padding:1rem; border-radius:4px; overflow-x:auto;">
   CHARACTER enters from left to screen center.  
   CHARACTER says, "Hello world!"  
   CHARACTER walks toward the horizon.  
   

   /* CSS */
   #inp {
     padding: 0.5rem;
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 0.5rem;
   }
   .btnChange {
     padding: 0.5rem 1rem;
     background: #2a6496;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
   }
   .btnChange:hover {
     background: #1d4a6e;
   }

   // JavaScript（放在