如何在文本字段中输入变量？

Question

我有一个 if 条件，如果您在文本字段中输入“[first_name]”，结果将是“John”。但如果您输入“Hello [first_name]”，结果将是“Hello [first_name]”。

这是代码，我知道如果您在文本字段中仅输入“[first_name]”，它就可以工作。但是，如果我在文本字段中写入任何内容，结果将是我写入的内容，并且变量“[first_name]”将是“John”，我该如何解决这个问题。谢谢你。

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

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

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

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

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
    }
}

我尝试了什么 输入字段： 你好[名字] 结果： 你好[名字]

我在期待什么 输入字段： 你好[名字] 结果： 你好约翰

或者我在带有变量“[first_name]”的文本字段中写的任何内容都将是“John”和我写的另一个文本。

Answer 1

您需要稍微修改您的 JavaScript 代码。您不应将整个输入字符串与 "[first_name]" 进行比较，而应使用 indexOf() 方法检查输入字符串中是否存在 "[first_name]"。这是修改后的代码：

function myFunction(){
    var input = document.getElementById("myInput").value;
    var myVar = "[first_name]";
    
    if (input.indexOf(myVar) !== -1){
        var data = input.replace(myVar, "John");
        document.getElementById("result").innerHTML = data;
    }
    else{
        document.getElementById("result").innerHTML = input;
    }
}

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

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

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

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

Answer 2

我想你想要这样的东西

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

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

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

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


  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.replace(
        myVar,
        "John"
      );
    }
  }

我希望这有帮助