Question

I am theming a JSP app that has a table header with dynamically generated data (I think it’s called Jasper Reports?) and I don’t have access to any template files for the output. I’ve gotten things to look pretty good with a little JQuery foo.

But I am still having one issue, there seems to be white space in some span tags within the headers td > spans:

<td><span> My Heading</span></td>

Note the white space before the word “My”.

I found this nifty bit of code to trim white space but the issue is that it takes all white space out.

var pane = $('span');
pane.val($.trim(pane.val()).replace(/\s*[\r\n]+\s*/g, '\n')
    .replace(/(<[^\/][^>]*>)\s*/g, '$1')
    .replace(/\s*(<\/[^>]+>)/g, '$1'));

So now using this code, it ends up as:

   <td><span>MyHeading</span></td>

Ideally I would like to modify it so just the first bit of white space is removed but none after that.

Answer 1

Use .text() to get the string value.

var pane = $('span');
pane.html($.trim(pane.text()));

http://jsfiddle.net/gaboesquivel/cHevR/

Edit:
the above code won’t work as it overwrites the text if it there’s more than 1 span in the document

You need to iterate the array of spans

//array of all the spans that are children of a td element
var spansArray = $('td > span');
//iterate the array
spansArray.each(function() {
    var $this = $(this);
    $this.html($.trim($this.text()));
});​

http://jsfiddle.net/gaboesquivel/cHevR/2/