regReplaceWithComponent.ts

function regReplaceWithComponent(
  text: string,
  exp: RegExp,
  fn: (match: string, index: number) => JSXElement
) {
  const matches = Array.from(text.matchAll(exp));
  const items: JSXElement[] = [];

  for (let index = 0; index < matches.length; index++) {
    const match = matches[index];
    const prevMatch = index ? matches[index - 1] : undefined;
    const offset = prevMatch ? prevMatch.index! + prevMatch[0].length : 0;

    items.push(text.slice(offset, match.index));
    items.push(fn(match[0], index));

    const isLastMatch = index === matches.length - 1;
    const hasTextAfterLastMatch = match.index! + match[0].length < text.length;

    if (isLastMatch && hasTextAfterLastMatch) {
      items.push(text.slice(match.index! + match[0].length));
    }
  }

  return items.length ? items : text;
}

Hello. I think this is exactly what I need but struggling to get it working.

What should the third argument for the fn be? For example if I have a component <ProductTiles /> how should that be passed in?

Thanks!