Question

I’m writing a little single page app (using knockout.js :-)) whereby i have a series of examples of javascript code. this code is wrapped in a function and i call toString on the function to show the source code in the browser.

on the whole everything works great! but because of the nature of the examples (as learning exercises), they contain some code which might normally be considered redundant. for example, this code is an example which demonstrates false-y values in javascript:

var example = function() {
    if("" || 0 || null || undefined || NaN) {
     console.log("i'll never be logged");
    }
    else {
     console.log("i'll always be logged");
    }
};

in firefox, if i call example.toString() the string returned does not contain 0, null or "" – so my example isn’t accurately portrayed! in IE however, the aforementioned values are contained in the result of the toString() call, but the string is just a single line – no indentation or anything!

So what i was wondering is

1. more likely solution: anybody knows a
JS-implemented code highlighter that will handle the
formatting/indentation for me, if given a long, single-line string
of javascript code. Or a highlighter that allows simple extensibility to deliver this kind of feature

1. less likely solution: if anybody knows a way to get accurate results in FF, or properly

any help will be much appreciated, it’s really frustrating not getting the results i want to make the app perfect 🙂

EDIT: seems i was being dense, IE does format correctly, it’s just with the basic examples i was working with when building the app i declared the functions as a single line, so the formatting was carried over exactly! So for once in the history of the web, IE does exactly what you expect with no issues 🙂 Would be nice if someone could offer a reason for firefox dropping certain parts of the code from the string representation

Answer 1

Firstly, script engines are allowed to optimise code. If the compiler sees branches that will never execute, it may trim them.

Secondly, Function.prototype.toString is implementation dependent:

ECMA–262 15.3.4.2 Function.prototype.toString ( )

An implementation-dependent representation of the function is
returned. This representation has the syntax of a FunctionDeclaration.
Note in particular that the use and placement of white space, line
terminators, and semicolons within the representation String is
implementation-dependent.

If you want the script content to be reasonably formatted, get a reference to the script element and use its textContent or innerText (whichever is supported).

But if you want properly formatted code, search for “javascript pretty print” or do it yourself in the HTML.