I'm trying to auto-highlight the text of a <pre> so that it's easier to copy... Here's what I've been working with:

jQuery( document ).ready( function() {
  $( 'pre' ).click( function() {
    $( this ).select();
    
    var doc = document
    , text = $( this )
    , range, selection;

    if( doc.body.createTextRange ) {
      range = document.body.createTextRange();
      range.moveToElementText( text );
      range.select();
    } else if( window.getSelection ) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents( text );
      selection.removeAllRanges();
      selection.addRange( range );
    }
  } );
} );

pre {cursor:pointer;}

<script src=".1.1/jquery.min.js"></script>
<pre>This is Text</pre>

I'm trying to auto-highlight the text of a <pre> so that it's easier to copy... Here's what I've been working with:

jQuery( document ).ready( function() {
  $( 'pre' ).click( function() {
    $( this ).select();
    
    var doc = document
    , text = $( this )
    , range, selection;

    if( doc.body.createTextRange ) {
      range = document.body.createTextRange();
      range.moveToElementText( text );
      range.select();
    } else if( window.getSelection ) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents( text );
      selection.removeAllRanges();
      selection.addRange( range );
    }
  } );
} );

pre {cursor:pointer;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>This is Text</pre>

The posts I've searched all refer to "highlighting" as a background color but I want to actually highlight it so the user can copy it easily. How can I modify the JS above so that when the user clicks on the text it highlights it?

• javascript
• jquery
• highlighting

Share Improve this question Follow asked Jun 26, 2015 at 18:56 Howdy_McGeeHowdy_McGee 10.7k3030 gold badges116116 silver badges191191 bronze badges 3

• Uncaught TypeError: Failed to execute 'selectNodeContents' on 'Range': parameter 1 is not of type 'Node'. – user4639281 Commented Jun 26, 2015 at 18:59
• I don't get that issue in my console, I may have fudged the pasting, 1s. – Howdy_McGee Commented Jun 26, 2015 at 19:00
• You could also use a textarea which will also preserve white-space like this jsfiddle/dt8dzq4o much simpler – user4639281 Commented Jun 26, 2015 at 19:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Your code is pretty much spot-on. There's just one little change that needs to be made.

text = $(this)

needs to bee

text = this

The functions you use text as a parameter to are Vanilla JavaScript methods, and so expect a DOM node rather than a jQuery object. "This" by itself in this case is a DOM node. But, wrapping it in $() turns it into a jQuery object, which is then unusable by the functions you call later on.

jQuery( document ).ready( function() {
  $( 'pre' ).click( function() {
    $( this ).select();
    
    var doc = document
    , text = this
    , range, selection;

    if( doc.body.createTextRange ) {
      range = document.body.createTextRange();
      range.moveToElementText( text );
      range.select();
    } else if( window.getSelection ) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents( text );
      selection.removeAllRanges();
      selection.addRange( range );
    }
  } );
} );

pre {cursor:pointer;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>This is Text</pre>