Wordpress Post Friendly Code With JavaScript Replace

12th February 2009

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.

  1. function changeIt(){
  2. var text = document.getElementById('tochange').value;
  3. text = text.replace(/&/g,'&');
  4. text = text.replace(/"/g,'"');
  5. text = text.replace(/'/g,''');
  6. text = text.replace(/,'<');
  7. text = text.replace(/>/g,'>');
  8. text = text.replace(/^\s+/mg,'&nbsp;&nbsp;');
  9. document.getElementById('changed').value = text;
  10. document.getElementById('preTag').innerHTML = text;
  11. }

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>

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.

Add new comment

The content of this field is kept private and will not be shown publicly.