本文介绍如何通过 JavaScript 实现文本输入中的变量占位符（如 [first_name]）自动替换为对应值（如 "John"），支持混合文本场景（如 Hello [first_name]! → Hello John!），无需严格匹配整段输入。

本文介绍如何通过 javascript 实现文本输入中的变量占位符（如 `[first_name]`）自动替换为对应值（如 `"john"`），支持混合文本场景（如 `hello [first_name]!` → `hello john!`），无需严格匹配整段输入。

在表单交互中，常需将用户输入的模板文本（如 "Welcome, [first_name]!"）实时渲染为带实际数据的字符串。原始代码仅在输入完全等于 [first_name] 时才替换，导致 Hello [first_name] 无法生效。根本问题在于逻辑误用：应检测并替换子串，而非全等判断。

正确做法是使用字符串的 indexOf() 判断占位符是否存在，并通过 replace() 进行精准替换。以下是优化后的完整实现：

<p>Input [first_name] for variable</p>
<input id="myInput" type="text"><button onclick="myFunction()">Enter</button>
<p id="result"></p>

<script>
function myFunction() {
    const input = document.getElementById("myInput").value;
    const placeholder = "[first_name]";
    const replacement = "John";

    if (input.indexOf(placeholder) !== -1) {
        const resultText = input.replace(placeholder, replacement);
        document.getElementById("result").innerHTML = resultText;
    } else {
        document.getElementById("result").innerHTML = input;
    }
}
</script>

✅ 关键改进点说明：

• 使用 input.indexOf(placeholder) !== -1 检测占位符是否出现在任意位置；
• 使用 input.replace(placeholder, replacement) 替换首个匹配项（若需全局替换，改用正则：input.replace(new RegExp(placeholder, 'g'), replacement)）；
• 避免直接操作 .value 属性更新 <p></p> 元素——<p></p> 无 value 属性，应统一使用 innerHTML 或更安全的 textContent（推荐后者防 XSS）；
• 建议将 replacement 抽离为配置对象，便于扩展多变量（如 [last_name]、[email]）。

⚠️ 注意事项：

• 若用户输入多个相同占位符（如 [first_name] and [first_name]），默认 replace() 仅替换第一个；需全局替换时务必使用正则表达式；
• 实际项目中应校验输入合法性，避免恶意脚本注入（优先用 textContent 渲染纯文本）；
• 占位符建议统一约定格式（如双大括号 {{first_name}}），减少与普通方括号文本冲突风险。

该方案轻量、可扩展，是前端模板变量渲染的基础实践。