How To Highlight Text Based On User Input With React?

Let's take the simple case of a barebones editable

with contenteditable='true':

Edit this

The user is able to input/

Solution 1:

You could reach by checking in the onchange event, the div text length and wrap extra text by a span and set inner html of that div again by concatenatin text (without extra chars) + wrapped extra text span;

(its not recommended to use innerHTML due to xss injection but it's only solution I've found to this problem )

that main problem here is once setting div innerHTML , your cursor will rest to start of div text , so i've done a little trick to set selection at the end of the text using

// get textt par before extra textlet start =  html.slice(0, MAX_LENGTH ) ;
      // get extra textlet overflow =  html.slice(MAX_LENGTH) ;
      // rap extra text by span
      overflow = `<span style="color:${COLOR}">${overflow}</span>`;
      //set text as innerHTML (or use dangerouslyINerHTML with sate var)
      ref.current.innerHTML = start+overflow
      
      // below part is to set cursor , at the end after inner html // because innerHTML will reset selection to the start of div textlet range = document.createRange()
      var sel = window.getSelection()
      range.setStart(ref.current.lastChild, 1   )

      sel.removeAllRanges()
      sel.addRange(range)

See here working snnipet with deiferent props example created a component and use different props

const { useRef } = React;

/* create Eitable Component */constEditAbleDiv  =( props ) => {
  // get max length from propsconstMAX_LENGTH = props.maxLength || 40;
  // get color from propsconstCOLOR = props.warningColor || 'orange';
  
  let ref = useRef(null);
  
  
  // on change eventconstcontentChange = (e) => {
    
    // get only text without html tagslet html = e.target.innerText;
    
    if (html.length > MAX_LENGTH) {

      // get textt par before extra textlet start =  html.slice(0, MAX_LENGTH ) ;
      // get extra textlet overflow =  html.slice(MAX_LENGTH) ;
      // rap extra text by span
      overflow = `<span style="color:${COLOR}">${overflow}</span>`;
      //set text as innerHTML (or use dangerouslyINerHTML with sate var)
      ref.current.innerHTML = start+overflow
      
      // below part is to set cursor , at the end after inner html // because innerHTML will reset selection to the start of div textlet range = document.createRange()
      var sel = window.getSelection()
      range.setStart(ref.current.lastChild, 1   )

      sel.removeAllRanges()
      sel.addRange(range)

    }
  }

  return<divref={ref}contentEditableonInput={contentChange} 
  >
    Edit text
</div>
}
/* end component */functionApp() {
  
  return (
    <div><b> click in below div to edit text </b><br/><br/><EditAbleDivmaxLength={25} /><hr /><EditAbleDivmaxLength={18}warningColor={"red"} /><hr /><EditAbleDivmaxLength={12}warningColor={"green"} /></div>
  )
}

ReactDOM.render(
    <App />,
    document.body
);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Share