How to remove extra white spaces using javascript or jquery?

Question

I got HTML element contains this:

  <!--Product Style-->  <div style="float: right; padding-top: 4px; padding-bottom: 5px;">  P6C245RO </div>  <div style="text-transform: uppercase; font-weight: bold; padding-top: 4px; padding-bottom: 5px;">  Style </div>  <div style="clear: both; border-top: 1px solid rgb(216, 216, 216); padding-top: 4px;">  <!--Product Description-->  <div style="font-size: 11px ! important;"></div>  <div style="background: url(&quot;http://ii.armaniexchange.com/ArmaniExchange/images/en_US/global/globalgraphics/bullet.gif&quot;) no-repeat scroll 0pt 4px transparent; padding-left: 12px;">fine tonal striped fabric</div>  <div style="background: url(&quot;http://ii.armaniexchange.com/ArmaniExchange/images/en_US/global/globalgraphics/bullet.gif&quot;) no-repeat scroll 0pt 4px transparent; padding-left: 12px;">epaulettes and sleeve tab</div>  <div style="background: url(&quot;http://ii.armaniexchange.com/ArmaniExchange/images/en_US/global/globalgraphics/bullet.gif&quot;) no-repeat scroll 0pt 4px transparent; padding-left: 12px;">metal logo plate on the chest pocket</div>

When i read it using jquery i get the .text() contains a lot of spaces and /n in between the text but without the html tags.

How to remove all these white spaces and return the clean text using jquery or pure javascript?

score 68 · Accepted Answer · edited Sep 09 '17 at 22:16

68

element.text().replace(/\s+/g, " ");

This uses a regular expression (/.../) to search for one or more (+) whitespace characters (\s) throughout the element's text (g, the global modifier, which finds all matches rather than stopping after the first match) and replace each with one space (" ").

edited Sep 09 '17 at 22:16

answered May 24 '10 at 15:49

Matt S

14,976
6
57
76

+1 I misread the question. That will work great for spaces and newlines (what the OP said he needed). Be aware that some browsers don't quite implement `\s` correctly once you get into non-ASCII whitespace (http://thinkweb2.com/projects/prototype/whitespace-deviations/), but that's a niggle. :-) – T.J. Crowder May 24 '10 at 15:52
1

You're missing your `g` (global indicator). – user113716 May 24 '10 at 15:53
@patrick Yes, after adding the 'g' (global indicator), things worked perfect. – Amr Elgarhy May 24 '10 at 16:02

Adam Grant · Answer 2 · 2016-11-16T17:17:01.650

23

For the string

"    this  is my   string       "

You probably want to make the excessive spaces single spaces, but remove the leading and trailing spaces entirely. For that, add another .replace

s.replace(/\s+/g, " ").replace(/^\s|\s$/g, "");

For

"this is my string"

Update

s.replace(/\s+/g, " ").trim()

Thanks, @Pier-Luc Gendreau

edited Nov 16 '16 at 17:17

answered May 07 '15 at 21:08

Adam Grant

12,477
10
58
65

You can remove leading and trailing whitespace with `.trim()` – Pier-Luc Gendreau May 19 '16 at 15:55
Unfortunately, `trim()` is not bulletproof. Try it on the string I provided above. – Adam Grant May 19 '16 at 22:41
Seems to work over here and looking at the [polyfill on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill), it even looks for BOMs and non-breaking spaces! It does require IE9+ though. – Pier-Luc Gendreau May 19 '16 at 22:52
Safari and Chrome (latest) are giving me extra spaces between the words. `"this is my string"` – Adam Grant May 20 '16 at 01:08
3

Oh yes, like I said, it removes leading and trailing whitespace so it leaves you with a slightly cleaner implementation. `s.replace(/\s+/g, " ").trim()` – Pier-Luc Gendreau May 20 '16 at 16:11
1

Makes sense. Thanks! – Adam Grant Nov 16 '16 at 17:16
This was what I needed. Thank you! – J86 Feb 05 '17 at 21:57

score 4 · Answer 3 · answered May 24 '10 at 15:52

You can remove all instances of congruent whitespace and newlines like so

// Note: console.log() requires Firebug

var str = '    this  is \n    some text \r don\'t \t you    know?   ';
console.log( str );

str = str.replace( /[\s\n\r]+/g, ' ' );
console.log( str );

Then to clean it up and apply it to your jQuery

$.trim( $element.text().replace( /[\s\n\r]+/g, ' ' ) )

Thivan Mydeen · Answer 4 · 2016-05-24T06:12:29.043

-1

This code working fine, Here I have remove extra white spaces in TextEditor.

var htmlstring =   $("#textareaCode").html().replace(/(&nbsp;)*/g, "");

for more Deatils refer: http://www.infinetsoft.com/Post/How-to-remove-nbsp-from-texteditor-in-jQuery/1226#.V0J-2fl97IU

edited May 24 '16 at 06:12

answered May 23 '16 at 06:29

Thivan Mydeen

1,461
11
7

How to remove extra white spaces using javascript or jquery?

4 Answers4

Linked