title: Highlight parentheses inside input box
body: <p>I am trying to highlight parentheses depending on their level and if they are matched or not. So first level gets the following class <code>paren_1</code>, second gets <code>paren_2</code> and so on. I want to highlight the set of parentheses next to the caret too, if there are any. Meaning if you have the caret next to a parenthesis (openeing or closing) it should highlight said parenthesis and its corresponding one. My (broken) implementation of this is shown in the fiddle.</p>
  
  <p>This works fairly well. Problems are the following</p>
  
  <ol>
  <li>If there is HTML in the input string, everything breaks apart. I tried escaping the html before sending it in using <code>jQuery('&lt;div /&gt;').text(text).html()</code>, which works, but ruins the caret position.</li>
  <li>If there are several parentheses on the "same level" and the caret is next to one set, it highlights more than it should.</li>
  <li>If there is an unmatched parenthesis, it should be highlighted in red or something similar. This is not working either and I have no idea how to implement it. I have tried my best but everything has failed. </li>
  </ol>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/yWzWV/1/" rel="nofollow">http://jsfiddle.net/yWzWV/1/</a></p>
  
  <p>Note to you all: I am in no way very good with either javascript or jquery, so you'll have to excuse me if this code makes your eyes bleed.</p>
  
  <p>Thanks in advance!</p>