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.

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.

• javascript
• jquery
• html

• just the first bit of white space Do you mean just the first space leaving other intact? – Cheery Commented Feb 16, 2012 at 0:21
• Cheery, yes, just the very first white space right after <span> – Danny Englander Commented Feb 16, 2012 at 0:37
• Try this pane.text(pane.text().replace(/^\s/, '')); – Cheery Commented Feb 16, 2012 at 0:40

3 Answers 3

Use .text() to get the string value.

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

http://jsfiddle/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/gaboesquivel/cHevR/2/

Try this:

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

That should trim any whitespace at the beginning of the string. Alternatively, you can make it trim trailing whitespace using a slightly different expression. See here:

http://www.toptip.ca/2010/02/javascript-trim-leading-or-trailing.html

Here's the example so you can see how it works: http://jsfiddle/CkMPH/

For the only first space to be removed you need that code

var pane = $('span');
pane.text(pane.text().replace(/^\s/, ''));

http://jsfiddle/P9jSL/