W3docs

Anclas ^ y $ en Expresiones Regulares de JavaScript

Las anclas son caracteres especiales en expresiones regulares que permiten coincidir posiciones dentro de una cadena. Las dos anclas principales son ^ y $.

Introducción a las Anclas en JavaScript

Las anclas son caracteres especiales en las expresiones regulares que permiten coincidir posiciones dentro de una cadena en lugar de caracteres reales. Las dos anclas principales en JavaScript son ^ (circunflejo) y $ (signo de dólar). El ancla ^ afirma que la coincidencia debe comenzar al inicio de la cadena, mientras que el ancla $ afirma que la coincidencia debe ocurrir al final de la cadena.

Una idea clave que hay que comprender primero: las anclas tienen ancho cero. Coinciden con una posición entre caracteres, no con un carácter en sí mismo, por lo que nunca consumen texto. Por eso /^abc$/ coincide con la cadena de tres caracteres "abc" y no con una de cuatro o cinco caracteres — el ^ y el $ no añaden longitud a la coincidencia. Esta misma propiedad permite usar un ancla en replace para insertar texto al inicio o al final de una cadena sin eliminar nada:

javascript— editable

Esta página cubre cómo coincidir el inicio y el fin de una cadena, combinar ambas anclas para coincidencias exactas de cadena completa, cómo el indicador m (multilínea) cambia su comportamiento, y cómo funcionan las anclas con test() y match().

El Ancla ^: Coincidir el Inicio de una Cadena

El ancla ^ se utiliza para comprobar si una cadena comienza con un patrón específico.

Uso del Ancla ^

javascript— editable

En este ejemplo, ^Hello garantiza que la cadena comience con "Hello". La cadena 'Hello, world!' coincide con el patrón, pero 'Say Hello, world!' no coincide porque "Hello" no está al principio.

Ejemplo Práctico: Validar el Inicio de una Dirección de Correo Electrónico

javascript— editable

Esta expresión regular comprueba si una dirección de correo electrónico comienza con un nombre de usuario válido. La cadena '[email protected]' coincide, y '[email protected]' también coincide porque ambas comienzan con un patrón de nombre de usuario válido antes del símbolo @.

El Ancla $: Coincidir el Final de una Cadena

El ancla $ se utiliza para comprobar si una cadena termina con un patrón específico.

Uso del Ancla $

javascript— editable

En este ejemplo, world!$ garantiza que la cadena termine con "world!". La cadena 'Hello, world!' coincide con el patrón, pero 'Hello, world' no coincide porque le falta el signo de exclamación al final.

Ejemplo Práctico: Validar una Extensión de Archivo

javascript— editable

Esta expresión regular comprueba si un nombre de archivo termina con ".txt". La cadena 'document.txt' coincide, mientras que 'document.pdf' no coincide.

Información

Las anclas (^ y $) en las expresiones regulares de JavaScript permiten coincidir con precisión el inicio o el final de una cadena, garantizando una validación y manipulación de texto exacta.

Combinar ^ y $ para Coincidencias Exactas

Al combinar ^ y $, se puede crear una expresión regular que coincida con una cadena de forma exacta, de principio a fin.

Uso de Ambas Anclas

javascript— editable

En este ejemplo, ^Hello, world!$ garantiza que toda la cadena coincida con "Hello, world!". Solo la cadena 'Hello, world!' coincide exactamente.

Ejemplo Práctico: Validar un Patrón Exacto

javascript— editable

Esta expresión regular garantiza que la dirección de correo electrónico tenga un formato válido de principio a fin. Verifica un nombre de usuario válido, un símbolo "@", un nombre de dominio y un dominio de nivel superior.

Uso de Anclas para Validación Precisa

Las anclas son especialmente útiles para validar entradas donde es necesario asegurarse de que toda la cadena se ajuste a un patrón. Por ejemplo, use ^ y $ para validar números de teléfono, códigos postales o cualquier entrada con formato fijo.

Ejemplo: Validar un Número de Teléfono de EE. UU.

javascript— editable

Esta expresión regular garantiza que el número de teléfono tenga el formato (123) 456-7890. Usa ^ para afirmar el inicio y $ para afirmar el final, asegurando que toda la cadena coincida con el patrón especificado.

Anclas y el Indicador Multilínea (m)

Por defecto, ^ y $ coinciden únicamente con el inicio y el final de toda la cadena, incluso cuando dicha cadena contiene saltos de línea. Al añadir el indicador m (multilínea), el significado cambia: ^ y $ también coinciden con el inicio y el final de cada línea.

javascript— editable

Sin m, /^.+$/g devuelve null porque . no coincide con los caracteres de nueva línea, por lo que ninguna línea abarca toda la cadena de inicio a fin. Con m, cada línea se evalúa de forma independiente. Si se trabaja con entrada multilínea, el indicador m es casi siempre lo que se necesita — consulte Modo multilínea de anclas, indicador "m" para un análisis más detallado.

Anclas con test() y match()

Las anclas se comportan igual independientemente del método que se utilice; la diferencia está en lo que devuelve cada método.

  • regexp.test(str) devuelve un boolean — ideal para validación ("¿esta cadena comienza/termina de la manera correcta?").
  • str.match(regexp) devuelve el texto coincidente (o un array con el indicador g), o null cuando no hay coincidencia — útil cuando también se necesita el valor capturado.
javascript— editable

Debido a que \d+$ está anclado al final, captura el número final 42 y nada más. Cuando solo se necesita una respuesta de sí/no, se prefiere test(); se recurre a match() cuando se necesita recuperar el valor.

Información

Si desea coincidir un carácter específico en un límite entre un carácter de palabra y uno que no lo es, en lugar del borde de la cadena, use el límite de palabra \b en lugar de ^ o $.

Conclusión

Las anclas son herramientas poderosas en las expresiones regulares de JavaScript que permiten coincidir posiciones dentro de una cadena. Al dominar las anclas ^ y $, se pueden crear patrones precisos y eficaces para validar y manipular cadenas. Ya sea para garantizar que una cadena comience o termine con un patrón específico, o para coincidir una cadena completa de forma exacta, las anclas son esenciales para operaciones de expresiones regulares robustas.

Práctica

Práctica
¿Qué es cierto sobre el uso del circunflejo (^) y el signo de dólar ($) en JavaScript?
¿Qué es cierto sobre el uso del circunflejo (^) y el signo de dólar ($) en JavaScript?
Was this page helpful?