Mimic Ctrl + A with JavaScript

Question

I would like to select all the text on a page, the software with the same result as if I pressed the button the combo the Ctrl + A .

The problem with use document.getSelection().selectAllChildren(body)is that the selection will also include text nodes that cannot be selected by the user, i.e. <script> </script>or nodes for which exists user-select:none, defined in CSS:

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

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

Is there a quick way to do this? Only need to work in Firefox.

EDIT (not a very good solution): Select the first node text, then use it selection.modify('extend', 'forward', 'line')several times, and selection.focusNodenot match the last node text - but depending on the length of the document, it takes a few seconds!

EDIT: selection.selectAllChildren Will work in Chrome, where text elements with user-select:nonewill not be selected - unfortunately, there is a different behavior in FF.

EDIT: , contenteditable, ;)

Answer 1

, , , div selectAllChildren. Google, . 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

, , jquery , Javascript - , , , , , ? , .

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>

Hide result

Answer 3

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

You can find more documentation on this here .