Mimic Ctrl+A with JavaScript

Question

I would like to select all text on a page programmatically with the exact same result as if I would press key combo Ctrl+A.

The problem with using document.getSelection().selectAllChildren(body) is that the selection will also include text nodes that are not selectable by the user, i.e. <script> </script> or nodes for which there is user-select:none defined in CSS:

<div style="-moz-user-select:none">Will be selected</div>

There is the method modify on selection objects that could be used like this: selection.modify("extend", "forward", "documentboundary"); to extend a selection from the beginning of a document to its end which will ignore any script or style element contents and elements with -moz-user-select:none - unfortunately Firefox does not allow documentboundary as 3. argument and word does not help much.

Is there a fast way to accomplish this? Only needs to work in Firefox.

EDIT (not-so-good-solution): Select first text node, then use selection.modify('extend', 'forward', 'line') repeatedly while selection.focusNode is not equal to the last text node - but depending on the length of the document this takes up to several seconds!

EDIT: selection.selectAllChildren will work as intended in Chrome where text elements with user-select:none won't be selected - unfortunately there is a different behavior in FF.

EDIT: This is not a duplicate of this post since I'm neither addressing contenteditable elements nor am I concerned about them;)

Answer 1

It seems to me the most efficient way is to move what you want selected into its own selectable div, and selectAllChildren of that. I tried this on a google search, several stack overflow questions, and a few random sites. In every case the results were instantaneous and exactly the same has a ctrl+A.

function selectAll() {
  var sel = window.getSelection();
  var body = document.querySelector("body");
  // Place the children in an array so that we can use the filter method
  var children = Array.prototype.slice.call(body.children);

  // Create the selectable div
  var selectable = document.createElement("div");

  // Style the selectable div so that it doesn't break the flow of a website.

  selectable.style.width = '100%';
  selectable.style.height = '100%';
  selectable.margin = 0;
  selectable.padding = 0;
  selectable.position = 'absolute';

  // Add the selectable element to the body
  body.appendChild(selectable);

  // Filter the children so that we only move what we want to select.
  children = children.filter(function(e) {
    var s = getComputedStyle(e);
    return s.getPropertyValue('user-select') != 'none' && e.tagName != 'SCRIPT'
  });
  // Add each child to the selectable div
  for (var i = 0; i < children.length; i++) {
        selectable.appendChild(children[i]);
  }

  // Select the children of the selectable div
  sel.selectAllChildren(selectable);

}

selectAll();

Answer 2

Just to note I used jquery here although it was asked with Javascript - I'm not sure if this is exactly what you were looking for, but maybe it can point you in the right direction? Let me know if you need an explanation.

function slct(el) {
      var d = document;
      var t = d.getElementById(el);
        var selection;
      var range;
    
      if(d.body.createTextRange) {
          range = d.body.createTextRange();
          range.moveToElementText(t);
          range.select();
      } else if(window.getSelection) {
          selection = window.getSelection();        
          range = d.createRange();
          range.selectNodeContents(t);
          selection.removeAllRanges();
          selection.addRange(range);
      }
  }

  $(function() {
      $('#myButton').click(function() {
          slct('content');
      });
  });

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
 </script>

<div id="content">
  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam  necessitatibus assumenda nam obcaecati unde libero aspernatur neque ad vel enim tempora, qui consectetur corporis reiciendis, eum dolorum voluptas soluta voluptatibus!</h1>
  <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores, iste distinctio sint quidem ea aut voluptatem earum error similique, repudiandae consectetur labore esse. Aut quas repudiandae accusamus non iusto.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In rem blanditiis delectus placeat officia, iusto qui! Dicta laboriosam ea exercitationem, molestiae officiis! Asperiores quibusdam laborum in optio eum, similique vitae.</p>
</div>

<button id="myButton">select stuff</button>

Answer 3

I think you can use document.execCommand('selectAll', false, null) for this.

You can find more documentation on this here.