CODEWITHSUNDEEP
javascripthtmlstringreplace
James S
James S

Reputation: 151

Use of string.replace() in javascript to change content of a textarea

I have a textarea with some text (suppose it says THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG). When I press a button, the content of the textarea changes to replace the word "BROWN" with another word (eg "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>

The code does not appear to work. I have tried seeing if the function was caling properly and whether variables were strings.

EDIT: The function now reads:

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

Through the alert, I noticed that newText does not change from the original. Is there something wrong with the textElem.replace ?

Upvotes: 1

Views: 410

Answers (4)

svnm
svnm

Reputation: 24328

Here is an example replacing the text jsfiddle

As Ivan and Guffa mentioned you need to initially get the textElem using the textarea value property

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

As Amitesh mentioned you need to invoke the replace method on newText rather than on the textElem variable.

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

Upvotes: 0

Franz Deschler
Franz Deschler

Reputation: 2574

As Guffa said: you need to use the text of the element. Not the element itself. The replace() function works on strings. So you have to save the text of the element in a variable. Then you can change the text. After all words are replaced, set the new text to the element.

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

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

you have set textElem as an object not a text value. You may use this code instead:

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

Upvotes: 1

Amitesh
Amitesh

Reputation: 1517

You are doing it incorrectly.

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.
This method does not change the String object it is called on. It simply returns a new string.

Thus in your case you are always invoking this function on textElem which will not get affected and you end up getting the result of last replacement.

 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

Therefore You should invoke the replace method on newText and assign to itself like below

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

Upvotes: 5

Related Questions