@wordpress/components/build/text-highlight/index.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TextHighlight = void 0;

var _element = require("@wordpress/element");

var _strings = require("../utils/strings");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Highlights occurrences of a given string within another string of text. Wraps
 * each match with a `<mark>` tag which provides browser default styling.
 *
 * ```jsx
 * import { TextHighlight } from '@wordpress/components';
 *
 * const MyTextHighlight = () => (
 *   <TextHighlight
 *     text="Why do we like Gutenberg? Because Gutenberg is the best!"
 *     highlight="Gutenberg"
 *   />
 * );
 * ```
 */
const TextHighlight = props => {
  const {
    text = '',
    highlight = ''
  } = props;
  const trimmedHighlightText = highlight.trim();

  if (!trimmedHighlightText) {
    return (0, _element.createElement)(_element.Fragment, null, text);
  }

  const regex = new RegExp(`(${(0, _strings.escapeRegExp)(trimmedHighlightText)})`, 'gi');
  return (0, _element.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), {
    mark: (0, _element.createElement)("mark", null)
  });
};

exports.TextHighlight = TextHighlight;
var _default = TextHighlight;
exports.default = _default;
//# sourceMappingURL=index.js.map