JavaScript: Select All Content of any HTML Element

This post is about selecting HTML content of any Element on the document. I need a way to select all content inside <pre></pre>, so that user can copy all code inside it.


(function() {
    function selectText(element) {
        var doc = document
            , text = element
            , range, selection
        ;
        if (doc.body.createTextRange) { //ms
            range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { //all others
            selection = window.getSelection();
            range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
    preTags = document.getElementsByTagName('pre');
    for(var i=0;i<preTags.length;i++) {
        preTags[i].onclick = function() {selectText(this)};
    }
})();

I was looking for a correct code and searched so many times spanning few days and finally got this code from stackOverflow. I have modified a little and made it work for <pre>.

The above code selects content inside Pre element on Click. It will be tied to any pre element available on page. For, tying it to any other element like DIV, etc. just change the line: preTags = document.getElementsByTagName('pre');.
I needed this as prismjs does not provide select and copy functionality like Alex's Syntax Highlighter. Today, I changed to PrismJs as this is very lightweight compared to Alex's Syntax Highlighter.

After Click on Code Area:

select-content-in-pre-onclick

  • # 1 - by jakes

    I’ve been searching high and low for something like this, but for some reason I’m having trouble making it work.

    I’ve even took a look at the source of this page and I’m still confused why it won’t work for me.

    If you could possibly spare some time would be much appreciated thanks.

    I’m setting up a banner exchange for copy and pasting codes using the new bootstrap 3.0.2, prettify, and select2.js referring to the above demo.

    Bootstrap Banners Template



    Demo 1

    Copy and Paste Code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Demo | Prettify.JS</title>
    </head>
    <body>
    <h1>Hello, World!</h1>
    </body>
    </html>

    !function ($) {
    $(function(){
    window.prettyPrint && prettyPrint()
    })
    }(window.jQuery)

    • # 2 - by jakes

      Not exactly sure why my code got messed up after posting. Lets try plain text.

      Bootstrap Banners Template



      Demo 1

      Copy and Paste Code:

      <!DOCTYPE html>
      <html>
      <head>
      <title>Demo | Prettify.JS</title>
      </head>
      <body>
      <h1>Hello, World!</h1>
      </body>
      </html>

      !function ($) {
      $(function(){
      window.prettyPrint && prettyPrint()
      })
      }(window.jQuery)

      • # 3 - by Satya Prakash

        I am not sure what you tried with the code you posted and how that is related to the code in Post.

  • # 4 - by jakes

    Sorry, perhaps it’s best to email one another if possible. Thanks

  • # 5 - by jakes

    Just saw code entities tool. Maybe this would help with code?

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Banners Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    <script src="js/select2.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>

    <div style="margin-top: 20px;"></div>

    <div class="container">

    <div style="margin-top:50px;"></div>

    <ul class="nav nav-pills">
    <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
    </ul>

    <div class="tab-content">

    <div style="margin-top:20px;"></div>
    <div class="tab-pane fade in active" id="demo1">
    <p></p>
    <p>Copy and Paste Code:</p>

    <pre class="prettyprint linenums lang-html">
    <!DOCTYPE html>
    <html>
    <head>
    <title>Demo | Prettify.JS</title>
    </head>
    <body>
    <h1>Hello, World!</h1>
    </body>
    </html>
    </pre>

    </div>

    </div>

    </div>

    <div style="margin-top: 50px;"></div>

    </div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
    <script>
    !function ($) {
    $(function(){
    window.prettyPrint && prettyPrint()
    })
    }(window.jQuery)
    </script>
    </body>
    </html>

    • # 6 - by Satya Prakash

      Ok, Your select code is at top when <pre> tag is not available. So, put select code at the bottom and it should start working.

Comments are open for an year period. Please, write here on Facebook page.