Finds & highlights given phrases inside a Web document

find-and-highlight.ts

type IdentityFunction<T> = (argument: T) => T;

type InnerHTMLTransformer = IdentityFunction<string>;

type RegularExpressionFlags =
  | 'i'
  | 'g'
  | 'ig';

type Phrase = string | RegExp;

const toRegularExpression = (flags: RegularExpressionFlags) =>
  (phrase: Phrase): RegExp =>
    phrase instanceof RegExp
      ? phrase
      : new RegExp(phrase, flags);

const transformInnerHTML = (transformer: InnerHTMLTransformer) =>
  (element: Element): void => {
    element.innerHTML = transformer(element.innerHTML);
  };

const transform = (phrases: Phrase[], transformer: InnerHTMLTransformer, selector: string = 'body *') =>
  phrases
    .map(toRegularExpression('ig'))
    .forEach(expression =>
      document
        .querySelectorAll(selector)
        .forEach(transformInnerHTML(innerHTML => innerHTML.replace(expression, transformer))),
    );

const highlight: InnerHTMLTransformer = source =>
  `<span style="background-color: #fdfbb7">${source}</span>`;

transform(
  ['hello', /world/ig],
  highlight,
);

sanitize.ts

const sanitize = (input: string | null, separator = ','): RegExp[] =>
  (input === null)
    ? []
    : input
        .split(separator)
        .map(phrase => phrase.trim())
        .map(toRegularExpression('ig'));

Usage as a bookmarklet:

javascript: void function (input) {
  "use strict";

   const toRegularExpression = (flags) =>
    (phrase) =>
      phrase instanceof RegExp
        ? phrase
        : new RegExp(phrase, flags);

   const transformInnerHTML = (transformer) =>
    (element) => {
      element.innerHTML = transformer(element.innerHTML);
  };

   const sanitize = (input, separator = ',') => (input === null)
      ? []
      : input
          .split(separator)
          .map(phrase => phrase.trim())
          .map(toRegularExpression('ig'));

   const transform = (phrases, transformer, selector = 'body *') =>
    phrases
      .map(toRegularExpression('ig'))
      .forEach(expression =>
        document
          .querySelectorAll(selector)
          .forEach(transformInnerHTML(innerHTML => innerHTML.replace(expression, transformer)))
        );

   const highlight = source =>
    `<span style="background-color: #fdfbb7">${source}</span>`;

   transform(
    sanitize(input),
    highlight
  );
}(prompt('Provide the list of phrases separated by commas:', 'hello, world'));