see spacing/new line characters

Question

How can I preview a text with the new line characters represented in a way I can actually see them?

for example instead of:

bla bla
bla
...

I want to see something like

bla bla[\n]
bla[\r]
...

but I want to see what type of character is it, because some are \\n and some are \\r...

the reason for this is that I have two pieces of text that are apparently different when processed by a javascript syntax-highlighting function, but they actually have the same content.

I want to see if they really have different end of line characters

Answer 1

You can put your code in a pre element and use this code

$('pre').hover( 
    function(){
        var $this = $(this);
        var txt = $this.text();
        $(this).html( txt.replace('\n','[\\n]\n','g').replace('\r','[\\r]\r','g') );
    },
    function(){
        var $this = $(this);
        var txt = $this.text();
        $(this).html( txt.replace('[\\n]\n','\n','g').replace('[\\r]\r','\r','g') );
    }
 );

it will show the \\n and \\r when you hover over the pre element.

Example at http://jsfiddle.net/gaby/hYnbS/

Answer 2

Javascript:

function raw(str){
    return str.replace(/\t/g,'\\t').replace(/\r\n/g,'\\r\\n').replace(/\r/g,'\\r').replace(/\n/g,'\\n');
}

If you don't care about \\t , just remove it above.