Bdtjtk

I'm building a search engine, and want to change the color of matching characters

I'm using regex to matching an input value with array items, I've searched about solving a highlighting issue and I found this: item.replace(regex, '<mark>$1</mark>') but I don't know how to implement it.

  onTextChange = (e) => {

    const value = e.target.value;

    let suggestions = ;

    if(value.length > 0) {



        const regex = new RegExp(`${value}`, 'i');

        suggestions = this.items.sort().filter(v => regex.test(v));



        this.setState(() => ({ suggestions, textValue: value }));

     }

    this.setState(() => ({ suggestions, textValue: value }));



   }



//this function return autosuggestion list



    renderSuggestions () {

     const {suggestions} = this.state;

     if(suggestions.length !== 0) {



//suggestionSelected() hidden suggestion list after clicking



     return(

        <div className="auto-suggestions">

            <ul>

            {suggestions.map((item) =>

            <li key={item} className="suggestion-item" onClick={()=> 

               this.suggestionSelected(item)}>{item}</li>)}

             </ul>

          </div>

        );

       }

      }



//within the render() I have:



    const {suggestions, textValue} = this.state;

    <div className="container">

            <input type="text" onChange={this.onTextChange} value= {textValue} />

             {this.renderSuggestions()} 

             {this.showUsers()}



    </div>

I'm not sure where and how could solve this problem, any help would be appreciated.

You need to render the highlighted text in a plain html, you can have this sample

 safeHTML(item) {

   return item.replace(new RegExp(this.state.selectedText, 'gi'),'<strong>$&</strong>')

  }



  getHighlighted(item){

     return (

      <p key={item}

        dangerouslySetInnerHTML={{

          __html : this.safeHTML(item)

        }} />

    )

  }



  render() {

    return <div>

      {

        this.state.suggestions.map(s => {

          return this.getHighlighted(s)

        })

      }

    </div>;

  }

PS: You need a sanitized data for security

Hopefully this will help :)

You have 2 problems to solve: (1) extract the matching substring in suggestions and (2) highlight the matching substring in your UI.

You can use String.prototype.split instead of RegExp.prototype.test to split the string with matching regex and prepare necessary data for rendering:

onTextChange = (e) => {

    const value = e.target.value;

    let suggestions = ;

    if(value.length > 0) {

        const regex = new RegExp(`${value}`, 'i');

        suggestions = this.items.sort().map(v => {

            const arr = v.split(regex);

            return arr.map(substr => ({

                value: substr,

                isMatched: regex.test(substr)

            }))

        });

        suggestions = suggestions.filter(arr => arr.some(({ isMatched}) => isMatched))



        this.setState(() => ({ suggestions, textValue: value }));

     }

    this.setState(() => ({ suggestions, textValue: value }));



   }

then print out the suggestions list:

   renderSuggestions () {

     const {suggestions} = this.state;

     if(suggestions.length !== 0) {



     return(

        <div className="auto-suggestions">

            <ul>

            {suggestions.map((item) =>

                <li key={item} className="suggestion-item" onClick={()=> 

                    this.suggestionSelected(item)}>

                    {item.map(({ value, isMatched}) => 

                        {isMatched ?

                            <span>{value}</span> :

                            <strong>{value}</strong>

                        }

                    )}

               </li>)}

             </ul>

          </div>

        );

       }

      }