JavaScript - select all text inside a ‘pre code block’ on double-click

Question

I have some code block on my blog; I want that when someone double-click on a code block, all code of that code block need to be selected.

Please look at the code below (this is what I’ve got so far, though it is using jQuery). Now is it do-able with native JavaScript( without jQuery ) ?

Sorry If I've asked a dumb question, I’m new at these things. :)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
pre.highlight {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // select all code on doubleclick
    $('pre.highlight').dblclick(function() {
        $(this).select();

        var text = this,
            range, selection;

        if (document.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);
        }
    });
});
</script>
<pre class="highlight"><code>.button-css {
    cursor: pointer;
    border: none;
    background: #F2861D;
    padding: 3px 8px;
    margin: 7px 0 0;
    color: #f4f4f4;
}</code></pre>
<pre class="highlight"><code> #slider {
     border-color: #c0c0c0;
     border-radius: 5px 5px 5px 5px;
     border-style: solid;
 }</code></pre>

Answer 1

Your code works fine in Jquery.
To get the "native javascript" version go through the following steps:

• replace jquery's $(document).ready handler with native window.onload
• work with event target e.target instead of jquery's this

• instead of adding an event handler for each element with class="highlight" use advanced technic which is adding the event listener to the parent element once and considering only needed pre or code elements (related to class="highlight")

  window.onload = function(){
  
      document.body.addEventListener('dblclick', function(e){
         var target = e.target || e.srcElement;        
         if (target.className.indexOf("highlight") !== -1 || target.parentNode.className.indexOf("highlight") !== -1){
              var range, selection;
  
              if (document.body.createTextRange) {
                  range = document.body.createTextRange();
                  range.moveToElementText(target);
                  range.select();
              } else if (window.getSelection) {
                  selection = window.getSelection();
                  range = document.createRange();
                  range.selectNodeContents(target);
                  selection.removeAllRanges();
                  selection.addRange(range);
              }
              e.stopPropagation();
         }              
  
      });
  };
  

https://jsfiddle.net/8nba46x8/