Display JavaScript Source Programatically
If you are running a JavaScript example page you can use the following function that will take the last script element on the page and print it out in a code tag. It uses JQuery to do the work, so you will need to include that library before using this function.
<script type="text/javascript">//<![CDATA[
function displaySource(name) {
$('<code>'
+ $('#display-' + name).prevAll('script').eq(0).html()
.replace(/^\s*|\s*$/g, '')
.split('\n').slice(1, -1).join('\n')
.replace(/(^|\n) /g, '$1')
.replace(/('[^']*')/g, '<em>$1</em>')
+ '</code>')
.insertAfter('#display-' + name);
}
//]]></script>
The function works by selecting the current script tag and finding all script elements before it. It then selects the first one it finds and outputs the contents to a code tag. It uses a few regular expressions to convert some of the characters to a more human readable format. The function is called like this.
<script type="text/javascript" id="display-test">displaySource("test");</script>
I’ve tested your script with the following code:
maanden = new Array(12);
maanden[0] = ‘januari’;
maanden[1] = ‘februari’;
maanden[2] = ‘maart’;
maanden[3] = ‘april’;
maanden[4] = ‘mei’;
maanden[5] = ‘juni’;
maanden[6] = ‘juli’;
maanden[7] = ‘augustus’;
maanden[8] = ’september’;
maanden[9] = ‘oktober’;
maanden[10] = ‘november’;
maanden[11] = ‘december’;
dagen = new Array(7);
dagen[0] = ‘zondag’;
dagen[1] = ‘maandag’;
dagen[2] = ‘dinsdag’;
dagen[3] = ‘woensdag’;
dagen[4] = ‘donderdag’;
dagen[5] = ‘vrijdag’;
dagen[6] = ‘zaterdag’;
function maakDatum(datum)
{
var dag = dagen[datum.getDay()];
var maand = maanden[datum.getMonth()];
var jaar = datum.getYear();
if (jaar < 100) {jaar = jaar + 2000};
if (jaar < 2000) {jaar = jaar + 1900};
var datumstring = dag + ‘ ‘ + datum.getDate() + ‘ ‘ + maand + ‘ ‘ + jaar;
return datumstring;
}
//<![CDATA[
function displaySource(name) {
$('
'‘)+ $('#display-' + name).prevAll('script').eq(0).html()
.replace(/^\s*|\s*$/g, '')
.split('\n').slice(1, -1).join('\n')
.replace(/(^|\n) /g, '$1')
.replace(/('[^']*')/g, '$1‘)
+ ‘
.insertAfter(’#display-’ + name);
}
//]]>
var aex_pos_color = ‘#008000′; // Green
var aex_neg_color = ‘#FF0000′; // Red
document.write(’Het is vandaag ‘);
document.write(maakDatum(new Date()));
document.write(’.');
displaySource(”test”);
In this case the script only outputs in HTML:
document.write(maakDatum(new Date()));
Two questions:
1. Why is only part of the particular Javascript code snippet shown?
2. Can you also use this script to capture the contents of an external Javascript file?
@Dennis
All the tags in my example where somehow lost …