Display JavaScript Source Programatically

23rd March 2009 - 1 minute read time

Note: This post is over a year old and so the information contained here might be out of date. If you do spot something please leave a comment and I will endeavour to correct.

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[// ><!--
//<![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')
  + '
//--><!]]>
</script>

') .insertAfter('#display-' + name); } //]]>

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">
<!--//--><![CDATA[// ><!--
displaySource("test");
//--><!]]>
</script>

JavaScript

Add new comment

Related Content

Inspecting And Reusing jQuery Events

Adding events to HTML elements with jQuery is pretty simple, but I found that extending those events wasn't an easy task. I was faced with an issue where I had some third party code that performed an action on an element, and I needed to add an event and call the same handler from that event. As this was within a CMS I had limited scope to just add my new event to the existing code, so I needed a way of pulling out the current jQuery events and then calling that event handler separately. This post looks at how I accomplished this.

Langton's Ant In JavaScript

After looking at Conway's game of life I have been looking at other forms of cellular automata. This lead me to discover Langton's ant, which is a different kind of cellular automata where an agent (namely an ant) is used to turn the squares on or off as it travels around a grid.

The rules of Langton's ant are quite simple. The ant simply follows two rules as it moves around the grid.

Adventures In FizzBuzz

Tests for programmers in an interview process are not uncommon. For the last couple of years I have asked a quick pre-interview question to junior developers to see what sort of stuff they come up with.

As I don't want to set any developer a task that will take longer than absolutely needed I opted to set a very simple task for them. Commonly known as "FizzBuzz", this task is as follows.

Checking If An Element Exists In jQuery

To verify that an element exists in the DOM you just need to use the .length property of a jQuery lookup. If the element is there then the number of elements found will be greater than 0.

Local And Global Variables In JavaScript

I have seen a lot of this sort of thing, so though I would put together a quick lesson in JavaScript variable scope. There are some important differences between local and global variables in JavaScript that will cause grey hairs if you don't know what's going on.

Prevent Enter Key Submitting Forms With JQuery

A common practice that some users have is to press the enter key when they are filling in forms on the web. This might be when they are just moving to the next field, but the trouble is that this will submit the form.

To prevent this from happening you can simply stop the form being submitted if the enter key had been pressed. This is done by binding a JQuery event to the input elements of the form and returning false if the key pressed is enter, which has the keyCode value of 13. We also include a call to the JQuery method preventDefault() to stop the event propagating.