如何在文本框中实现指定变量的全局替换功能？

API 探路者

2026-6-28

问题：替换文本中任意位置的[first_name]变量

当前代码仅支持输入框**仅输入"[first_name]"**时替换为"John"，但输入包含该变量的其他内容（如"Hello [first_name]"）时，变量不会被替换，结果与输入内容一致。需要实现：无论输入内容是什么，只要包含"[first_name]"，就将该变量替换为"John"，其余内容保留。

测试场景：输入Hello [first_name]，当前输出Hello [first_name]
期望输出：Hello John

现有代码

<p> Input [first_name] for variable </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<p id="result"></p>

<script>
function myFunction(){
    var input = document.getElementById("myInput").value;
    var myVar = "[first_name]"
    
    if (input == myVar){
        var data = document.getElementById('result').value= "John"
        document.getElementById("result").innerHTML = data;
    }
    else{
        document.getElementById("result").innerHTML = input
    }
}
</script>

解决方案

原代码的if (input == myVar)判断仅处理输入内容与变量完全相等的情况，无法匹配包含变量的其他文本。改用字符串replace()方法结合正则表达式，即可实现全局替换所有出现的[first_name]：

<p> Input [first_name] for variable </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<p id="result"></p>

<script>
function myFunction(){
    var input = document.getElementById("myInput").value;
    // 正则转义方括号，g表示全局替换所有匹配项
    var replacedText = input.replace(/\[first_name\]/g, "John");
    document.getElementById("result").innerHTML = replacedText;
}
</script>