#1
  1. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16

    HTML-to-JavaScript Convertor


    Went fishing around for a convertor script the other day and couldn't find one I liked...so I made one.
    Create your own 'client-side-includes' by pasting in the converted code. Let me know where the bugs are if you use it.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    h2 {
    display: inline;
    font: bold 28px "times new roman", serif;
    color: #ffffff;
    }

    .CB {
    font: 200 12px "arial black", sans-serif;
    color: #e0f0ff;
    text-decoration: underline;
    }

    input.button {
    width: 56px;
    font: 200 italic 12px monospace;
    margin-top: 4px;
    }

    #convertor {
    width: 90%;
    height: 500px;
    background: #c0c0c0;
    margin-top: 10px;
    padding: 12px;
    border: 2px black solid;
    }

    #plinth {
    width: 186px;
    padding: 0px 0px 3px 0px;
    background: #000000;
    border: 2px #c0c0c0 solid;
    }

    body {
    text-align: center;
    background: teal;
    }

    </style>
    <script type="text/javascript" language="javascript">

    var numChars = null;
    var strname = null;
    var delim = '\\'';
    var Qesc = /'/g;
    var Qrepl = '\\\\'';
    var prolog = '<!-- \n\n/*\n * JS include\n * Save as filename.js\n';
    prolog += ' * Embed in HTML file at point of code insertion using:\n';
    prolog += ' * <script type="text/javascript" language="javascript" src="filename.js"></' + 'script>\n */\n\n';

    function convert(oTextarea) {
    var temparray = [], tempstr = new String(oTextarea.value);
    tempstr = tempstr.replace(Qesc, Qrepl).replace(/[ \t]+/g, ' ').split(/\r\n/g).join(' ');
    for (var s=0; s<Math.ceil(tempstr.length/numChars); ++s)
    temparray[temparray.length] = tempstr.substring(numChars * s, numChars * (s+1));
    if (!/'$/.test(temparray[temparray.length-1])) temparray[temparray.length-1] += delim + ';';
    var filename = '\tvar ' + strname + ' =\n\n';
    var epilog = '\n\n\tdocument.writeln(' + strname + ');\n\n//-->';
    oTextarea.value = prolog + filename + delim + temparray.join(delim + ' +\n' + delim) + epilog;
    }

    function flip(oCheckbox) {
    var f = oCheckbox.form;
    f.convertor.value = f.convertor.value.replace(/"/g, '@%&%@').replace(/'/g, '"').replace(/@%&%@/g, '\\'');
    }

    function use2(oCheckbox) {
    var bWhich = oCheckbox.checked;
    delim = bWhich ? '"' : '\\'';
    Qesc = bWhich ? /"/g : /'/g;
    Qrepl = bWhich ? '\\\"' : '\\\\'';
    }

    function initField(again) {
    var d = document.forms[0];
    d.convertor.value = 'ENTER HTML';
    d.convertor.focus();
    d.convertor.select();
    d.usedbl.checked = false;
    d.flipQ.checked = false;
    if (!again) {
    while (numChars == null || isNaN(numChars))
    numChars = prompt('How many characters per line of code?', '100');
    while (strname == null || !/^[a-zA-Z_\$]{1}[\w]*$/.test(strname))
    strname = prompt('The variable name of your include string?', 'HTML');
    }
    }

    onload = initField;

    </script>
    </head>
    <body>
    <form>
    <h2><span class="CB">use &amp;#148;
    <input type="checkbox" name="usedbl" onclick="use2(this)" style="filter:invert;" /></span>
    &amp;nbsp;&amp;nbsp;HTML to JavaScript Convertor&amp;nbsp;&amp;nbsp;
    <span class="CB"><input type="checkbox" name="flipQ" style="filter:invert;"
    onclick="if(this.checked)flip(this)" />&amp;nbsp;flip quotes</span></h2>
    <textarea name="convertor" id="convertor"></textarea>
    <div id="plinth">
    <input class="button" type="button" value="convert" style="background:#b0f0b0;"
    onclick="convert(convertor)" />
    <input class="button" type="button" value="select" style="background:#b0b0f0;"
    onclick="convertor.select()" />
    <input class="button" type="button" value="clear" style="background:#f0b0b0;"
    onclick="if(confirm('This will clear the field.'))initField(false)" />
    </div>
    </form>
    </body>
    </html>


    Checking the right-hand box swaps quotes (double-to-single & vice-versa), recommended if your HTML attributes are single-quoted. If you insist on using singles, checking the left-hand box changes the string delimiters to double-quotes, and escapes any other doubles in the original string (normally done with singles, as in event handler arguments).

    thanks, adios
    Last edited by adios; February 6th, 2003 at 11:37 PM.
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Not a bump, just added some features.

    OK, it's a bump.

    adios
    Attached Files
    Last edited by adios; April 28th, 2003 at 12:24 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Heh, I hate it when I can't find things on the internet. A while ago, someone here posted this link: http://wsabstract.com/script/script2/jstohtml.shtml.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    This is the one I use

    Code:
    <script language=VBScript>
     ' (C)2000 Peter A. Bromberg all rights reserved
     '  HTML to Javascript converter
    Sub Convert()
    Dim stext
    Dim entext
    stext = divbegin.innertext
    Dim arStuff
    arStuff = split(stext,vbCrLf)
    if tags.value="yes" Then
    entext = "<SCRIPT>"	& vbCRLF
    end if
    for i = 0 to Ubound(arStuff)
    	arStuff(i) = "document.write(""" & Replace(arStuff(i),chr(34), "\" & chr(34)) & """);"
    	arStuff(i) = Replace(arStuff(i),"script>","scr" & chr(34) & "+" & chr(34) & "ipt>")
    	entext = entext & arStuff(i) & vbCrLF
    next
     if tags.value="yes" then
    	entext = entext & "</SCR" & "IPT>" & vbCrLf
     end if
    divend.innertext = entext
    end Sub
    </script>
    
    
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <BASEFONT FACE=Tahoma>
    <p align=justify><FONT COLOR=BROWN><XMP>Often it is convenient to include HTML in ASP or other web files as a Javscript include in the form:</XMP>
    </FONT><FONT COLOR=BLUE><XMP><script Language="Javascript" SRC="http://www.myhost.com/includes/thisfile.js"></script></XMP></FONT><FONT COLOR=BROWN><XMP>  This converter page will allow you to paste any html into the top window, select whether or not you want
    <SCRIPT> tags around the result, and will produce the correct "document.write("  "); around each line, escaping quotation 
    marks with the Javascript backslash "\" character. Simply highlight the resultant Javascript in the lower window,
    copy to the clipboard and paste	it into your include file or other use.</XMP></FONT></p>
     <CENTER>Paste HTML Below and press CONVERT button. Result appears in lower window.<BR>
    <Textarea ID=divbegin COLS=100 ROWS=20></Textarea><BR>
    <select ID=tags >
    <OPTION VALUE=yes>Yes</OPTION>
    <OPTION VALUE=no>No</OPTION>
    </SELECT><=Provide script tags?
    
    <Input type=Button value="Convert to Javascript!" onClick="Convert()"><BR>
    
    <Textarea ID=divend COLS=100 ROWS=20></Textarea>
    </CENTER>
    </BODY>
    </HTML>
    I forget the url where i got it.

IMN logo majestic logo threadwatch logo seochat tools logo