Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Range object

Range is an object that represents a document fragment containing a node and a portion of a text node. The getRangeAt of the Selection object can also be retrieved by creating Range or window.getSelection() with document.createrange.

document.createRange

Select each text in the div with document.createRange:

<div id="container" name="content">Text text</div>
<script>
		let container = document.getElementById('container')
  	let ranges = []
		for (let i = 0; i < container.childNodes[0].textContent.length; i++) {
	      let range = document.createRange()
	      range.setStart(container.childNodes[0], i)
	      range.setEnd(container.childNodes[0], i)
	      ranges.push(range)
	  }
</script>
Copy the code

window.getSelection()

This method is used to get the current position of the text object or caret selected by the user.

Select text trigger

<html>
	<div id="container">Text text</div>
	<script>
		document.addEventListener('mouseup'.function () {
			const selection = window.getSelection();
			console.log(selection)
			const range = selection.getRangeAt(0)
			console.log(range)
		})
	</script>
</html>
Copy the code

You can see the Range of the second output, startoffSet is 0, endoffset is 2, that is, two characters are selected

The 0 in selection.getrangeat (0) indicates the number of strings selected by the user. In most browsers, only one string can be selected, but in Firefox, you can select multiple strings by holding CTRL:

In the above Selection object, rangeCount means that several paragraphs of text are selected.

Insert the cursor

When the cursor is inserted, sections are marked as Collapsed, as confirmed by Section. IsCollapsed equals true.

<div id="input">
    <textarea name="text" id="text" cols="30" rows="10"></textarea>
</div>
<script>
	document.addEventListener('mouseup'.function () {
		const selection = window.getSelection();
		console.log(selection)
	})
</script>
Copy the code

It is important to note that Selection’s target node is the parent of the input control, which is body if you place the input control directly under the body. Therefore, it is best to wrap the parent node around the input control.

Examples of methods in Range objects:

insertNode

A relatively important method in range is 👁️🗨️insertNode: Insert a node at the start of the range. Make sure it’s a node.

So inside the ranges array is each character under div, and then we insert Spaces into each character

for (let i = 0; i < ranges.length; i++) {
	const text = document.createTextNode(' ')
	ranges[i].insertNode(text)
}
Copy the code

detach

And when you’re done with the Range, remember to release.

range.detach();
Copy the code

Of course, Range has many other methods, see MDN for details.

Write in the last

I hope my article can give you a part of the inspiration and help, if there is any deficiency or wrong place, welcome readers to comment and leave a message

Of course, if this article is of any help to you, please like and retweet it. Thank you 🙏

GitHub article collection address