Obtenga un grupo de captura de $ 1 con RegExp dinámico

Tenía curiosidad si alguien sabe lo que estoy haciendo mal aquí. Quiero usar una variable dentro de la expresión, pero por alguna razón cuando trato de hacerlo, no parece tomar el término de búsqueda con el$1.

Esto vuelve correctamente:

$('.content').html(function(_,i) {
  return  i.replace(/(cat)/gi, '<span class="highlight">$1</span>');
});

Por alguna razón, esto no:

$('.content').html(function(_,i) {
  var customVariable = 'cat';
  var pattern = new RegExp(customVariable,'gi');
  return  i.replace(pattern, '<span class="highlight">$1</span>');
});

Soy muy nuevo para capturar grupos en RegExp y no pude encontrar a nadie más que tenga este problema, así que supongo que me falta algo muy simple.

Respuestas a la pregunta(2)

Su respuesta a la pregunta