React js highlight matching text

        const { useState } = React;

​

        const App = () => {

            const [text, setText] = useState("To highlight matching text in React.js, you can use the String.prototype.replace() method in combination with regular expressions and JSX. Create a function that takes the input text and search query as parameters. Use the replace() method with a regular expression and the query as the pattern, wrapping it in a span element with a CSS class for highlighting. Return the modified JSX with the matching text highlighted. Then, call this function within your component, passing the relevant values. Finally, render the resulting JSX, and the matching text will be visually highlighted using the specified CSS class.");

            const [searchTerm, setSearchTerm] = useState("");

            const [highlightColor, setHighlightColor] = useState("#FFFF00");

​

            const highlightText = () => {

                const textContainer = document.querySelector(".text-container");

                const highlightedText = textContainer.querySelector(".highlight");

                if (highlightedText) {

                    highlightedText.outerHTML = highlightedText.innerHTML;

                }

                const regex = new RegExp(searchTerm, "gi");

                textContainer.innerHTML = text.replace(regex, match => {

                    return `<span class="highlight" style="background-color: ${highlightColor};">${match}</span>`;

                });

            };

​

            const handleSearchTermChange = (e) => {

                setSearchTerm(e.target.value);

                highlightText();

            };

​

            const highlightedText = () => {

                const regex = new RegExp(searchTerm, "gi");

                return text.replace(regex, match => {

                    return `<span style="background-color: ${highlightColor};">${match}</span>`;

                });

            };

​

            return (

                <div className='container'>

                    <h3>React Js Highlight Matching Text</h3>

                    <label htmlFor="search">Search:</label>

                    <input

                        id="search"

                        value={searchTerm}

                        onChange={handleSearchTermChange}

                        onKeyUp={highlightText}

                    />

                    <div className="text-container">

                        <p dangerouslySetInnerHTML={{ __html: highlightedText() }}></p>

                    </div>

                </div>

            );

        }

​

        ReactDOM.render(<App />, document.getElementById('app'));

    </script>