Before you mark this as already asked, just read on!

So I have been searching the web (including StackOverflow) for a way to replace all tabs in an element (more specifically an xmp element) with four spaces. The purpose of this is to show code.

If you visit .html, you will see my code. The first "totally test code" has one tab before it. The second has four spaces. The four spaces look much more reasonable than the tab. I need it to make all tabs into four spaces so that if someone decides to space with tabs, it will fix it for them rather than making the user do it themselves.

Another problem is that the XMP counts the first line of the code as blank and moves everything down. This can only be solved by doing this:

<xmp><div>

Rather than the normal:

<xmp>
<div>

Basically I need this script to replace tabs with 4 spaces each and remove the first "enter" in the whole thing.

I am already using this to fix the tabs but it doesn't seem to work.

$('xmp').html(function() {
    return this.innerHTML.replace(/\t/g, ' ');
});

I just really need this to work and have driven my self insane trying to fix this. I'm pretty sure that this is a really dumb mistake. I expect that because I am a jQuery noob. Is there a better way than using XMP? I'm open to anything and any help at all is super appreciated.

Best Regards, Emanuel

Before you mark this as already asked, just read on!

So I have been searching the web (including StackOverflow) for a way to replace all tabs in an element (more specifically an xmp element) with four spaces. The purpose of this is to show code.

If you visit http://synergytechhosting./codeshower.html, you will see my code. The first "totally test code" has one tab before it. The second has four spaces. The four spaces look much more reasonable than the tab. I need it to make all tabs into four spaces so that if someone decides to space with tabs, it will fix it for them rather than making the user do it themselves.

Another problem is that the XMP counts the first line of the code as blank and moves everything down. This can only be solved by doing this:

<xmp><div>

Rather than the normal:

<xmp>
<div>

Basically I need this script to replace tabs with 4 spaces each and remove the first "enter" in the whole thing.

I am already using this to fix the tabs but it doesn't seem to work.

$('xmp').html(function() {
    return this.innerHTML.replace(/\t/g, ' ');
});

I just really need this to work and have driven my self insane trying to fix this. I'm pretty sure that this is a really dumb mistake. I expect that because I am a jQuery noob. Is there a better way than using XMP? I'm open to anything and any help at all is super appreciated.

Best Regards, Emanuel

• javascript
• jquery
• replace
• tabs
• spaces

Share Improve this question Follow edited Jan 30, 2015 at 15:04 Emanuel Elliott asked Jan 30, 2015 at 1:24 Emanuel ElliottEmanuel Elliott 28311 gold badge44 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

your script is almost correct, just need to replace with 4 spaces instead of 1

and to remove the first newline, just remove the first character from the string

$('xmp').html(function() {
    return this.innerHTML.substring(1).replace(/\t/g, '    ');
});

To trim any leading and trailing whitespace, use jQuery.trim. To re-indent the code from tabs to spaces, without affecting tabs that appear inside the line of code, match the start of the string (^), and use the multi-line flag (m).

$('xmp').html(function(){
    return $.trim($(this).html()).replace(/^\t/gm, '    ');
});

Working Example:

$('xmp').html(function(){
    return $.trim($(this).html()).replace(/^\t/gm, '    ');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<xmp>
<div>
	<p>totally test code</p>
    <p>totally test code</p>
    <p>totally tab	code</p>
</div>
</xmp>

The following snippet should work well enough:

$('xmp').html(function () {
    return $.trim($(this).html()).replace(/^\t/gm, '    ');
});

It will replace any tab characters at the start of a line with four spaces. Because the regex is anchored with ^, it should not affect anything in the middle of a line.

But here's something you may not have considered: What if the original author of the code had 8-space tabs on the screen, but indented the code with a multiple of 2 or 4 spaces intermixed with those tabs? If the author wanted to indent a block to, say, column 12, they would do something like [Tab] + [4 spaces]. It sounds crazy, but I've seen some projects (Gallery2 es to mind) that use a bination of tabs and spaces to finely control the indentation. See, the \t character doesn't literally mean "8 (or 4) spaces", it means "jump right until the next column that is a multiple of 8 (or 4)." Because of this, [Tab] + [Tab] generally renders the same on-screen as [Tab] + [2 spaces] + [Tab], yet this regex will convert it very differently.

There is a GNU utility that ships with *nix called expand that is sort of the Swiss Army Knife of converting tabs to spaces. The source is in C, but it's short and there are some interesting insights into just how many edge cases a general-purpose tab-to-space solution could have. http://git.savannah.gnu/cgit/coreutils.git/plain/src/expand.c

If you are trying to show spaces in a webpage you will also need to replace the spaces with nbsp First replace tabs with the number of spaces you want, then replace spaces with nbsp

//replace tabs with spaces
msg=msg.replace(/\t/g, '     ');
//replace spaces with  
msg=msg.replace(/ /g, '\u00a0');