本文详解如何通过 JavaScript 实现文本输入中的变量占位符自动替换，支持在任意字符串中识别并替换成对应值（如将 "Hello [first_name]" 转换为 "Hello John"），无需严格匹配整段内容。

本文详解如何通过 javascript 实现文本输入中的变量占位符自动替换，支持在任意字符串中识别并替换成对应值（如将 `"hello [first_name]"` 转换为 `"hello john"`），无需严格匹配整段内容。

在表单或模板化文本处理场景中，常需支持类似 {{name}} 或 [first_name] 这样的变量占位符，并在用户输入后实时渲染为真实值。原始代码仅当输入完全等于 [first_name] 时才生效，导致 "Hello [first_name]" 无法被识别和替换。

要解决该问题，关键在于：不使用全等判断（==），而应检测占位符是否存在于输入字符串中，并执行全局替换。以下是优化后的完整实现：

<p>Input [first_name] for variable</p>
<input id="myInput" type="text" placeholder="Try: Hello [first_name] or [first_name] is here"><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.includes(placeholder)) {
        const resultText = input.replace(new RegExp(escapeRegExp(placeholder), 'g'), replacement);
        document.getElementById("result").innerHTML = resultText;
    } else {
        document.getElementById("result").innerHTML = input;
    }
}

// 辅助函数：转义正则特殊字符，确保字面量匹配（如方括号）
function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
</script>

✅ 核心改进点说明：

• 使用 String.includes() 替代 indexOf() !== -1，语义更清晰（ES6+ 推荐）；
• 采用 replace() + 正则表达式（配合 escapeRegExp）实现全局、安全替换，避免因 [ ] 是正则元字符导致报错；
• 支持占位符在字符串任意位置（开头、中间、结尾）及多次出现（如 "[first_name] and [first_name]!" → "John and John!"）。

⚠️ 注意事项：

• 若需支持多个变量（如 [last_name]、[email]），建议构建映射对象并循环替换；
• 生产环境推荐使用成熟模板库（如 Handlebars、Mustache）或 String.prototype.replaceAll()（现代浏览器支持）；
• 用户输入应做基础 XSS 过滤（本例未包含，实际项目中需对 innerHTML 赋值做 HTML 转义或改用 textContent）。

通过这一方案，即可灵活实现“所见即所得”的变量注入效果，兼顾简洁性与扩展性。