const escapeRegex =  (string) => {
  return string.replace(/([^a-zA-Z0-9])/g, s =>  `\\${s}`);
}

// will return a valid HTML string.
const highlight = (s, t) => {
  s = escapeForHTML(s)
  t = escapeForHTML(t)
  const regex = new RegExp("(" + escapeRegex(t) + ")", "ig")
  return s.replace(regex, str =>  `<strong class='color-autocomplete'>${str}</strong>`);
}

const escapeForHTML = (text) => {
  var escaped = '';

  for (var i = 0; i < text.length; i++) {
    const code = text.charCodeAt(i);
    const char = text.charAt(i);
    const matches = char.match(/^[a-zA-Z0-9]$/);

    /* don't escape alphanumerical chars */
    if (code >= 256 || (Array.isArray(matches) && matches.length === 1)) {
      escaped += char;
      continue;
    }

    escaped += '&#x'+code.toString(16).padEnd(2, '0')+';';
  }

  return escaped;
}

document.body.innerHTML = highlight("Cadre de sécurité opposable juridiquement", "Cadre")