Talk In Code

I recently talked about adding code to blogs and comments to WordPress and making sure that certain characters are encoded properly. So to simplify things I thought I would create a little set of regular expressions that takes a sample of code and convert it into a Wordress friendly format. It consists of the following function, which takes the value of a text area called tochange and runs some regular expression replace functions on it. I have kept the expressions as simple as possible so they are quite easy to understand. The g argument for each expression means that the replace will be done for all of the text.

<script type="text/javascript">
function changeIt(){
  var text = document.getElementById('tochange').value;
  text = text.replace(/&/g,'&amp;');
  text = text.replace(/"/g,'&quot;');
  text = text.replace(/'/g,'&#39;');
  text = text.replace(/</g,'&lt;');
  text = text.replace(/>/g,'&gt;');
  text = text.replace(/^\s+/mg,'&nbsp;&nbsp;');
  document.getElementById('changed').value = text;
  document.getElementById('preTag').innerHTML = text;
}
</script>

The only one which might cause an issue is the last one with the expression ^\s+. This simply matches for 1 or more white space characters at the beginning of a line. The m argument means that the ^ symbol will be used to mean the start of a line. You can test this function with the following HTML tags.

  <textarea id="tochange" cols="50" rows="10"></textarea>
  <input type="submit" onclick="changeIt()" />
  <textarea id="changed" cols="50" rows="10"></textarea>
  <pre id="preTag"></pre>

The first textarea is what you want to alter, the second is the altered text and the pre tag displays what the altered text will look like in your browser.