Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts

    HTML to Javascript String Converter

    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>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Not to mention that the form will submit unless OP prevents default action. Best to replace "SUBMIT" with "BUTTON".
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jason_kelly (12-12-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •