Why doesn't .trim() really trim?

Question

I think trim() doesn't store the trimmed value.

I apply trim to the result before the user submits their string and it works, it displays properly by removing the extra space. But if I retrieve the trimmed value back, it gives me the original of user's input, it doesn't remove space.

Before I retrieve the user input from the input field, I added trim():

input = $("<input type='text'>").val(txt);
input.trim()

It doesn't work.

Are you sure that's how you're retrieving the input? – BoltClock Sep 08 '13 at 14:53 — BoltClock, Sep 08 '13 at 14:53
Strings are immutable. Also, that's a jQuery object. – SLaks Sep 08 '13 at 14:54 — SLaks, Sep 08 '13 at 14:54
Your input tag is missing a `>` – Musa Sep 08 '13 at 14:59 — Musa, Sep 08 '13 at 14:59

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

You should assign it back otherwise it's meaningless.

txt = txt.trim();
input = $("<input type='text'").val(txt);

Note: the above is using the native JavaScript trim() method, assuming txt is plain string. If your site should support IE8 and below, refer to this answer to see how to add such support.

Update, based on OP comments. Turns out the request is to truncate all inner spaces, same way HTML is doing. To achieve this, plus better support for the trim change this line:

var text = $(this).text();

To those three:

var text = $.trim($(this).text());
while (text.indexOf("  ") > 0)
    text = text.replace("  ", " ");

Updated fiddle.

edited May 23 '17 at 11:59

Community

1
1

answered Sep 08 '13 at 14:53

Shadow The GPT Wizard

66,030
26
140
208

That's the `String.trim` method, not the `jQuery.trim` method that the OP is trying to use. – Guffa Sep 08 '13 at 15:00
no wonder it wont work when I type txt.trim() instead of txt = txt.trim(); what is the differences? – Sep 08 '13 at 15:01
@Guffa good point, clarified this in my post. Final result should be the same though. – Shadow The GPT Wizard Sep 08 '13 at 15:17
@MerraleeMandel it should work, unless you're using IE8 or below? Also, what exactly is `txt`? – Shadow The GPT Wizard Sep 08 '13 at 15:18
@MerraleeMandel: The difference is that `String.trim` and `$.trim` are two different methods that does the same thing in different ways. The built in (IE9+) `String.trim` method is applied to a string, while the jQuery `$.trim` method takes the string as a parameter. – Guffa Sep 08 '13 at 15:28
txt = $this.find('.items').text() – Sep 08 '13 at 15:30
@MerraleeMandel can't see reason why it won't work. Try reproducing on jsfiddle and I'll take a look – Shadow The GPT Wizard Sep 08 '13 at 15:32
@MerraleeMandel the fiddle is working just fine and there is no trim and not a trace of the code you posted in the question. How is it related or relevant? **What is the problem**? – Shadow The GPT Wizard Sep 08 '13 at 19:34
u double click the text to edit, it may return item[space][space][space][space][space][space] h – Sep 09 '13 at 11:37
@MerraleeMandel think I finally got it, you don't mean trim at all. Anyway, see my edit. – Shadow The GPT Wizard Sep 09 '13 at 12:04
THX!! so isn't that call trim? – Sep 09 '13 at 13:30
@MerraleeMandel trim is removing the spaces in the beginning and the end of string. What you were after is called "Space normalization", see [here](http://en.wikipedia.org/wiki/Trim_(programming)). :) – Shadow The GPT Wizard Sep 09 '13 at 13:40

score 1 · Answer 2 · answered Sep 08 '13 at 14:53

1

Apply trim() to string i.e. txt but not to jQuery object (textbox control)

input = $("<input type='text'").val($.trim(txt));

answered Sep 08 '13 at 14:53

Adil

146,340
25
209
204

not working.. more of my code before txt txt = $this.find('.items').text(); – Sep 08 '13 at 15:05

score 1 · Answer 3 · answered Sep 08 '13 at 14:57

The trim method is a static method, i.e. you access it from the jQuery object but it acts on the data that you send into it, and it returns the result.

To get the data from the input, trim it, and put it back:

input = $("<input type='text'>").val(txt);
input.val($.trim(input.val()))

You probably want to just trim it before putting it in the input in the first place:

input = $("<input type='text'>").val($.trim(txt));

Jose Tepedino · Answer 4 · 2013-09-08T15:54:51.890

The trim method does not change the original string. You need to attribute its result to a variable to get the result.

------------------------------------------

Please notice the description at:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

Description

The trim method returns the string stripped of whitespace from both ends. trim does not affect the value of the string itself.

------------------------------------------

Besides that, please let me suggest you to refer to the input field by its ID (eg: $("#texto"))

<!doctype html>
<html lang="en">
<head>
  <meta charset="iso-8859-1">
  <title>jQuery.trim demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
   $(document).ready(function(){
     var txt = "         lots of spaces before and after         ";
     alert('pause');
     $("#texto").val("'" + txt.trim() + "'"); // ok
    // $("<input type='text'>").val("'" + txt.trim() + "'"); // nok
   });
 </script>
</head>
<body>
  <input type='text' id="texto" size='40' />
</body>
</html>

(example adapted from the page http://api.jquery.com/jQuery.trim/)

Why doesn't .trim() really trim?

4 Answers4

Linked