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

Question

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!

Answer 1

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.

Answer 2

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

---

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

Answer 3

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!

Answer 4

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

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

Answer 5

Step 1: - Initially Mouse will capture every time you enter something

<textarea type="text" 
          className="contentarea__form__input" 
          onMouseUpCapture={this.selectedText}>
</textarea>

Step 2: To make sure it only catches your selected text I used if-else condition

selectedText = () => {
    window.getSelection().toString() ? console.log(window.getSelection().toString()) : null;
}

Answer 6

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>
}

Answer 7

I just made a custom hook for this (in typescript if needed):

    export const useSelectedText = () => {
        const [text, setText] = useState('')
        const select = () => {
            const selected = window.getSelection() as Selection
            setText(selected.toString())
        }
        return [select, text] as const
    }

Answer 8

This can be done using react-text-annotate library: https://www.npmjs.com/package/react-text-annotate

Answer 9

We can do using state simply to select and highlight them.

import styled from 'styled-components';

const ClipBoardLink = styled.span<{ selection: boolean }>`
  background: ${(p) => (p.selection ? '#1597E5' : '')};
  margin-left: 0.5rem;
  color: ${(p) => (p.selection ? '#fff' : '')};
`;

const GroupOrderModel = () => {
  const [isCopied, setIsCopied] = useState(false);

  const handleIsClipboardCopy = async (text: string) => {
    setIsCopied(true);

    navigator.clipboard.writeText(text);

    setTimeout(() => {
      setIsCopied(false);
    }, 5000);
  };

  return (
      <ClipBoardLink selection={isCopied} onClick={async () => await handleIsClipboardCopy("Click me!")}>Click me!</ClipBoardLink>
   );
}

Answer 10

You need to grab the first and last indices, and figure out the words from there.

const [highlightStart, setHighlightStartIndex] = useState();
const [highlightEnd, setHighlightEnd] = useState();
const paragraph = "some text in paragraph blah blah blah";
const paragraphArr = paragraph.split(" ").map((word, index) => (
    <span
      key={index}
      id={`paragraph_${index}`}
      onMouseDown={(e) => handleHighlightStart(index)}
      onMouseUp={(e) => handleHighlightEnd(index)}
    >
      {word}{" "}
    </span>
  ));


const handleHighlightStart = (index) => {
    console.log("highlightStart", index);
    setHighlightIndexStart(index + 1); //because start word is the one after cursor starts
  };

  const handleHighlightEnd = (index) => {
    console.log("highlightEnd", index);
    setHighlightIndexEnd(index - 1); //because end word is the last one before cursor ends
  };

You can figure out the selected text from the indices. You would also need to take care of cases when the user highlights backward.