本文介绍一种轻量级、无需后端的前端方案，通过 javascript 动态替换预设代码模板中的占位符（如 `character`），让用户只需输入自定义文本并点击“生成”，即可实时获得已替换完成的代码。适合非开发人员快速集成到静态网站中。
要实现类似 Episode App 模板中“输入名称 → 一键替换所有占位符”的功能，核心在于：监听按钮点击事件，读取用户输入，对原始代码字符串执行全局替换，并将结果渲染回页面。整个过程完全在浏览器端运行，无需服务器参与，安全、简洁、易部署。
以下是一个完整可运行的示例（HTML + CSS + JavaScript）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Episode 模板代码生成器</title>
<style>
#inp {
padding: 8px;
font-size: 16px;
text-transform: uppercase; /* 自动转大写，提升用户体验 */
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 8px;
}
.btnChange {
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btnChange:hover {
background-color: #45a049;
}
#output {
margin-top: 20px;
padding: 12px;
background-color: #f5f5f5;
border-left: 4px solid #4CAF50;
white-space: pre-wrap; /* 保留换行与空格，适合代码显示 */
font-family: 'Consolas', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<label for="inp">请输入角色名（自动转为大写）：</label>
<input type="text" id="inp" placeholder="例如：ALEX">
<button class="btnChange">生成代码</button>
<div id="output">
CHARACTER enters from left to screen center.
CHARACTER looks around cautiously.
CHARACTER says "Hello, world!"
END SCENE
</div>
<script>
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;
}
// 使用 replaceAll 确保全部匹配项被替换（注意：IE 不支持，现代浏览器均兼容）
output.textContent = originalContent.replaceAll("CHARACTER", replacement.toUpperCase());
});
</script>
</body>
</html>✅ 关键要点说明：
- originalContent 在页面加载时一次性读取，确保每次点击都基于原始模板替换，而非上一次替换后的结果；
- replaceAll() 是 ES2021 标准方法，可安全替换所有出现位置（区别于 replace() 默认只换第一个）；
- text-transform: uppercase + .toUpperCase() 双重保障，兼顾视觉提示与实际输出一致性；
- white-space: pre-wrap 让 正确显示代码换行和缩进，提升可读性；
- 添加了基础输入校验（空值提醒），避免生成无效代码。
⚠️ 注意事项：
- 若需兼容老旧浏览器（如 IE），可将 replaceAll() 替换为正则表达式写法：
output.textContent = originalContent.replace(/CHARACTER/g, replacement.toUpperCase());
- 占位符建议使用全大写+下划线（如 CHARACTER_NAME）或带符号包裹（如 {{CHARACTER}}），以降低误替风险；
- 如模板含多处不同占位符（如 SCENE_TITLE、BACKGROUND），可扩展为对象映射批量替换，逻辑依然清晰可控。
该方案零依赖、易理解、即插即用，非常适合像 Episode 模板分享类网站快速落地——无需懂框架，只要复制粘贴这段代码，修改占位符和默认内容，即可交付专业级交互体验。
