@gechiui/components/src/text-highlight/index.js

UI components for GeChiUI.

/**
 * External dependencies
 */
import { escapeRegExp } from 'lodash';

/**
 * GeChiUI dependencies
 */
import { createInterpolateElement } from '@gechiui/element';

const TextHighlight = ( { text = '', highlight = '' } ) => {
	const trimmedHighlightText = highlight.trim();

	if ( ! trimmedHighlightText ) {
		return text;
	}

	const regex = new RegExp(
		`(${ escapeRegExp( trimmedHighlightText ) })`,
		'gi'
	);

	return createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {
		mark: <mark />,
	} );
};

export default TextHighlight;