ukraine-timemap/src/components/SearchRow.jsx

import React from 'react'

const SearchRow = ({ description, category, location, date, query }) => {
    function getHighlightedText(text, highlight) {
        // Split text on highlight term, include term itself into parts, ignore case
        const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
        return <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <span style={{backgroundColor: 'yellow', color: 'black'}}>{part}</span> : part)}</span>;
    }

    function getShortDescription(text, searchQuery) {
        var regexp = new RegExp(`(([^ ]* ){0,6}[a-zA-Z]*${searchQuery.toLowerCase()}[a-zA-Z]*( [^ ]*){0,5})`, 'gm')
        let parts = text.toLowerCase().match(regexp)
        for (var x=0; x < (parts ? parts.length : 0); x++) {
            parts[x] = '...'+parts[x]
        }
        const firstLine = [text.match('(([^ ]* ){0,10})', 'm')[0]]
        return parts || firstLine;
    }

    return (
        <div className='search-row'>
            <div className='location-date-container'>
                <div className='location-container'>
                    <i className='material-icons'>location_on</i>
                    <p>{getHighlightedText(location, query)}</p>
                </div>
                <div className='date-container'>
                    <i className='material-icons'>event</i>
                    <p>{getHighlightedText(date, query)}</p>
                </div>
            </div>
            <p>{getShortDescription(description, query).map(match => {
                return <span>{getHighlightedText(match, query)}...<br></br></span>
            })}</p>
        </div>
    )
}

export default SearchRow