Converting HTML to Javascript By Peter A. Bromberg, Ph.D.

There are a number of instances when we need to convert some HTML into Javascript statements that "write it out". In particular, this can be very useful when we have an ASP page that calls some component or even the page that instantiates a WebClass. If you want to "surround" such pages with HTML for headers, footers, dynamic menus and other neat stuff often the only way you can do it is by "injecting" the HTML into the page at the top or bottom using Javascript includes in the form:

<script language="Javascript" SRC="http://www.myserver.com/includes/thisfile.js"></script>

One of the neatest things about the Javascript SRC tag is that you can use an http-addressable URL for the source, rather than a filesystem i.e."C:\inetpub\wwwroot\includes\thisfile.js" address only. Once you have started trying the teechnique of converting some HTML to Javascript document.write statements, you will begin to find all kinds of new uses for the technique.

It turns out the only tool I had found that could do this was a thing written in VB4.0 called "HTML2VB" and it had some clunky limitations, so I decided to write myself a "Converter" HTML page using script to do this. Here is the simple technique I used:

First, we are going to need 2 "windows" on the converter page - one to paste in the HTML to be converted, and the second to display the result so that we can copy it to the clipboard and do what we want with it.

I used two Textareas and gave them ids so they could be referenced in script, and i also put in a select box so you could say whether or not you wanted your generated Javascript to be surrounded by <script></script> tags or not. So the HTML portion of the page looks like this:

Paste HTML Below and press CONVERT button. Result appears in lower window.<br/> <textarea id=divbegin cols=100 rows=20 name="textarea"></textarea> <br/> <select id=tags name="select" > <option value=yes>Yes</option> <option value=no>No</option> </select> Provide script tags? <input type=Button value="Convert to Javascript!" onClick="Convert()" name="Button"> <br/> <textarea id=divend cols=100 rows=20 name="textarea2"></textarea>

Note that the onClick event of the "CONVERT" button calls a Convert() script function or subroutine. Now for the script portion. The idea here is this: we are going to paste an HTML document into the top window. What we need to do is have an easy way to parse this document, one line at a time, and rewrite it utilizing the Javascript document.write(" ") function. We will also need to be able to escape any double quote characters (and perhaps other characters as well) so that we don't get errors when the document.write statements are called. Then we need to take our entire "converted" document and make it available in the lower window where the user can easily select it, copy to the clipboard, and do what she wants with it.

In VB we have a neat function, "split" that allows us to take a string and "split" it into an array naming the cutoff delimiter of our choice as a parameter of the function call. Well, this is perfect! Since by definition there is a carriage return / linefeed (vbCrLF) at the end of each line of the HTML that we paste into the top window, we can use this as our array delimiter and we will get exactly the contents of each line in each array element! Then we can do whatever processing we need to do by iterating through the elements of the array, concatenating the result for each line to a new string variable that will hold our "result" document.

The code is really simple. I'm going to let my inline comments tell the story, so look at the code:

<script language=VBScript>
' (C)2000 Peter A. Bromberg all rights reserved
' HTML to Javascript converter
Sub Convert()
' first dimension our text variables
Dim stext
Dim entext
' set begin text variable to value of first textarea window's text:
stext = divbegin.innertext
' dim a variable for our array
Dim arStuff
' create the array using the split function, and using the linefeed at the end of each
' line as the array element delimiter
arStuff = split(stext,vbCrLf)
' if they chose script tags in the select control, write beginning script tag
if tags.value="yes" Then
entext = "<SCRIPT>" & vbCRLF
end if
' now iterate through the array
for i = 0 to Ubound(arStuff)
' here we are using the "Replace" function to escape double quotes. You can also put other custom replacements
' here, with a new line for each set of replacements on this element
arStuff(i) = "document.write(""" & Replace(arStuff(i),chr(34), "\" & chr(34)) & """);"
' here we are escaping any <SCRIPT> tags that are actually in the HTML by separating them into two elements
' so the script parser won't choke
arStuff(i) = Replace(LCase(arStuff(i)),"script>","scr" & chr(34) & "+" & chr(34) & "ipt>")
' note below that we also add an extra vbCrLF at the end of each converted line. This helps avoid page errors
' parsing the script, and also makes it easier to read when we "view source"
entext = entext & arStuff(i) & vbCrLF
next
' again, if they wanted script tags, write closing tag
if tags.value="yes" then
entext = entext & "</SCR" & "IPT>" & vbCrLf
end if
' populate the lower window with our result
divend.innertext = entext
end Sub
</script>

And Voila! We have a HTML - to Javascript converter!

dowload the code that accompanies this article

Peter Bromberg is an independent consultant specializing in distributed .NET solutions Inc. in Orlando and a co-developer of the
NullSkull.com developer website. He can be reached at info@eggheadcafe.com