revision:
The Document.createRange() method returns a new Range object.
createRange()
Parameters: none
let range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
example: createRange() method
<div>
Select some text or <button>element</button>, or do not select anything, before you click on the button below.
<br /><br />
<button onclick="TestSelection ();">Test the selection!</button>
</div>
<script>
function TestSelection () {
if (window.getSelection) { // all browsers, except IE before version 9
var selectionRange = window.getSelection ();
alert ("The text content of the selection:\n" + selectionRange.toString ());
}
else {
if (document.selection.type == 'None') {
alert ("No content is selected, or the selected content is not available!");
}
else {
var textRange = document.selection.createRange ();
alert ("The text content of the selection:\n" + textRange.text);
}
}
}
</script>
example: createRange with buttons
Select some of the buttons in the field below and click on the 'Test Selection' button.
You can select a button by clicking on it.
Hold down the CTRL or SHIFT key for multiple selection.
<div>
<p>Select some of the buttons in the field below and click on the 'Test Selection' button.<br />
You can select a button by clicking on it.<br />
Hold down the CTRL or SHIFT key for multiple selection.</p>
<br /><br />
<div contenteditable="true" style="background-color:#a0e0e0;">
<button>First button</button><br />
<button>Second button</button><br />
<button>Third button</button>
</div>
<br /><br />
<button onclick="TestSelection ();">Test selection</button>
</div>
<script>
function Init () {
// the 'multipleSelection' command throws an exception in Opera
try {
// enables multiple selection in Internet Explorer
document.execCommand("multipleSelection", false, true);
}
catch (e) {};
}
function TestSelection () {
if (document.selection === undefined || document.selection.type === undefined) {
alert ("Your browser does not support this example!");
return;
}
if (document.selection.type == "Control") {
var controlRange = document.selection.createRange ();
alert ("There are " + controlRange.length + " buttons selected.");
for (var i = 0; i < controlRange.length; i++) {
var button = controlRange.item (i);
alert ("The label of the " + (i+1) + ". selected button: " + button.value);
}
}
else {
alert ("Please select some of the buttons or maybe the selection cannot contain controls in your browser!");
}
}
</script>
example: use starting and ending points in the range using setEnd() and setStart() methods
Child 1
Child 2
<div>
<p id="parent">
Child 1<br>
Child 2<br>
</p>
<p id="create-1"></p>
<p id="create-2"></p>
</div>
<script>
const example = document.getElementById('parent');
const range = document.createRange();
range.setStart(example, 0);
range.setEnd(example, 3);
console.log(range);
document.getElementById("create-1").innerHTML = "range from start to end: " + range;
console.log(range.toString());
document.getElementById("create-2").innerHTML = "range toString(): " + range.toString();
</script>