Question

希望有人可以帮助我。

当我输入：“我的名字是杰克”。

Ouputput可以显示更改：“我的名字是clara”。

杰克改变克拉拉。

但是当我输入：“我的名字是toni”

Ouputput仍然显示：“我的名字是toni”

文字“toni”不能随着“ana”而改变

我的代码出了什么问题？，这是我的代码

<html>
<body>

Enter Text: <input type="text" id="myText">
<button onclick="myFunction()">Replace</button>

<p id="check"></p>

<script>
function myFunction() {
    var x = document.getElementById("myText").value;
	var y = x.replace("toni", "ana");
	document.getElementById("check").innerHTML = y;
	var z = x.replace("jack", "clara");
	document.getElementById("check").innerHTML = z;
	}
	
</script>
</body>
</html>

抱歉我的英文不好

...三江源

Answer 1

您可以创建自己的函数，将原始名称和新名称定义到数组中并匹配它们：

<html>
    <body>
        Enter Text: <input type="text" id="myText">
        <button onclick="myFunction()">Replace</button>
        <p id="check"></p>

        <script>
            String.prototype.replaceArr = function(find, replace) {
                var replaceString = this;
                var regex;
                for (var i = 0; i < find.length; i++) {
                    regex = new RegExp(find[i], "g");
                    replaceString = replaceString.replace(regex, replace[i]);
                }
                return replaceString;
            }

            function myFunction() {
                var x = document.getElementById("myText").value;
                var oldNames = ['toni', 'jack'];
                var newNames = ['ana', 'clara'];
                document.getElementById("check").innerHTML = x.replaceArr(oldNames, newNames);
            }
        </script>
    </body>
</html>

Answer 2

让我们逐行：

var x = document.getElementById("myText").value;

X现在包含原始文本值，没有替换。

var y = x.replace("toni", "ana");

Y包含原始文本值＆＃34; toni＆＃34;取而代之的是＆＃34; ana＆＃34;。

document.getElementById("check").innerHTML = y;

您将Y放在文档中。

var z = x.replace("jack", "clara");

那就是错误。 Z包含原始文本值和＆＃34; jack＆＃34;替换为＆＃34; clara＆＃34;。请注意，这会忽略您在Y中所做的替换。

document.getElementById("check").innerHTML = z;

现在您将Z放在文档中（覆盖您之前所做的更改）。

在不重写代码的情况下解决问题的一种简单方法是删除所有不必要的中间变量，并在将其放回DOM之前对同一字符串执行所有替换：

var x = document.getElementById("myText").value;
x = x.replace("toni", "ana");
x = x.replace("jack", "clara");
document.getElementById("check").innerHTML = x;

如何在html5中替换输出文本框？

2 个答案: