HTML to Javascript String Converter

jason_kelly · 12-10-2012, 07:25 PM

Hello,

I am trying to design and develop a custom HTML to JavaScript converter so as to save time and increase effiency as opposed to having to write out every single line of html.

I refer to this website: http://www.neuetech.com/tools.php?function=8

I am trying to do something similar, but since i'd like more control of writting it dynamically because I will insert if statements later but, how can the code be modified such that the output would be as follows

Desired result:

Code:

var html = ''
html += '<html>\n'
html += '<head>\n'
ect.

and not:

Code:

var html = '<html>\n' +
'<html>\n' +
'<head>\n' +

Here is my current code which does not work to begin with, I can't seem to figure it out, by my eye all should be fine and dandy.

Code:

<html>

<head>

<script type="text/javascript">
function test() {

var oldtext = document.getElementById('oldtext').value
    oldtext = RegExReplace(oldtext, '\'', '\\\'');
    oldtext = RegExReplace(oldtext, '^\\s+', '');
    oldtext = RegExReplace(oldtext, '\n\\s+', '\n');
    oldtext = RegExReplace(oldtext, '\r', '');
    oldtext = RegExReplace(oldtext, '\n', '\\n\' +\n    \'');
    oldtext = RegExReplace(oldtext, '</', '<\\/');
    oldtext = 'html = \'' + oldtext + '\';';

alert(oldtext);    

}

</script>    
</head>    
<body>

<textarea id="oldtext"></textarea>
<br><br>
<textarea id="newtext"></textarea>
<br><br>
<input type="submit" value="Convert" onclick="test()">

</body>
</html>

AndrewGSW · 12-10-2012, 08:14 PM

If that is your current code then it won't work because you haven't included the function RegExReplace.

But, personally, I can't see how your third code sample relates directly to the previous two?! Perhaps it's just me.

WolfShade · 12-10-2012, 08:37 PM

Not to mention that the form will submit unless OP prevents default action. Best to replace "SUBMIT" with "BUTTON".

felgall · 12-10-2012, 08:42 PM

If you are loooking at seriously generating a significant amount of HTML from JavaScript then your best option would be to use the actual DOM commands such as createElement() and appendChild() to build the HTML as then you will not need to keep track of where the closing tags are supposed to go as the HTML will be generated with the correct syntax automatically.

rnd me · 12-11-2012, 02:13 AM

personally, i would use templates.

simplest ex:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>template test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
</head>
<body>

<input value='hello' type='button'   onclick="main.innerHTML=template(pages[0], templateString)" />	
<input value='goodbye' type='button'   onclick="main.innerHTML=template(pages[1], templateString)" />	

<div id='main'>
	<h1>{title}</h1>	
	<p>{description}</p>
</div>	  
 
<script type='text/javascript'>

var pages=[
 { title: "hello", description: "hello world hello world hello world hello world hello world "} ,
 { title: "goodbye", description: "goodbye world goodbye world goodbye world goodbye world goodbye world goodbye world "} 
]


var templateString=main.innerHTML;


function template(ob, str){
   return str.replace(/{([\w\s.$_]+?)}/g, 
     function(j,a){  return ob[a]||"";  } );
}


</script>
</body>
</html>

look into handlebars for a lot more features or knockout for live data I/O binding.