Wordpress Post Friendly Code With JavaScript Replace

Thursday, February 12, 2009 - 12:03

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
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function changeIt(){
    var text = document.getElementById('tochange').value;
    text = text.replace(/&/g,'&amp;');  
    text = text.replace(/&quot;/g,'&quot;');
    text = text.replace(/'/g,''');
    text = text.replace(/</g,'<');
    text = text.replace(/>/g,'>');
    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.

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

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.

Category: 
philipnorton42's picture

Philip Norton

Phil is the founder and administrator of #! code and is an IT professional working in the North West of the UK.
Google+ | Twitter

Add new comment