-1

I am trying to create a very simple text parser that would allow a contenteditable in HTML to parse Javascript. It somewhat works. However, it is all wonky when I type into the text section. It actually seems like it is writing backwards. It seems like it will parse the file fine otherwise... At least I believe so. Can someone take a look at the code below and let me know?

<section id="textarea" contenteditable="true" onkeypress="myFunction();">
    <h2>Go ahead, edit away!</h2>
    <p>Here's a typical paragraph element</p>
    <ol>
      <li>and now a list</li>
      <li>with only</li>
      <li>three items</li>
    </ol>
  </section>



<script>
    var strReg1 = /"(.*?)"/g,
    strReg2 = /'(.*?)'/g,
    specialReg = /\b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^\w])/g,
    specialJsGlobReg = /\b(document|window|Array|String|Object|Number|\$)(?=[^\w])/g,
    specialJsReg = /\b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^\w])/g,
    specialMethReg = /\b(indexOf|match|replace|toString|length)(?=[^\w])/g,
    specialPhpReg  = /\b(define|echo|print_r|var_dump)(?=[^\w])/g,
    specialCommentReg  = /(\/\*.*\*\/)/g,
    inlineCommentReg = /(\/\/.*)/g;

var htmlTagReg = /(&lt;[^\&]*&gt;)/g;




function myFunction() {
  var str = document.getElementById("textarea").innerHTML; 
  document.getElementById("textarea").innerHTML = str.replace(strReg1, '<font color="red">"$1"</font>'); 
    document.getElementById("textarea").innerHTML = str.replace(strReg2,'<font color="green">"$1"</font>');

}
</script>
fuyushimoya
  • 9,715
  • 3
  • 27
  • 34
user1924218
  • 99
  • 1
  • 11

1 Answers1

0

You are always replacing and assigning the original string. Either assign to str each time and then to the element or you can also chain the replacements.

Here is a jsFiddle that shows how it works.

maraca
  • 8,468
  • 3
  • 23
  • 45
  • Well that just runs the syntax highlighting on what is already written. But if you start typing in the section, it starts screwing everything up. I am basically trying to create a Javascript Editor with Syntax Highlighting on the fly. – user1924218 Aug 06 '15 at 23:03
  • @user1924218 yes I see the problem, you can't call myFunction all the time (call each second or every 5 seconds or 3 seconds after an edit...) this works only for 1s, because when the function is called it replaces the whole text and therefore also resets the caret. – maraca Aug 07 '15 at 01:26
  • @user1924218 forgot to post new link how to do it http://jsfiddle.net/sy5698dn/1/ (the caret problem still exists but it solves the rest). You can't just set the caret at the same position, you will need to count the combined length of all the tags you stripped (only before the caret) and the combined length of the tags that were added afterwards to be able to set the caret correctly. – maraca Aug 07 '15 at 01:49
  • Well I tried editing it with the caret positioning, but it still positions the caret at 69: http://jsfiddle.net/sy5698dn/2/. Technically, this should work. I added a little debug part to show that it always appears at 69. – user1924218 Aug 08 '15 at 13:08
  • @user1924218 I looked at it again and everything should work correctly if you retrieve the new caret position before modifying it and set it after modifying it, currently you retrieve the position after modifying (and it is probably trickier than your method e.g. for gets changed to fort, so it won't be highlighted any more and all characters from the font tags are lost, so huge reduction of caret position). Also setting and getting caret is not that easy: http://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div – maraca Aug 08 '15 at 14:01