Web API Selection.modify() Method

Last Updated : 14 Dec, 2022

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>