lodash#escapeRegExp JavaScript Examples

/**
 * Returns a RegExp from a given string. If the string is not a valid regexp,
 * it is escaped. Returned regexp is case-insensitive.
 */
function makeRegExp(expression, options = 'i') {
  try {
    return new RegExp(expression, options);
  } catch (e) {
    return new RegExp(escapeRegExp(expression), options);
  }
}

/**
 * Returns a RegExp from a given string. If the string is not a valid regexp,
 * it is escaped. Returned regexp is case-insensitive.
 */
function makeRegExp(expression, options = 'i') {
  try {
    return new RegExp(expression, options);
  } catch (e) {
    return new RegExp(escapeRegExp(expression), options);
  }
}

Highlight = {
  /**
   * Returns a React DOM element containing highlights.
   */
  getHighlightedElement(str: string, highlightsList?: Offsets[], className?: string) {
    let output = str;
    if (highlightsList && className) {
      // TODO: Replace with lodash once it can be required safely.
      const highlights = highlightsList
        .concat()
        .sort((a, b) => a.beginOffset - b.beginOffset);

      const highlightSpecs = createHighlightSpec(highlights, str.length);
      // If highlightSpecs is an empty list there were no highlights, or
      // something was not valid
      if (highlightSpecs.length) {
        output = highlightSpecs.map(function(spec) {
          return getSpan(str, spec.start, spec.end, spec.highlight, className);
        });
      }
    }
    return <span>{output}</span>;
  },

  /**
   * Returns a React DOM element containing highlights.
   */
  getSubstringHighlightedElement(str: string, substr: string, className: string) {
    if (!substr) {
      return <span>{str}</span>;
    }
    const index = str.toLowerCase().indexOf(substr.toLowerCase());
    if (index === -1) {
      return <span>{str}</span>;
    }

    return this.getHighlightedElement(
      str,
      [{beginOffset: index, endOffset: index + substr.length}],
      className
    );
  },

  // TODO: Upgrade React, or re-write with usable js features in current node version.
  /**
   * Performs a case-insensitive search within a string for each term in the list, each time a term
   * is found, it is wrapped in a span with the given class name. All instances of a term are highlighted.
   * Partials are ignored (i.e. if your term is "man" and the string is "woman", it will not be highlighted.
   *
   * Note: This takes a different approach than the functions above, but is located here
   * to centralize solutions and maximize discoverability.
   */
  highlightTerms(str: string, terms: string[], className: string) {
    const sortedTerms = terms
      .map((term) => escapeRegExp(term))
      .sort((a, b) => b.length - a.length);

    const els = [];
    const highlightRegex = new RegExp(
      `\\b(?<!-)(${sortedTerms.join('|')})(?=\\W|$)(?!-)`,
      'i'
    );

    function iterate(remainingStr) {
      if (!remainingStr) {
        return;
      }

      const matchResult = remainingStr.match(highlightRegex);
      if (!matchResult) {
        els.push(remainingStr);
        return;
      }

      const [fullMatch, match] = matchResult;
      const offset = fullMatch.indexOf(match);

      const beforeIndex = remainingStr.slice(0, matchResult.index + offset);
      const afterIndex = remainingStr.slice(matchResult.index + offset + match.length);

      els.push(beforeIndex);
      els.push(
        <span className={className} key={`${match}-${els.length}`}>
          {match}
        </span>
      );

      iterate(afterIndex);
    }

    iterate(str);
    return <span>{els}</span>;
  },
}