Auto highlight text inside pre tags using jQuery

We use pre tags in the Polldaddy plugin to display the embed codes and short URLs. We use pre tags because it formats the text inside the tags as we insert it, which is ideal for displaying code in particular. The thing is, people like to copy this code and they have to go to the awful bother of selecting all the text manually if they wish to copy the code or URL.

The alternative is to use an text input or text area which will allow you to use a select method that you can call on a click event, but then you lose the neat formatting that pre tags offer.

So I had a look for a jQuery hack to auto select all the text inside the pre tags. The only complication with this appears to be a cross platform solution as each browser appears to have their own way of selecting text.

Internet Explorer uses createTextRange.
Opera and Firefox use createRange.
Safari uses DOMSelection.

So with a pre tag like …

<pre class='code'>http://poll.fm/11w3q</pre>

… the following code will auto-select the all the text between the tags …

	jQuery( document ).ready(function() {	
		jQuery( 'pre.code' ).click( function() {
			var refNode = $( this )[0];
			if ( $.browser.msie ) {
				var range = document.body.createTextRange();
				range.moveToElementText( refNode );
				range.select();
			} else if ( $.browser.mozilla || $.browser.opera ) {
				var selection = window.getSelection();
				var range = document.createRange();
				range.selectNodeContents( refNode );
				selection.removeAllRanges();
				selection.addRange( range );
			} else if ( $.browser.safari ) {
				var selection = window.getSelection();
				selection.setBaseAndExtent( refNode, 0, refNode, 1 );
			}
		} );
  	} );

8 thoughts on “Auto highlight text inside pre tags using jQuery

      1. Client side: the format all your code is displayed in (you have line numbers, language keywords are given a different colour, etc.)

        Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s