Select Text & highlight selection or get selection value (React)

how to select text in word without clicking and dragging
selecting text in word processing
how to select multiple words in word
how to select text with keyboard mac
shortcut key to select a word
how to select text in word using keyboard
selecting and inserting text
how to select all in word mac

I have a React application which displays some spans:

<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...

I would like the user to select the text with the mouse like so

..and then get the selected value, or highlight the text etc. How would I do this in React? I am not sure what event handlers to use and how to get hold of the current selection! A minimal example or a hint would be appreciated!

There is no React-specific solution for this. Just use window.getSelection API.


To output highlighted text run window.getSelection().toString()

15 ways to select text in a Word document, There are many ways to select Word text - 15 at least! Susan Harkins shares her favorite selection methods. Besides entering text, selecting text  Once completed, all text from the beginning to the end should be highlighted. Below is an example of how text can be highlighted. There is no limit to how much text can be highlighted. You can move to the end of a paragraph to highlight the full paragraph or keep holding the mouse button down and select multiple paragraphs or pages of text.

Use onMouseUp and onDoubleClick events to detect to call method, that will determine selection using JavaScript Selection API.

Use window.getSelection() to get selection object.

To get selected text, use window.getSelection.toString().

To get coordinates of selected text area for rendering popup menu, use selection.getRangeAt(0).getBoundingClientRect().

As an example implementation, take a look at react-highlight library.

10 Time Saving Ways to Select Text in Microsoft Word, My Word mantra is “Select Then Do” because most formatting and editing actions in a document require that text is selected first before  In order to get the value of the selected item you can do the following: this.options[this.selectedIndex].text Here the different options of the select are accessed, and the SelectedIndex is used to choose the selected one, then its text is being accessed. Read more about the select DOM here.

I think that it's the right way...

 document.onmouseup = () => {
   console.log(window.getSelection().toString());
 };

Selecting Text in Microsoft Word, To select text, drag the mouse pointer over the desired text. When the mouse pointer is positioned over an area that has been selected, the pointer changes from  Press and hold the Ctrl key and the C key on your keyboard. You can also right-click with your mouse and select Copy in the drop-down menu. Open a word processor or text editing program. Paste the copied text into a word processor or other text editor by pressing and holding the Ctrl key and the V key on your keyboard. You can also right-click

Due to this bug in Firefox, I was unable to get it working with window.getSelection() as suggested by other answers.

So I had to do the following (in React):

constructor(props) {
    this.textAreaRef = React.createRef();
}

getSelection() {
    const textArea = (this.textAreaRef.current as HTMLTextAreaElement);
    console.log(textArea.value.substring(
            textArea.selectionStart,
            textArea.selectionEnd
        )
    );
}

render() {
    <textarea onMouseUp={() => this.getSelection()}
                        ref={this.textAreaRef}>
    </textarea>
}

[PDF] How to Select Text Using Keyboard Shortcuts, By Tielle Webb, eHow Contributor ? Select Text Using Keyboard Shortcuts. While the majority of computer users rely on the good old mouse to move around the  SQL putting text in query with group by and order by. To get a formatted output with user defined columns ('For','No.of Agent','Agent(s)','in' and '%' ) along with the 'agents' table with following condition - 1. number of agents for each 'working_area' must be less than 3, the SQL statement can be used: SQL Code:

Here's an example in React using a functional component:

const Post = () => {
    const handleMouseUp() {
        console.log(`Selected text: ${window.getSelection().toString()}`);
    }
    return (
        <div onMouseUp={handleMouseUp}>Text</div>
    );
}

As Lyubomir pointed out the window.getSelection() API does the trick!

How to Select Text in Microsoft Word Without Clicking & Dragging , If you're constantly losing your place or having to start from nearly the beginning of text selection processes because your mouse twitches or your cursor gets 

How to select text, Selecting or highlighting text enables you to change that text in terms of style, font and/or colour or even replace the words if required. This means that, even if 

How to highlight or select text, How to highlight using a touchpad on a laptop. Select text with the mouse button. How to highlight text using your keyboard. Practice highlighting 

To Select Text in MS Word, To select entire document, in Home tab, in Editing group click Select then choose Select All option or press CTRL+A; o Shift + Arrow; hold down the shift key then 

Comments
  • Possible duplicate of Get the Highlighted/Selected text
  • I don't think this is a duplicate, as I am asking specifically about React here - but I guess there is no React specific solution then?
  • there is no need for specific react solution, as there is more powerful and general solution that works across all JS frameworks / approaches - developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
  • now I got you. Right, sorry! I've edited my answer to reflect that.
  • I've taken yours, no worries, all good. Have a nice day!
  • This doesn't answer the question.
  • You just have to bind a "OnMouseUp" , then use the "getSelection" method presented here