在 javascript 中使用 string.replace() 来更改文本区域的内容答案

【问题标题】：Use of string.replace() in javascript to change content of a textarea在 javascript 中使用 string.replace() 来更改文本区域的内容
【发布时间】：2015-04-03 22:49:20
【问题描述】：

我有一个带有一些文字的 textarea（假设它说 THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG）。当我按下一个按钮时，textarea 的内容会发生变化，将单词“BROWN”替换为另一个单词（例如“RED”）

<textarea id="text3" >THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.</textarea>
<input type="button" value="Click here" onclick="myFunction();"/>
<script type="application/javascript">
function myFunction() {
    var textElem = document.getElementById("text3");
    var newText = textElem.replace("BROWN", "RED");
    newText = textElem.replace("FOX", "RABBIT");
    newText = textElem.replace("JUMPED", "LEAPED");
    newText = textElem.replace("LAZY", "SLEEPING");
    textElem.value = newText.value;
}
</script>

代码似乎不起作用。我尝试查看函数是否正确调用以及变量是否为字符串。

编辑：该函数现在显示为：

function myFunction() {
    var textElem = document.getElementById("text3").value;
     newText = textElem.replace("BROWN", "RED");
     newText = textElem.replace("FOX", "RABBIT");
     newText = textElem.replace("JUMPED", "LEAPED");
     newText = textElem.replace("LAZY", "SLEEPING");
     alert(newText); /*I added this to see what the value of newText is*/
    textElem = newText;
}

通过警报，我注意到 newText 与原始文本没有任何变化。 textElem.replace 有什么问题吗？

【问题讨论】：

改用这个：var textElem = document.getElementById("text3").value;
您使用的是元素本身而不是其中的文本。使用var textElem = document.getElementById("text3").value;。

标签： javascript html string replace

【解决方案1】：

你做错了。

replace() 方法返回一个新字符串，其中模式的部分或全部匹配被替换。
此方法不会更改调用它的 String 对象。它只是返回一个新字符串。

因此，在您的情况下，您总是在 textElem 上调用此函数，这不会受到影响，并且您最终会得到上次替换的结果。

 var newText = textElem.replace("BROWN", "RED");//textElem is not changed
 newText = textElem.replace("FOX", "RABBIT");//textElem is not changed and hence you will not get the above replacement

因此，您应该在 newText 上调用 replace 方法并将其分配给自己，如下所示

 var newText = textElem.replace("BROWN", "RED");
 newText = newText.replace("FOX", "RABBIT");//replace and assign to the same string

【讨论】：

另外，最后一行，没有将结果分配回value 属性。
是的@Kami。也无需创建另一个变量 newText。可以继续替换 textElem 并在最后分配给 textarea 的值，例如 document.getElementById("text3").value = replaceText。我省略了它以强调替换方法。

【解决方案2】：

您已将 textElem 设置为对象而不是文本值。您可以改用此代码：

<script type="application/javascript">
function myFunction() {
    var textElem = document.getElementById("text3").value;
    var newText = textElem.replace("BROWN", "RED");
    newText = newText.replace("FOX", "RABBIT");
    newText = newText.replace("JUMPED", "LEAPED");
    newText = newText.replace("LAZY", "SLEEPING");
    document.getElementById("text3").value = newText;
}
</script>

【讨论】：

【解决方案3】：

正如 Guffa 所说：你需要使用元素的文本。不是元素本身。 replace() 函数适用于字符串。因此，您必须将元素的文本保存在变量中。然后，您可以更改文本。替换所有单词后，将新文本设置为元素。

function myFunction() {
        var textElem = document.getElementById("text3");
        var newText = textElem.value;
        newText = newText.replace("BROWN", "RED");
        newText = newText.replace("FOX", "RABBIT");
        newText = newText.replace("JUMPED", "LEAPED");
        newText = newText.replace("LAZY", "SLEEPING");

        textElem.value = newText;
    }

【讨论】：

【解决方案4】：

这是一个替换文本的示例 jsfiddle

正如 Ivan 和 Guffa 提到的，您最初需要使用 textarea 值 property

获取 textElem

var textElem = document.getElementById("text3").value

正如 Amitesh 提到的，您需要在 newText 而不是 textElem 变量上调用 replace 方法。

function myFunction() {
    var textElem = document.getElementById("text3").value;
    var newText = textElem.replace("BROWN", "RED");
    newText = newText.replace("FOX", "RABBIT");
    newText = newText.replace("JUMPED", "LEAPED");
    newText = newText.replace("LAZY", "SLEEPING");
    document.getElementById("text3").value = newText;
}

【讨论】：