在JavaScript中使用string.replace（）更改文本區域的內容

Question

我有一個文本區域，上面有一些文字（假設它說“快速棕色狐狸躍過懶惰的狗”）。 當我按下一個按鈕時，文本區域的內容發生變化，將單詞“ 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是否有問題？

Answer 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

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

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

Answer 4

這是一個替換文本jsfiddle的示例

正如Ivan和Guffa所述，您首先需要使用textarea值屬性來獲取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;
}