html - Javascript syntax highlighter infinite loop -


i'm making syntax highlighter in javascript , html. works fine @ moment think it's inefficient because have interval time of 0 runs function loops through of characters in text area , inserts them div behind text area provide syntax highlighting.

i think lexer bad too, @ moment i'm more concerned function running million times second loops through every character in text area each time.

can please think of more efficient way this?

there doesn't seem performance problems i'm not sure if work on lower-powered machine because don't want crash browser tab because want have several on page need efficient possible.

i understand annoying given loads of code , asked help, thought problem easiest debug you'd need entire code.

here code:

<html> <head>     <title>my syntax highlighter</title>     <style type="text/css">     #container {         width: 100%;         height: 100%;         position: relative;         padding: 0px;     }      #code {         width: 100%;          height: 100%;          outline:none;         position: absolute;         background-color: transparent;         border: none;         font-family: courier;         font-size: 22px;         color:  rgba(0,0,0,.2) !important;      }       #codeb {         width: 100%;         height: 100%;         position: absolute;         font-family: courier;         font-size: 22px;         padding: 2px 2px;         color: #000;      }       .keyword {         /*font-weight: bold;*/         color: #e42d82;      }       .string {         /*font-weight: bold;*/         color: #0086b3;      }      </style>     <script type="text/javascript">       function u() {         var code = document.getelementbyid("code");         var codeb = document.getelementbyid("codeb");         var c = "";         var tok = "";         var cc = 0;         var t = "";         var takeaway = 0;          var stringstarted = false;         var string = "";          (var = 0; < code.value.length; i++) {              tok += code.value[i];             c += code.value[i];              cc++;              if (tok == "print") {                 t = "<span class=\"keyword\">print</span>";                 takeaway += 5;                 c = c.substring(0, cc - takeaway) + t + c.substring(cc + t.length);                 cc += t.length;                 tok = "";             } else if (tok == "var") {                 t = "<span class=\"keyword\">var</span>";                 takeaway += 3;                 c = c.substring(0, cc-takeaway) + t + c.substring(cc + t.length);                 cc += t.length;                 tok = "";             } else if (tok == "\"") {                 tok = "";                 if (stringstarted == false) {                     stringstarted = true;                     string += "\"";                 } else {                     stringstarted = false;                     string += "\"";                     t = "<span class=\"string\">" + string + "</span>";                      takeaway += string.length;                     c = c.substring(0, cc-takeaway) + t + c.substring(cc + t.length);                     cc += t.length;                     tok = "";                     string = "";                  }                 tok = "";             } else if (tok == " ") {                 if (stringstarted == true) {                     string += " ";                 }                 c+= "";                 tok = "";             } else {                 if (stringstarted == true) {                     string += code.value[i];                     tok = "";                 }             }               codeb.innerhtml = c;             //console.log("test");          };          //alert(string);          if (code.value == "") {             codeb.innerhtml = "";         }          cleari(setinterval(function(){ u(); }, 0));       }      function cleari(interval) {         clearinterval(interval);     }      var interval = setinterval(function(){ u(); }, 0);        </script> </head> <body> <div id="container">     <div id="codeb"></div>     <textarea id="code" autofocus></textarea> </div> </body> </html> 


Comments

Popular posts from this blog

javascript - oscilloscope of speaker input stops rendering after a few seconds -

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -