Removing non-break-spaces in JavaScript

Question

I am having trouble removing spaces from a string. First I am converting the div to text(); to remove the tags (which works) and then I'm trying to remove the "&nbsp" part of the string, but it won't work. Any Idea what I'm doing wrong.

newStr = $('#myDiv').text();
newStr = newStr.replace(/&nbsp;/g, '');

$('#myText').val(newStr);


<html>
  <div id = "myDiv"><p>remove&nbsp;space</p></div>
  <input type = "text" id = "myText" />
</html>

  is an HTML entity - in the .text()'s return it is the same as white space. — Fabrício Matté
– Fabrício Matté, Commented Oct 23, 2013 at 18:28
@FabrícioMatté I don't think so. will be converted to a real non-breaking space. — ComFreek
– ComFreek, Commented Oct 23, 2013 at 18:29
@ComFreek You're right, I expressed myself badly. It won't be converted to U+0020 as my comment indicates but rather U+00A0. — Fabrício Matté
– Fabrício Matté, Commented Oct 23, 2013 at 18:35

Peter Mortensen · Accepted Answer · 2021-08-18 13:45:05Z

27

When you use the text function, you're not getting HTML, but text: the   entities have been changed to spaces.

So simply replace spaces:

var str = " a     b   ", // bunch of NBSPs 
    newStr = str.replace(/\s/g,'');
    
console.log(newStr)

If you want to replace only the spaces coming from   do the replacement before the conversion to text:

newStr = $($('#myDiv').html().replace(/&nbsp;/g,'')).text();

edited Aug 18, 2021 at 13:45

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 23, 2013 at 18:27

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

2 Comments

ComFreek Over a year ago

This also replaces all other kinds of whitespace!

user2014429 Over a year ago

Fantastic, I didn't even know you could nest selectors in jquery. Thank you very much. Great answer

Fabrício Matté · Accepted Answer · 2013-10-23 22:48:18Z

25

.text()/textContent do not contain HTML entities (such as  ), these are returned as literal characters. Here's a regular expression using the non-breaking space Unicode escape sequence:

var newStr = $('#myDiv').text().replace(/\u00A0/g, '');
$('#myText').val(newStr);

Demo

It is also possible to use a literal non-breaking space character instead of the escape sequence in the Regex, however I find the escape sequence more clear in this case. Nothing that a comment wouldn't solve, though.

It is also possible to use .html()/innerHTML to retrieve the HTML containing HTML entities, as in @Dystroy's answer.

Below is my original answer, where I've misinterpreted OP's use case. I'll leave it here in case anyone needs to remove   from DOM elements' text content

[...] However, be aware that re-setting the .html()/innerHTML of an element means trashing out all of the listeners and data associated with it.

So here's a recursive solution that only alters the text content of text nodes, without reparsing HTML nor any side effects.

function removeNbsp($el) {
  $el.contents().each(function() {
    if (this.nodeType === 3) {
      this.nodeValue = this.nodeValue.replace(/\u00A0/g, '');
    } else {
      removeNbsp( $(this) );
    }
  });
}
removeNbsp( $('#myDiv') );

Demo

edited Oct 23, 2013 at 22:48

answered Oct 23, 2013 at 18:38

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

4 Comments

user2014429 Over a year ago

Thanks for the demo, I'll check it out now.

Denys Séguret Over a year ago

The purpose doesn't seem to be to reset the HTML, as it is set as value of an input.

Fabrício Matté Over a year ago

@dystroy Oh yes, I was wondering what was the purpose of the input tag there until now that I saw the .val() call. I'll tidy up this answer a bit then.

user1732055 Over a year ago

The regex is actually more specific than simple spaces.

Collectives™ on Stack Overflow

Removing non-break-spaces in JavaScript

2 Answers 2

So simply replace spaces:

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

So simply replace spaces:

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related