custom-search.js

// Set up dynamic portals
// In Core we accept #DYNAMICtrueSEARCH1987REPLACEbirthyear
// And it searches for "1987" then surrounds it in a span tag classed "birthyear"

if (props.config.dynamic) {
  const unspacedTextToReplace = props.config.search + '';
  const textToReplace = unspacedTextToReplace ? replaceAll(unspacedTextToReplace, '1s', ' ') : '';

  const regexReplace = new RegExp(`\\s${textToReplace}\\s`, 'i');
  const nameOfReplaceClass = props.config.replace;
  props.nodes.forEach(node => {
    const currentText = node.innerHTML;
    const foundText = currentText.match(regexReplace);
    if (foundText) {
      const modifiedText = currentText.replace(
        regexReplace,
        ` <span class="${nameOfReplaceClass}">${foundText[0].trim()}</span> `
      );
      node.innerHTML = modifiedText;
    }
  });
}

function escapeRegExp(str) {
  return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}