JSFiddle - React, Tailwind, and code Playground

Helper function creates from string template object. Takes string and regexp for identifying placeholders and extracting its names.

by AntowaKartowa

TypeScript

export const templateifyString = (string: string, pattern: RegExp = /\[\[(\w*)\]\]/g) => {
  const substrings: string[] = [];
  const keys: string[] = [];
  let prevPos = 0;

  [...(string.matchAll(pattern))].forEach(item => {
    const [pattern, key] = item;
    keys.push(key);
    substrings.push(string.slice(prevPos, item.index));
    prevPos = item.index + pattern.length;
  });
  substrings.push(string.slice(prevPos, string.length));

  const map = (values = {}) => {
    const result = [substrings[0]];

    keys.forEach((key, i) => {
      const value = values[key] || '';

      result.push(value, substrings[i + 1]);
    });

    return result;
  };

  const toString = (values = {}): string => map(values).join('');

  return { substrings, keys, map, toString };
};