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?

Matt S · Accepted Answer · 2017-09-09 22:16:13Z

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 9, 2017 at 22:16

user5393970

answered May 24, 2010 at 15:49

Matt S

15.5k6 gold badges60 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

+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 (thinkweb2.com/projects/prototype/whitespace-deviations), but that's a niggle. :-)

user113716 Over a year ago

You're missing your g (global indicator).

Amr Elgarhy Over a year ago

@patrick Yes, after adding the 'g' (global indicator), things worked perfect.

Adam Grant · Accepted Answer · 2016-11-16 17:17:01Z

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, 2016 at 17:17

answered May 7, 2015 at 21:08

Adam Grant

13.2k10 gold badges61 silver badges65 bronze badges

6 Comments

Pier-Luc Gendreau Over a year ago

You can remove leading and trailing whitespace with .trim()

Adam Grant Over a year ago

Unfortunately, trim() is not bulletproof. Try it on the string I provided above.

Pier-Luc Gendreau Over a year ago

Seems to work over here and looking at the polyfill on MDN, it even looks for BOMs and non-breaking spaces! It does require IE9+ though.

Pier-Luc Gendreau Over a year ago

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

Adam Grant Over a year ago

Makes sense. Thanks!

|

Peter Bailey · Accepted Answer · 2010-05-24 15:52:04Z

4

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, ' ' ) )

answered May 24, 2010 at 15:52

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

Comments

Thivan Mydeen · Accepted Answer · 2016-05-24 06:12:29Z

-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, 2016 at 6:12

answered May 23, 2016 at 6:29

Thivan Mydeen

1,5811 gold badge11 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to remove extra white spaces using javascript or jquery?

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related