The Selection API gives developers the ability to recognize the screen regions that the user has now selected and to use code to initiate user selections.
The modify() method alters the current selection or cursor position by employing short text commands.
Syntax:
modify(alter, direction, granularity)
Parameters:
- alter: The kind of modification to make. To move the cursor position or extend the current selection, specify “move” or “extend.”
- direction: The direction in which the current selection should be adjusted. Depending on the language present at the selection point, you can specify “forward” or “backward” to adapt in the proper direction. You can specify “left” or “right” to modify in a certain direction.
- granularity: The distance to move the cursor or current selection. The following units of movement are available: “character,” “word,” “sentence,” “line,” “paragraph,” “lineboundary,” “sentenceboundary,” “paragraphboundary,” and “documentboundary.”
Returns: None
Example 1: This example will show the forward extension of the selection.
HTML
<!DOCTYPE html> <html>
<head>
<title>Web API</title>
</head>
<body>
<script>
function clickHandler() {
let selection = window.getSelection();
selection.modify('extend', 'forward', 'word');
}
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Web API selection modify method</h3>
<p>Some text will get selected and
then modified using the modify method.</p>
<button type="button" onclick="clickHandler()">
Click Here!!!
</button>
</body>
</html>
|
Output:
Example 2: This example will show the backward paragraph extension of the selection.
HTML
<!DOCTYPE html> <html>
<head>
<title>Web API</title>
</head>
<body>
<script>
function clickHandler() {
let selection = window.getSelection();
selection.modify('extend', 'backward', 'paragraph');
}
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Web API selection modify method</h3>
<p>Here is some garbage text just to show the
usage of the modify method.<br/>
Some more text here. Some extra text. Some
more text here. Some more text. Some more text.</p>
<p>Here is some garbage text just to show the
usage of the modify method. Some more text here.
Some extra text. Some more text here.<br/>
Some more text. Some more text.</p>
<p>Here is some garbage text just to
show the usage of the modify method.<br/>
Some more text here.<br/>
Some extra text. Some
more text here. Some more text.
Some more text.</p>
<button type="button" onclick="clickHandler()">
Click Here!!!
</button>
</body>
</html>
|
Output:
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Selection/modify