CODEWITHSUNDEEP
javascriptjquery
user2675443
user2675443

Reputation:

Why doesn't .trim() really trim?

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.

Upvotes: 2

Views: 463

Answers (4)

Shadow Wizard
Shadow Wizard

Reputation: 66388

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.

Upvotes: 2

Jose Tepedino
Jose Tepedino

Reputation: 1584

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

Upvotes: 0

Guffa
Guffa

Reputation: 700342

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

Upvotes: 1

Adil
Adil

Reputation: 148120

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

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

Upvotes: 1

Related Questions