Eleventy-load obfuscate for use with eleventy-load-html plugin

eleventy-load-obfuscate.js

/**
 * Escape RegExp special characters
 *
 * Inlined from [email protected] as we don't use ESM here.
 *
 * @see https://github.com/sindresorhus/escape-string-regexp
 *
 * @param {string} string
 * @returns {RegEx}
 */
const escapeStringRegexp = (string) => {
  if (typeof string !== 'string') {
    throw new TypeError('Expected a string');
  }

  // Escape characters with special meaning either inside or outside character sets.
  // Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
};

/**
 * Default obfuscator function transforms to html entities
 *
 * @param {string} str
 * @returns {string}
 */
const toEntities = (str) =>
  Array.from(str)
    .map((char) => `&#${char.charCodeAt(0)};`)
    .join('');

/**
 * Eleventy-loader plugin to obfuscate given values in html output.
 *
 * This plugin rule should follow the eleventy-load-html loader to avoid entities being unescaped.
 *
 * @param {string} content
 * @param {{ enabled?: boolean, values?:string[], obfuscator?: (s:string) => string }} options
 * @returns {string}
 */
module.exports = function (content, options = {}) {
  const { enabled, values = [], obfuscator = toEntities } = options;

  if (!enabled) {
    return content;
  }

  return values.reduce((acc, value) => {
    const re = new RegExp(escapeStringRegexp(value), 'g');
    acc = acc.replace(re, (match) => obfuscator(match));
    return acc;
  }, content);
};

eleventy.js

//...
// eleventy-load configuration
// eleventyObfuscate loader should follow eleventyLoadHtml

    {
      test: /\.(html|md|njk)$/,
      loaders: [
        {
          loader: eleventyLoadHtml,
          options: {
            minimize: isProduction ? {} : false,
          },
        },
        {
          loader: eleventyObfuscate,
          options: {
            values: obsfuscateValues,
            enabled: true,
          },
        },
      ],
    },
  
  // ...

The obsfuscateValues should be an array of strings to match. This assumes those value are known at build time (e.g. contact email defined in the site data. If you need to obfuscate page content then a complex solution would be required.

Relates to gregives/eleventy-load-html#3

Can do away with the regex and use replaceAll if you are using Node >= 15.