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

How to replace output textbox in html5?

本文关键字：输出 文本 替换 html5      更新时间：2023-09-26

希望有人可以帮助我。

当IM输入："我的名字是杰克"。

Ouputput可以显示变化："我的名字是克拉拉"。

杰克与克拉拉一起改变。

但是当IM输入："我的名字是托尼"

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>

对不起，我的英语不好

谢谢。。。

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

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

让我们一行一行：

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

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

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

Y 包含原始文本值，其中"toni"替换为"ana"。

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

将 Y 放在文档中。

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

这就是错误。Z 包含原始文本值，其中"jack"替换为"clara"。请注意，这将忽略您在 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;
相关文章：