Escapado de caracteres especiales en expresiones regulares de JavaScript

Supongamos que queremos que un carácter especial se represente a sí mismo. Para ello debemos escaparlo usando una barra invertida. Veamos algunos ejemplos.

Ejemplo

En el siguiente ejemplo, el autor de la expresión regular quería que el patrón de búsqueda se viera así: letra 'a', luego un signo más '+', luego letra 'x'. Sin embargo, el autor del código no escapó el carácter '+' y por lo tanto el patrón de búsqueda en realidad se ve así: letra 'a' una o más veces, luego letra 'x':

javascriptlet str = 'a+x ax aax aaax';
let res = str.replace(/a+x/g, '!');

Como resultado, en la variable se guardará lo siguiente:

javascript'a+x ! ! !'

Ejemplo

Y ahora el autor escapó el signo más con una barra invertida. Ahora el patrón de búsqueda se ve como debería: letra 'a', luego signo más '+', luego letra 'x'.

javascriptlet str = 'a+x ax aax aaax';
let res = str.replace(/a\+x/g, '!');

Como resultado, en la variable se guardará lo siguiente:

javascript'! ax aax aaax'

Ejemplo

En este ejemplo, el patrón se ve así: letra 'a', luego un punto '.', luego letra 'x':

javascriptlet str = 'a.x abx azx';
let res = str.replace(/a\.x/g, '!');

Como resultado, en la variable se guardará lo siguiente:

javascript'! abx azx'

Ejemplo

En el siguiente ejemplo, el autor olvidó escapar el punto y bajo la expresión regular cayeron todas las subcadenas, ya que un punto sin escapar representa cualquier carácter:

javascriptlet str = 'a.x abx azx';
let res = str.replace(/a.x/g, '!');

Como resultado, en la variable se guardará lo siguiente:

javascript'! ! !'

Observación

Preste atención a que si olvida la barra invertida para el punto (cuando este debe representarse a sí mismo) - esto puede pasar inadvertido:

javascript'a.x'.replace(/a.x/g, '!'); // devuelve '!', como queríamos

Visualmente funciona correctamente (ya que el punto representa cualquier carácter, incluyendo un punto normal '.'). Pero si cambiamos la cadena en la que se realizan los reemplazos, veremos nuestro error:

javascript'a.x abx azx'.replace(/a.x/g, '!'); // devuelve '! ! !', pero se esperaba '! abx azx'

Lista de caracteres especiales y ordinarios

Si se escapa un carácter ordinario, no pasará nada grave; seguirá representándose a sí mismo. La excepción son los dígitos, no se pueden escapar.

A menudo surge la duda de si un determinado carácter es especial. Algunos llegan al extremo de escapar todos los caracteres sospechosos seguidos. Sin embargo, esta es una mala práctica (ensucia la expresión regular con barras invertidas).

Son caracteres especiales: $ ^ . * + ? \ / {} [] () |

No son caracteres especiales: @ : , ' " ; - _ = < > % # ~ `& !

Problemas prácticos

javascriptlet str = 'a.a aba aea';

javascriptlet str = '2+3 223 2223';

javascriptlet str = '23 2+3 2++3 2+++3 345 567';

javascriptlet str = '23 2+3 2++3 2+++3 445 677';

javascriptlet str = '*+ *q+ *qq+ *qqq+ *qqq qqq+';

javascriptlet str = '[abc] {abc} abc (abc) [abc]';