Obtenha $ 1 grupo de captura com RegExp dinâmico

Fiquei curioso se alguém sabe o que estou fazendo de errado aqui. Eu quero usar uma variável dentro da expressão, mas por algum motivo, quando tento, ele não parece pegar o termo de pesquisa com o$1.

Isso retorna corretamente:

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

Por alguma razão, isso não:

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

Sou muito novo para capturar grupos no RegExp e não consegui encontrar mais ninguém com esse problema, portanto, presumo que estou perdendo algo muito simples.

questionAnswers(2)

yourAnswerToTheQuestion