How to get the selected text from text area in react?

Question

I am trying to make a text editor in react.Does anyone knows how to get the selected text from the textarea so that styles can be applied on the selected text.I know we can

Answer 1

Yes there is a method to do this, specially in React. The way you should go to achieve this is as follow.

step 1:- use ref in your textarea ui element. like

     `{
                      this.setState({
                         textareaVal:event.target.value;
                      });
                   }}
       >
      ` 

step 2:- now you can access the DOM element,using react refs.

    let textVal = this.refs.myTextarea; 

step 3:- use selectionStart and selectionEnd :- using selectionStart and
selectionEnd you can get to know your start and end pointer
of selected text.which can be done as below;

        let cursorStart = textVal.selectionStart;
        let cursorEnd = textVal.selectionEnd;

now you have start and end index of your selected text.

step 4 :- use javascript substring function to get the selected text.

    this.state.textareaVal.substring(cursorStart,cursorEnd)