如何修剪文本区域内的文本

Question

I have a textarea, I would like to trim the text inside it and display the result.

Example:

" 1234 "

becomes

"1234"

However for some reason it doesn't trim the text, and it returns nothing.

HTML

<form id="form1">
 <textarea id="text-area" rows="20" cols="50" placeholder="text here..."></textarea><br>        
 <button class="button" onclick="myFunc()">Sumbit</button>
</form>

JS

function myFunc(){

    var getText = document.getElementById("text-area").textContent;
    var result = getText;

    result.trim();

    document.getElementById("text-area").textContent = result;
}

No JQuery please

Answer 1

It is failing because, .trim does not mutates the actual string. It returns a new string. All you need to do is result = result.trim();

 function myFunc(){ var result = document.getElementById("text-area").value; console.log(result); result = result.trim(); console.log(result); document.getElementById("text-area").value = result }

 <textarea id="text-area" rows="20" cols="50" placeholder="text here..."></textarea> <br> <button class="button" onclick="myFunc()">Sumbit</button>

Answer 2

You need to use the value property, not textContent . And trim() returns a new string rather than modifying the old one. Also you can make the code much more concise.

Demo:

 function myFunc() { var ta = document.getElementById("text-area"); ta.value = ta.value.trim(); }

 <textarea id="text-area" rows="20" cols="50" placeholder="text here..."></textarea><br> <button class="button" onclick="myFunc()">Submit</button>

(Note: I removed the form tags so it won't submit the form, and so you can see the result of the trim operation when you press Submit. I also corrected the typo - Sumbit should be Submit .

Answer 3

result.trim() returns a new string, it doesn't modify the existing one.

    document.getElementById("text-area").textContent = result.trim();

Answer 4

Try this instead:

function myFunc(){

    var getText = document.getElementById("text-area").textContent;
    document.getElementById("text-area").textContent = getText.trim();
}

trim method doesn't affect the string it was called on. It returns the trimmed string.