remove whitespace in table with image

Question

I have html like this.

<td id="foo">
    <img src="foo.png" /> <img src="foo.png" /> <img src="foo.png" />&nbsp; 
</td>

The HTML above contains whitespace and also  ,
I want to remove that using jQuery.
How to do that?

already tried with this script but not work.

$('#foo').text().replace(/ /g,'');

Possible dup http://stackoverflow.com/questions/1539367/remove-whitespace-and-line-breaks-between-html-elements-using-jquery — elclanrs, Apr 11 '12 at 07:37

voigtan · Accepted Answer · 2012-04-11T07:51:44.913

1

I think you need to use contents() and then filter out all the textNodes that is a plain space

var nodes = $("#foo").contents().filter(function() {
    return this.nodeType == 3 && /^(\s|&nbsp;)*$/.test(this.nodeValue);
}).remove();

//console.log($("#foo").html());

something like that maybe? if you only got images then you can just remove && this.data == " " part

I have edited it looks for spaces and now, jsfiddle test: http://jsfiddle.net/Rurn2/

edited Apr 11 '12 at 07:51

answered Apr 11 '12 at 07:33

voigtan

8,953
2
29
30

you may want to add for linebreaks: `/^(\s| |\n)*$/` also to the regex if you also want empty spaces+html spaces and newlines to be removed \n for example wont be removed now – voigtan Apr 11 '12 at 08:16

score 0 · Answer 2 · answered Apr 11 '12 at 07:24

0

Have you tried this: $('#foo').html($('#foo').html().replace(/ /g,''));? your code will return a white-space-less string, based on the text in the element. But if you want to overwrite the text of the element, you have to enter the new string in between the braces.

answered Apr 11 '12 at 07:24

Elias Van Ootegem

74,482
9
111
149

1

You can't remove all whitespace from the innerHTML because this will remove the whitespace from inside the HTML tags. – jfriend00 Apr 11 '12 at 07:54
nips, forgot about that white-space :D... silly. I'd suggest using the other answers here matching html entities, or create a temporary element (`document.createElement`), fill it with the html, so that the entities are converted to spaces, and use that parsed string. It will require a bit more code that way, but it's (generally speaking) a safer way to decode/encode html entities. If all you want is ` `, the answer jfriend00 provided will work just fine, though – Elias Van Ootegem Apr 11 '12 at 08:09

Claude Vedovini · Answer 3 · 2012-04-11T08:43:15.527

0

Try this:

var html = '>' + $('#foo').html() + '<';
html = html.replace(/&nbsp;/g, '').replace(/>\s+</gm, '><');
$('#foo').html(html.substring(1, html.length-1));

edited Apr 11 '12 at 08:43

answered Apr 11 '12 at 07:46

Claude Vedovini

2,421
21
19

that will remove the spaces from img and src on the img-elements – voigtan Apr 11 '12 at 07:50
You can do it this way because this removes whitespace from inside the HTML tags too. – jfriend00 Apr 11 '12 at 07:52
yeah right, it's just a matter of changing the regex a bit, I updated the answer – Claude Vedovini Apr 11 '12 at 07:54
Now it doesn't remove whitespace that comes before the first tag or after the last tag and your regex isn't correct either. – jfriend00 Apr 11 '12 at 08:02
Note : It's working when not have any string insided only. and +1 for you :D – OammieR Apr 11 '12 at 09:02

jfriend00 · Answer 4 · 2012-04-11T07:56:47.920

The safest way is to find all the text nodes and compare their nodeValue to exactly what you're looking for and remove the ones that contain only whitespace. Doing operations on the innerHTML directly is fraught with difficulties because you have to make sure you aren't messing up things inside the actual tags (e.g. whitespace that is supposed to be there). Operating on the text nodes only uses the browser to keep you safe. You can find all the text nodes that match your condition like this:

$("#foo").contents().filter(function() {
    if (this.nodeType == 3) {
        return(this.nodeValue.replace(/\s|&nbsp;/g, "") == "");
    }
    return(false);
}).remove();

You can see it work here: http://jsfiddle.net/jfriend00/RNTbT/

FYI, this version will even handle text nodes that are a combination of whitespaces and  . It works by removing all whitespace and   and then seeing if there's anything left. If not, then it's a whitespace-only text node so it should be removed.

remove whitespace in table with image

4 Answers4