How to trim text inside textarea

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

Does this answer your question? [jQuery preventing postback on button click](https://stackoverflow.com/questions/887923/jquery-preventing-postback-on-button-click) — Heretic Monkey, May 21 '20 at 20:01
Two problems; 1. clicking a button inside a form will submit the form by default. 2. `result.trim()` returns the result of the trim operation, so you'll need to set `textContent` to the result. — Heretic Monkey, May 21 '20 at 20:02
@Barmar But certainly part of it, because even if you fix the problem of throwing away the `trim()` result, it's not going to stick around... — Heretic Monkey, May 21 '20 at 20:03
@HereticMonkey It doesn't need to stick around, the corrected input gets submitted in the form. — Barmar, May 21 '20 at 20:04
@Barmar Assuming that's what the OP wants; "...and it returns nothing". — Heretic Monkey, May 21 '20 at 20:06

Ashish · Answer 1 · 2020-05-21T20:14:19.210

2

It is failing because, .trimdoes 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>

edited May 21 '20 at 20:14

answered May 21 '20 at 20:01

Ashish

4,206
16
45

this doesn't actually trim the text. Did you run your snippet? – ADyson May 21 '20 at 20:06
Thanks for pointing out. I have updated my answer. But my point was not how to read and set value in text area. I wanted to explain how `.trim` works. Thanks anyways. – Ashish May 21 '20 at 20:16
@ADyson please remove the -ve score. If you think, I have resolved the issue. Thanks :) – Ashish May 21 '20 at 20:23
Thanks. P.S. the original question said " I would like to trim the text inside it and display the result.", so to answer it fully you really have to implement all of that I think. Now your code does that, so have an upvote. I think our answers are pretty similar now. – ADyson May 21 '20 at 21:40

ADyson · Answer 2 · 2020-05-21T20:08:43.663

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.

score 0 · Answer 3 · answered May 21 '20 at 20:00

0

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

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

answered May 21 '20 at 20:00

TylerR909

98
1
7

score -1 · Answer 4 · answered May 21 '20 at 20:02

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.

How to trim text inside textarea

4 Answers4