diff options
Diffstat (limited to 'files/es/web/javascript/guide/regular_expressions')
7 files changed, 1904 insertions, 0 deletions
diff --git a/files/es/web/javascript/guide/regular_expressions/aserciones/index.html b/files/es/web/javascript/guide/regular_expressions/aserciones/index.html new file mode 100644 index 0000000000..b822cdd2bf --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/aserciones/index.html @@ -0,0 +1,247 @@ +--- +title: Aserciones +slug: Web/JavaScript/Guide/Regular_Expressions/Aserciones +tags: + - Aserciones + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Las aserciones incluyen límites, que indican el comienzo y el final de líneas y palabras, y otros patrones que indican de alguna manera que el reconocimiento es posible (incluidas las expresiones anticipadas, condicionales e inversas).</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div> + +<h3 id="Aserciones_de_tipo_límite">Aserciones de tipo límite</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>^</code></td> + <td> + <p>Coincide con el comienzo de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca inmediatamente después de un caracter de salto de línea. Por ejemplo, <code>/^A/</code> no coincide con la "A" en "alias A", pero coincide con la primera "A" en "Alias A".</p> + + <div class="blockIndicator note"> + <p>Este caracter tiene un significado diferente cuando aparece al comienzo de un {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupo")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Coincide con el final de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca hasta inmediatamente antes de un caracter de salto de línea. Por ejemplo, <code>/r$/</code> no coincide con la "r" en "espera", pero sí en "esperar".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Marca el límite de una palabra. Esta es la posición en la que un caracter de palabra no va seguido o precedido por otro caracter de palabra, por ejemplo, entre una letra y un espacio. Ten en cuenta que el límite de una palabra encontrada no se incluye en el resultado. En otras palabras, la longitud de un límite de palabra encontrada es cero.</p> + + <p>Ejemplos:</p> + + <ul> + <li><code>/\bl/</code> encuentra la "l" en "luna".</li> + <li><code>/un\b/</code> no concuerda con "un" en "luna", porque "un" va seguido de "a", que es un carácter de palabra.</li> + <li><code>/una\b/</code> coincide con "una" en "luna", porque "una" es el final de la cadena, por lo tanto no va seguido de un carácter de palabra.</li> + <li><code>/\w\b\w/</code> nunca encontrará con nada, porque un caracter de palabra nunca puede ir seguido de un caracter que no sea de palabra y otro de palabra.</li> + </ul> + + <p>Para hacer coincidir un carácter de retroceso (<code>[\b]</code>), consulta {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "Clases de caracteres")}}.</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Coincide con un límite sin palabra. Esta es una posición en la que el caracter anterior y siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras, por ejemplo, entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras encontradas, el límite sin palabras reconocidas tampoco se incluye en el resultado. Por ejemplo, <code>/\Bme/</code> coincide con "me" en "al mediodía", y <code>/ay\B/</code> coincide con "ay" en "posiblemente ayer".</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Otras_aserciones">Otras aserciones</h3> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El caracter <code>?</code> también se puede utilizar como cuantificador.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p><strong>Aserción anticipada</strong>: Coincide con "x" solo si "x" va seguida de "y". Por ejemplo, <code>/Jack(?=Sprat)/</code> coincide con "Jack" solo si va seguido de "Sprat".<br> + <code>/Jack(?=Sprat|Frost)/</code> coincide con "Jack" solo si va seguido de "Sprat" o "Frost". Sin embargo, ni "Sprat" ni "Frost" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p><strong>Aserción anticipada negativa</strong>: Coincide con "x" solo si "x" <span> no está seguida de </span>"y"<span>.</span> Por ejemplo, <code>/\d+(?!\.)/</code><span> coincide con un número solo si no va seguido de un punto decimal. </span><code>/\d+(?!\.)/.exec('3.141')</code> coincide con "141" pero no con "3."</p> + </td> + </tr> + <tr> + <td><code>(?<=y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa</strong>: coincide con "x" solo si "x" está precedida por "y". Por ejemplo, <code>/(?<=Jack)Sprat/</code><span> coincide con "Sprat" sólo si va precedida de "Jack". </span><code>/(?<=Jack|Tom)Sprat/</code> coincide con "Sprat" solo si va precedido de "Jack" o "Tom". Sin embargo, ni "Jack" ni "Tom" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>(?<!y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa negativa</strong>: coincide con "x" solo si "x" <em>no</em> está precedida por "y". Por ejemplo, <code>/(?<!-)\d+/</code><span> coincide con un número solo si no está precedido por un signo de menos. </span><code>/(? coincide con "3". <code>/(?<!-)\d+/.exec('-3')</code> no se encuentra la coincidencia porque el número está precedido por el signo menos.</code></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_de_descripción_de_tipo_límite">Ejemplo de descripción de tipo límite</h3> + +<pre class="brush: js notranslate">// Usa límites Regex para arreglar cadenas con errores. +let multilineaIncorrecta = `tey, la brillante manzena vered +toy cuelga en una rama del arbol vered`; + +// 1) Usa ^ para corregir la coincidencia al principio de la cadena y justo después de la nueva línea. +multilineaIncorrecta = multilineaIncorrecta.replace(/^t/gim,'h'); +console.log(1, multilineaIncorrecta); // corrige 'tey', 'toy' => 'hey', 'hoy'. + +// 2) Usa $ para arreglar el reconocimiento al final del texto. +multilineaIncorrecta = multilineaIncorrecta.replace(/ed$/gim,'de'); +console.log(2, multilineaIncorrecta); // corrige 'vered' => 'verde'. + +// 3) Usa \b para encontrar los caracteres justo en el borde entre una palabra y un espacio. +multilineaIncorrecta = multilineaIncorrecta.replace(/\ba/gim,'á'); +console.log(3, multilineaIncorrecta); // corrige 'arbol' sin tocar nada más. + +// 4) Usa \B para encontrar los caracteres dentro de los bordes de una entidad. +multilineaCorrecta = multilineaIncorrecta.replace(/\Ben/gim,'an'); +console.log(4, multilineaCorrecta); // corrige 'manzena' pero no toca 'en'. +</pre> + +<h3 id="Busca_al_comienzo_de_la_entrada_usando_un_caracter_de_control">Busca al comienzo de la entrada usando un caracter de control <code>^</code></h3> + +<p>Usa <code>^</code> para hacer coincidir al comienzo de la entrada. En este ejemplo, podemos obtener las frutas que comienzan con 'A' con una expresión regular <code>/^A/</code>. Para seleccionar las frutas adecuadas, podemos utilizar el método {{JSxRef("Objetos_globales/Array/filter", "filter")}} con un {{JSxRef("Funciones/Arrow_functions", "función flecha")}}.</p> + +<pre class="brush: js notranslate">let frutas = ["Manzana", "Sandía", "Naranja", "Aguacate", "Fresa", "Melón"]; + +// Selecciona frutas que comiencen con 'M' por la Regex /^M/. +// Aquí se usa el símbolo de control '^' solo en un rol: Reconocer desde el inicio una entrada. + +let frutasEmpiezanConM = frutas.filter(fruta => /^M/.test(fruta)); +console.log(frutasEmpiezanConM); // [ 'Manzana', 'Melón' ]</pre> + +<p>En el segundo ejemplo, <code>^</code> se usa tanto para hacer coincidir al comienzo de la entrada como para crear conjuntos de caracteres negados o complementados cuando se usa dentro de {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos")}}.</p> + +<pre class="brush: js notranslate">let frutas = ["Manzana", "Sandía", "Naranja", "Aguacate", "Fresa", "Melón"]; + +// Seleccionar frutas que no comiencen por 'M' con la regexp /^[^M]/. +// En este ejemplo, se representan dos significados del símbolo de control '^': +// 1) Inicio coincidente de la entrada +// 2) Un conjunto de caracteres negado o complementado: [^M] +// Es decir, coincide con cualquier cosa que no esté encerrado entre los corchetes. + +let frutasNoEmpiezanConM = frutas.filter(fruta => /^[^M]/.test(fruta)); + +console.log(frutasNoEmpiezanConM); // [ "Sandía", "Naranja", "Aguacate", "Fresa" ]</pre> + +<h3 id="Reconoce_el_límite_de_palabra">Reconoce el límite de palabra</h3> + +<pre class="brush: js notranslate">let frutasConDescripcion = ["Manzana roja", "Piña amarilla", "Aguacate verde"]; + +// Selecciona descripciones que contengan terminaciones de palabras 'ja' o 'de': +let deJaSeleccion = frutasConDescripcion.filter(descr => /(de|ja)\b/.test(descr)); + +console.log(deJaSeleccion); // ["Manzana roja", "Aguacate verde"]</pre> + +<h3 id="Aserción_anticipada">Aserción anticipada</h3> + +<pre class="brush: js notranslate">// JS aserción anticipada x(?=Y) + +let regex = /Primer(?= prueba)/g; + +console.log('Primer prueba'.match(regex)); // [ 'Primer' ] +console.log('Primer melocotón'.match(regex)); // null +console.log('Esta es mi Primer prueba en un año.'.match(regex)); // [ 'Primer' ] +console.log('Este es mi Primer melocotón en un mes.'.match(regex)); // null +</pre> + +<h3 id="Aserción_anticipada_negativa_básica">Aserción anticipada negativa básica</h3> + +<p>Por ejemplo, <code>/\d+(?!\.)/</code><span> coincide con un número solo si no va seguido de un punto decimal. </span><code>/\d+(?!\.)/.exec('3.141')</code> coincide con "141" pero no con "3."</p> + +<pre class="brush: js notranslate">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ] +</pre> + +<h3 id="Diferente_significado_del_uso_de_la_combinación_!_en_aserciones_y_rangos">Diferente significado del uso de la combinación '?!' en aserciones y rangos</h3> + +<p>Diferente significado del uso de la combinación <code>?!</code> en {{JSxRef("../Guide/Regular_Expressions/Aserciones", "Aserciones")}} <code>/x(?!y)/</code> y de <code>[^?!]</code> en {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Rangos")}}.</p> + +<pre class="brush: js notranslate">let naranjaNoLimon = "¿Quieres beber jugo de naranja? ¡Sí, no quiero tomar jugo de limón!"; + +// Diferente significado del uso de la combinación '?!' en Aserciones /x(?!y)/ y [^?!] en Rangos. +let regexNoSeleccionaLimon = /[^?!]+beber(?! de limón)[^?!]+[?!]/gi +console.log(naranjaNoLimon.match(regexNoSeleccionaLimon)); // [ '¿Quieres beber jugo de naranja?' ] + +let regexNoSeleccionaNaranja = /[^?!]+tomar(?! de naranja)[^?!]+[?!]/gi +console.log(naranjaNoLimon.match(regexNoSeleccionaNaranja)); // [ ' ¡Sí, no quiero tomar jugo de limón!' ] +</pre> + +<h3 id="Aserción_inversa">Aserción inversa</h3> + +<pre class="brush: js notranslate">let naranjas = ['naranja madura A', 'naranja verde B', 'naranja madura C',]; + +let naranjas_maduras = naranjas.filter(fruta => fruta.match(/(?<=naranja) madura/)); +console.log(naranjas_maduras); // [ 'naranja madura A ', 'naranja madura C' ] +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assertion', 'RegExp: Aserciones')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html b/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html new file mode 100644 index 0000000000..6de027b270 --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html @@ -0,0 +1,220 @@ +--- +title: Clases de caracteres +slug: Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - RegExp + - clases de caracteres +translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes +--- +<p>{{JsSidebar("Guía de JavaScript")}}</p> + +<p>Las clases de caracteres distinguen tipos de caracteres como, por ejemplo, distinguen entre letras y dígitos.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-character-classes.html")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + </tbody> + <tbody> + <tr> + <td><code>.</code></td> + <td> + <p>Tiene uno de los siguientes significados:</p> + + <ul> + <li>Coincide con cualquier carácter único <em>excepto</em> terminadores de línea: <code>\n</code>, <code>\r</code>, <code>\u2028</code> o <code>\u2029</code>. Por ejemplo, <code>/.i/</code> coincide con "mi" y "si", pero no con "día", en "si alegra mi día".</li> + <li>Dentro de un juego de caracteres, el punto pierde su significado especial y concuerda con un punto literal.</li> + </ul> + + <p>Ten en cuenta que el indicador multilínea <code>m</code> no cambia el comportamiento del punto. Por lo tanto, para hacer coincidir un patrón en varias líneas, se puede utilizar el conjunto de caracteres <code>[^]</code> — coincidirá con cualquier carácter, incluidas las nuevas líneas.</p> + + <p>ES2018 agregó el indicador <code>s</code> "<em>dotAll</em>", el cual permite que el punto también coincida con los terminadores de línea.</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Busca cualquier dígito (número arábigo). Equivalente a <code>[0-9]</code>. Por ejemplo, <code>/\d/</code> o <code>/[0-9]/</code> coincide con "2" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Busca cualquier caracter que <em>no</em> sea un dígito (número arábigo). Equivalente a <code>[^0-9]</code>. Por ejemplo, <code>/\D/</code> o <code>/[^0-9]/</code> coincide con "B" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Busca cualquier caracter alfanumérico del alfabeto latino básico, incluido el caracter de subrayado. Equivalente a <code>[A-Za-z0-9_]</code>. Por ejemplo, <code>/\w/</code> coincide con "m" en "manzana", "5" en "$5.28", "3" en "3D" y "m" en "Émanuel".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Busca cualquier caracter que no sea un caracter de palabra del alfabeto latino básico. Equivalente a <code>[^A-Za-z0-9_]</code>. Por ejemplo, <code>/\W/</code> o <code>/[^A-Za-z0-9_]/</code> coincide con "%" en "50%" y "É" en "Émanuel".</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Busca un solo caracter de espacio en blanco, incluido el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. Equivalente a <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\s\w*/</code> encuentra " bar" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Busca un solo caracter que no sea un espacio en blanco. Equivalente a <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\S\w*/</code> encuentra "foo" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Coincide con una tabulación horizontal.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Coincide con un retorno de carro.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Coincide con un salto de línea.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Coincide con una tabulación vertical.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Coincide con un caracter de avance de página.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Coincide con un caracter de retroceso. Si estás buscando el carácter de límite de palabra (<code>\b</code>), consulta {{JSxRef("../Guide/Regular_Expressions/Boundaries", "Límites")}}.</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Coincide con un caracter <code>NUL</code>. No sigue a este con otro dígito.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Coincide con un caracter de control mediante {{Interwiki("wikipedia", "Caret_notation", "notación de intercalación")}}, donde "X" es una letra de la A a la Z (correspondiente a los puntos de código <code>U+0001</code><em>-</em><code>U+001F</code>). Por ejemplo, <code>/\cM/</code> encuentra "\r" en "\r\n".</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Coincide con el carácter con el código <code><em>hh</em></code> (dos dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Coincide con una unidad de código UTF-16 con el valor <code><em>hhhh</em></code> (cuatro dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>{hhhh}</em> o <em>\u{hhhhh}</em></code></td> + <td>(Solo cuando se establece el indicador <code>u</code>). Hace coincidir el carácter con el valor Unicode <code>U+<em>hhhh</em></code> o <code>U+<em>hhhhh</em></code> (dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>Indica que el siguiente caracter se debe tratar de manera especial o "escaparse". Se comporta de dos formas.</p> + + <ul> + <li>Para los caracteres que generalmente se tratan literalmente, indica que el siguiente caracter es especial y no se debe interpretar literalmente. Por ejemplo, <code>/b/</code> coincide con el carácter "b". Al colocar una barra invertida delante de "b", es decir, usando <code>/\b/</code>, el carácter se vuelve especial para significar que coincide con el límite de una palabra.</li> + <li>Para los caracteres que generalmente se tratan de manera especial, indica que el siguiente caracter no es especial y se debe interpretar literalmente. Por ejemplo, "*" es un carácter especial que significa que deben coincidir 0 o más ocurrencias del carácter anterior; por ejemplo, <code>/a*/</code> significa coincidir con 0 o más "<em>a</em>"es. Para hacer coincidir <code>*</code> literalmente, precede con una barra invertida; por ejemplo, <code>/a\*/</code> coincide con "a*".</li> + </ul> + + <div class="blockIndicator note"> + <p>Para reconocer este caracter literalmente, escápalo consigo mismo. En otras palabras, para buscar <code>\</code> usa <code>/\\/</code>.</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Buscar_una_serie_de_dígitos">Buscar una serie de dígitos</h3> + +<pre class="brush: js notranslate">var datosAleatorios = "015 354 8787 687351 3512 8735"; +var regexpCuatroDigitos = /\b\d{4}\b/g; +// \b indica un límite (es decir, no empieza a coincidir en medio de una palabra) +// \d{4} indica un dígito, cuatro veces +// \b indica otro límite (es decir, no termina la coincidencia en medio de una palabra) + + +console.table(datosAleatorios.match(regexpCuatroDigitos)); +// ['8787', '3512', '8735'] +</pre> + +<h3 id="Busca_una_palabra_del_alfabeto_latino_que_comience_con_A">Busca una palabra (del alfabeto latino) que comience con A</h3> + +<pre class="brush: js notranslate">var extractoAlicia = "Estoy segura de que no soy Ada, dijo, 'porque su cabello se hace en rizos tan largos, y el mío no se riza en absoluto'."; +var regexpPalabraEmpiezaConA = /\b[aA]\w+/g; +// \b indica un límite (es decir, no empieza a coincidir en medio de una palabra) +// [aA] indica las letras a o A +// \w+ indica cualquier carácter *del alfabeto latino*, varias veces + +console.table(extractoAlicia.match(regexpPalabraEmpiezaConA)); +// ["Ada", "absoluto"] +</pre> + +<h3 id="Busca_una_palabra_de_caracteres_Unicode">Busca una palabra (de caracteres Unicode)</h3> + +<p>En lugar del alfabeto latino, podemos usar una variedad de caracteres Unicode para identificar una palabra (de modo que podamos tratar con texto en otros idiomas, tal como Ruso o Árabe). El "Plano multilingüe básico" de Unicode contiene la mayoría de los caracteres que se utilizan en todo el mundo y podemos utilizar clases y rangos de caracteres para reconocer las palabras escritas con esos caracteres.</p> + +<pre class="brush: js notranslate">var textoNoEs = "Приключения Алисы в Стране чудес"; +var regexpPalabraBMP = /([\u0000-\u0019\u0021-\uFFFF])+/gu; +// BMP pasa por U+0000 a U+FFFF pero el espacio es U+0020 + +console.table(textoNoEs.match(regexpPalabraBMP)); +[ 'Приключения', 'Алисы', 'в', 'Стране', 'чудес' ] +</pre> + +<div class="hidden"> +<p>Nota para los editores de MDN: no intentes agregar ejemplos divertidos con emojis, ya que esos caracteres no los maneja la plataforma (Kuma).</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-characterclass', 'RegExp: Clases de caracteres')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html b/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html new file mode 100644 index 0000000000..bc2821219f --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html @@ -0,0 +1,182 @@ +--- +title: Cuantificadores +slug: Web/JavaScript/Guide/Regular_Expressions/Cuantificadores +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - cuantificadores + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Los cuantificadores indican el número de caracteres o expresiones que deben coincidir.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-quantifiers.html", "taller")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A continuación, <em>elemento</em> se refiere no solo a caracteres individuales, sino que también incluye {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}}, {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "escapes de propiedades Unicode")}}, {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos y rangos")}}.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Concuerda 0 o más veces con el elemento "x" anterior. Por ejemplo, <code>/bu*/</code> coincide con "buuuu" en "Un fantasma abuuuucheado" y "b" en "Un búho gorjeó", pero nada en "Una cabra gruñó".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Encuentra 1 o más veces el elemento "x" anterior Equivalente a <code>{1,}</code>. Por ejemplo, <code>/a+/</code> coincide con la "<em>a</em>" en "candy" y todas las "<em>a</em>"es en "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Halla 0 o 1 vez el elemento "x" anterior. Por ejemplo, <code>/e?le?/</code> coincide con "el" en "ángel" y "ele" en "ángeles".</p> + + <p>Si se usa inmediatamente después de cualquiera de los cuantificadores <code>*</code>, <code>+</code>, <code>?</code>, o <code>{}</code>, hace que el cuantificador <em>no sea codicioso</em> (es decir que coincida con el mínimo número de veces), a diferencia del predeterminado, que es codicioso (que coincide con el máximo número de veces).</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda exactamente con "n" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{2}/</code> no coincide con la "<em>a</em>" de "candy", pero coincide con todas las "<em>a</em>"es de "caandy" y las dos primeras "<em>a</em>"es en "caaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda con al menos "n" apariciones del elemento "x". Por ejemplo, <code>/a{2,}/</code> no coincide con las "<em>a</em>"es en "caramelo", pero coincide con todas las "<em>a</em>"es en "caaraamelo" y en "caaaaaaaraaaamelo".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Donde "n" es 0 o un número entero positivo, "m" es un número entero positivo y <code><em>m</em> > <em>n</em></code> coincide con al menos "n" y como máximo "m" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{1,3}/</code> no coincide con nada en "crmelo", la "<em>a</em>" en "carmelo", las dos "<em>a</em>"es en "caarmelo" y las tres primeras "<em>a</em>"es en "caaaaaaarmelo". Observa que al comparar "caaaaaaarmelo", encuentra las "aaa", aunque la cadena original tenía más "<em>a</em>"es.</p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code><br> + <code><em>x</em>??</code><br> + <code><em>x</em>{n}?</code><br> + <code><em>x</em>{n,}?</code><br> + <code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p>De manera predeterminada, los cuantificadores como <code>*</code> y <code>+</code> son "codiciosos", lo cual significa que intentan hacer coincidir la mayor cantidad posible de la cadena. El caracter <code>?</code> después del cuantificador hace que el cuantificador "no sea codicioso": lo cual significa que se detendrá tan pronto como encuentre una coincidencia. Por ejemplo, dada una cadena como "algún <foo> <bar> nuevo </bar> </foo>":</p> + + <ul> + <li><code>/<.*>/</code> coincidirá con "<foo> <bar> nuevo </bar> </foo>"</li> + <li><code>/<.*?>/</code> coincidirá con "<foo>"</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Patrón_repetido">Patrón repetido</h3> + +<pre class="brush: js notranslate">var palabraTerminadaConAes = /\w+a+\b/; +var mensajeDelicado = "Esto es Espartaaaaaaa"; + +console.table(mensajeDelicado.match(palabraTerminadaConAes)); // [ "Espartaaaaaaa" ] +</pre> + +<h3 id="Conteo_de_caracteres">Conteo de caracteres</h3> + +<pre class="brush: js notranslate">var palabraDeUnaLetra = /\b\w\b/g; +var palabraNoTanLarga = /\b\w{1,6}\b/g; +var palabraLaaaaarga = /\b\w{10,}\b/g; + +var frase = "¿Por qué me tengo que sentar a estudiar las tablas de multiplicar?"; + +console.table(frase.match(palabraDeUnaLetra)); // ["a"] +console.table(frase.match(palabraNoTanLarga)); // ["Por", "qu", "me", "tengo", "que", "sentar", "a", "las", "tablas", "de"] +console.table(frase.match(palabraLaaaaarga)); // ["multiplicar"] +</pre> + +<h3 id="Caracter_opcional">Caracter opcional</h3> + +<pre class="brush: js notranslate">var londinText = "He asked his neighbour a favour."; +var yanquiText = "He asked his neighbor a favor."; + +var regexpEnding = /\w+ou?r/g; +// \w+ Una o varias letras +// o seguida de una "o", +// u? opcionalmente seguida de una "u" +// r seguida de una "r" + +console.table(londinText.match(regexpEnding)); +// ["neighbour", "favour"] + +console.table(yanquiText.match(regexpEnding)); +// ["neighbor", "favor"] +</pre> + +<h3 id="Codicioso_versus_no_codicioso">Codicioso versus no codicioso</h3> + +<pre class="brush: js notranslate">var texto = "Debo estar muy cerca del centro de la tierra."; +var regexpCodiciosa = /[\w ]+/; +// [\w ] una letra del alfabeto latino o un espacio en blanco +// + una o varias veces + +console.log(texto.match(regexpCodiciosa)[0]); +// "Debo estar muy cerca del centro de la tierra." +// casi todo el texto coincide (omite el caracter de punto) + +var regexpNoCodiciosa = /[\w ]+?/; // Observa el signo de interrogación +console.log(texto.match(regexpNoCodiciosa)); +// "D" +// La coincidencia es la más pequeña posible +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-quantifier', 'RegExp: Quantifiers')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html b/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html new file mode 100644 index 0000000000..7fc434a0dc --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html @@ -0,0 +1,177 @@ +--- +title: Escapes de propiedades Unicode +slug: Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - escapes de propiedades unicode + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Los <strong>escapes de propiedad Unicode</strong> en las {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} permiten la coincidencia de caracteres según sus propiedades Unicode. Un caracter se describe mediante varias propiedades que, o bien, son binarias ("tipo booleano") o, no binarias. Por ejemplo, puedes usar escapes de propiedades Unicode para reconocer emojis, signos de puntuación, letras (incluso letras de idiomas específicos o scripts), etc.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}}</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Para que funcionen los escapes de propiedad Unicode, una expresión regular debe utilizar {{JSxRef("../Guide/Regular_Expressions", "la bandera <code>u</code>", "#Busqueda_avanzada_con_banderas")}} que indica que una cadena se debe considerar como una serie de puntos de código Unicode. Consulta también {{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Algunas propiedades Unicode abarcan muchos más caracteres que algunas {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}} (como <code>\w</code> que coincide solo con letras latinas, desde <code>a</code> hasta <code>z</code>) pero esta última es más compatible con los navegadores (a partir de enero de 2020).</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div> + +<pre class="brush: js notranslate">// Valores no binarios +\p{<em>UnicodePropertyValue</em>} +\p{<em>UnicodePropertyName</em>=<em>UnicodePropertyValue</em>} + +// Valores binarios y no binarios +\p{<em>UnicodeBinaryPropertyName</em>} + +// Negación: \P se niega con \p +\P{<em>UnicodePropertyValue</em>} +\P{<em>UnicodeBinaryPropertyName</em>} +</pre> + +<ul> + <li><a href="https://unicode.org/reports/tr18/#General_Category_Property">Categoría general</a> (<code>gc</code> por «<em><strong>g</strong>eneral <strong>c</strong>ategory</em>»)</li> + <li><a href="https://unicode.org/reports/tr24/#Script">Script</a> (<code>sc</code> por «<em><strong>sc</strong>ript</em>»)</li> + <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Extensiones de script</a> (<code>scx</code> por «<em><strong>sc</strong>ript e<strong>x</strong>tensions</em>»)</li> +</ul> + +<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt<span style="display: none;"> </span></a></p> + +<dl> + <dt>UnicodeBinaryPropertyName</dt> + <dd>El nombre de una <a href="https://tc39.es/ecma262/#table-binary-unicode-properties">propiedad binaria</a>. Por ejemplo: <code><a href="https://unicode.org/reports/tr18/#General_Category_Property">ASCII</a></code>, <code><a href="https://unicode.org/reports/tr44/#Alphabetic">Alfabético</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#Diacritic">Diacrítico</a></code>, <code><a href="https://unicode.org/reports/tr51/#Emoji_Properties">Emoji</a></code>, <code><a href="https://unicode.org/reports/tr44/#Hex_Digit">Dígito hexadecimal</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#White_Space">Espacio en blanco</a></code>, etc. Consulta <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt">Unicode Data PropList.txt</a> para obtener más información.</dd> + <dt>NombreDePropiedadUnicode</dt> + <dd>El nombre de una propiedad <a href="https://tc39.es/ecma262/#table-nonbinary-unicode-properties">no binaria</a>:</dd> + <dt>ValorDePropiedadUnicode</dt> + <dd>Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor <code>Decimal_Number</code> para la propiedad <code>General_Category</code> se puede escribir <code>Nd</code>, <code>digit</code>, o <code>Decimal_Number</code>). Para la mayoría de los valores, la parte <em><code>NombreDePropiedadUnicode</code></em> y el signo igual se pueden omitir. Si se especifica un <em><code>NombreDePropiedadUnicode</code></em>, el valor debe corresponder al tipo de propiedad proporcionado.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Debido a que hay muchas propiedades y valores disponibles, no los describiremos exhaustivamente aquí, en su lugar proporcionaremos varios ejemplos.</p> +</div> + +<h2 id="Justificación">Justificación</h2> + +<p>Antes de ES2018, no existía una forma eficiente de hacer coincidir caracteres de diferentes conjuntos basados en <code>scripts</code> (como macedonio, griego, georgiano, etc.) o <code>propertyName</code> (como Emoji, etc.) en JavaScript. Consulta la <a href="https://github.com/tc39/proposal-regexp-unicode-property-escapes">propuesta tc39 sobre escapes de propiedad Unicode</a> para obtener más información.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Categorías_generales">Categorías generales</h3> + +<p>Las categorías generales se utilizan para clasificar caracteres Unicode, y hay subcategorías disponibles para definir una categorización más precisa. Es posible utilizar formas cortas o largas en los escapes de propiedades Unicode.</p> + +<p>Se pueden utilizar para reconocer letras, números, símbolos, signos de puntuación, espacios, etc. Para obtener una lista más exhaustiva de categorías generales, consulta <a href="https://unicode.org/reports/tr18/#General_Category_Property">la especificación Unicode</a>.</p> + +<pre class="brush: js notranslate">// encontrar todas las letras de un texto +let historia = "Es el gato de Cheshire: ahora tendré alguien con quien hablar"; + +// Forma más explícita +historia.match(/\p{General_Category=Letter}/gu); + +// No es obligatorio utilizar el nombre de la propiedad para las categorías generales +historia.match(/\p{Letter}/gu); + +// Esto es equivalente (alias corto): +historia.match(/\p{L}/gu); + +// Esto también es equivalente (conjunción de todas las subcategorías que utilizan alias cortos) +historia.match(/\p{Lu}|\p{Ll}|\p{Lt}|\p{Lm}|\p{Lo}/gu); +</pre> + +<h3 id="Scripts_y_extensiones_de_script">Scripts y extensiones de script</h3> + +<p>Algunos idiomas usan diferentes signos para su sistema de escritura. Por ejemplo, el Inglés y el Español se escriben con los signos latinos, mientras que el Árabe y el Ruso se escriben con otros signos (Árabe y Cirílico, respectivamente). Las propiedades Unicode <code>Script</code> y <code>Script_Extensions</code> permiten que las expresiones regulares coincidan con los caracteres según el script con el que se utilizan principalmente (<code>Script</code>) o según el conjunto de los scripts a los que pertenecen (<code>Script_Extensions</code>).</p> + +<p>Por ejemplo, <code>A</code> pertenece al script <code>Latin</code> y <code>ε</code> al script <code>Greek</code> (Griego).</p> + +<pre class="brush: js notranslate">let caracteresMezclados = "aεЛ"; + +// Usando el nombre canónico "largo" del script +caracteresMezclados.match(/\p{Script=Latin}/u); // a + +// Usando un alias corto para el script +caracteresMezclados.match(/\p{Script=Greek}/u); // ε + +// Usando el nombre corto Sc para la propiedad Script +caracteresMezclados.match(/\p{Sc=Cyrillic}/u); // Л +</pre> + +<p>Para obtener más detalles, consulta <a href="https://unicode.org/reports/tr24/#Script">la especificación Unicode</a> y la <a href="https://tc39.es/ecma262/#table-unicode-script-values">Tabla de scripts en la especificación ECMAScript</a>.</p> + +<p>Si se usa un carácter en un conjunto limitado de scripts, la propiedad <code>Script</code> solo coincidirá con el script "predominante" utilizado. Si quieres hacer coincidir caracteres basados en un script "no predominante", podrías usar la propiedad <code>Script_Extensions</code> (<code>Scx</code> para abreviar).</p> + +<pre class="brush: js notranslate">// ٢ es el dígito 2 en notación Árabe-Índica +// si bien está escrito en un script predominante en árabe +// también se puede escribir en el script Thaana + +"٢".match(/\p{Script=Thaana}/u); +// null ya que Thaana no es el script predominante super() + +"٢".match(/\p{Script_Extensions=Thaana}/u); +// ["٢", index: 0, input: "٢", groups: undefined] +</pre> + +<h3 id="Escapes_de_propiedades_Unicode_versus_Clases_de_caracteres">Escapes de propiedades Unicode versus Clases de caracteres</h3> + +<p>Con las expresiones regulares de JavaScript, también es posible utilizar {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "clases de caracteres")}} y especialmente <code>\w</code> o <code>\d</code> para hacer coincidir letras o dígitos. Sin embargo, estos formularios solo coinciden con caracteres de la escritura <em>latina</em> (en otras palabras, de la <code>a</code> a la <code>z</code> y <code>A</code> a <code>Z</code> para <code>\w</code> y <code>0</code> a <code>9</code> para <code>\d</code>). Como se muestra en {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "este ejemplo", "#Busca_una_palabra_de_caracteres_Unicode")}}, puede ser un poco torpe trabajar con textos no latinos.</p> + +<p>Las categorías de escape de propiedad Unicode abarcan muchos más caracteres y <code>\p{Letter}</code> o <code>\p{Number}</code> funcionarán para cualquier script.</p> + +<pre class="brush: js notranslate">// Intentando usar rangos para evitar limitaciones de \w: + +const textoNoEs = "Приключения Алисы в Стране чудес"; +const regexpPalabraBMP = /([\u0000-\u0019\u0021-\uFFFF])+/gu; +// BMP pasa por U+0000 a U+FFFF pero el espacio es U+0020 + +console.table(textoNoEs.match(regexpPalabraBMP)); + +// El uso de la propiedad Unicode se escapa en su lugar +const regexpEPU = /\p{L}+/gu; +console.table(textoNoEs.match(regexpEPU)); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-runtime-semantics-unicodematchproperty-p', 'RegExp: Escapes de propiedades Unicode')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> + <li>{{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}</li> + <li><a href="https://en.wikipedia.org/wiki/Unicode_character_property">Propiedades de caracteres unicode — Wikipedia</a></li> + <li><a href="https://2ality.com/2017/07/regexp-unicode-property-escapes.html">Una entrada en el blog de Axel Rauschmayer sobre los escapes de propiedades Unicode</a></li> + <li><a href="https://unicode.org/reports/tr18/#Categories">El documento Unicode para las propiedades Unicode</a></li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html b/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html new file mode 100644 index 0000000000..34eed03589 --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html @@ -0,0 +1,176 @@ +--- +title: Grupos y rangos +slug: Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Rangos + - Referencia + - grupos + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Los grupos y rangos indican grupos y rangos de caracteres de expresión.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-groups-ranges.html")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Coincide con "x" o "y". Por ejemplo, <code>/verde|roja/</code> coincide con "verde" en "manzana verde" y "roja" en "manzana roja".</p> + </td> + </tr> + <tr> + <td><code>[xyz]<br> + [a-c]</code></td> + <td> + <p>Un juego de caracteres. Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. También es posible incluir una clase de caracteres en un juego de caracteres.</p> + + <p>Por ejemplo, <code>[abcd]</code> es lo mismo que <code>[a-d]</code>. Coincide con la "b" en "brisket" y la "c" en "chop".</p> + + <p>Por ejemplo, <code>[abcd-]</code> y <code>[-abcd]</code> coinciden con la "b" en "brisket", la "c" en "chop" y el "-" (guión) en "sin-fin".</p> + + <p>Por ejemplo, <code>[\w-]</code> es lo mismo que <code>[A-Za-z0-9_-]</code>. Ambos reconocen la "b" en "brisket", la "c" en "chop" y la "s" en "sin-fin".</p> + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]<br> + [^a-c]</code></p> + </td> + <td> + <p>Un juego de caracteres negado o complementado. Es decir, hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. Por ejemplo, <code>[^abc]</code> es lo mismo que <code>[^a-c]</code>. Inicialmente halla la "o" en "bacon" y la "h" en "chuleta".</p> + + <div class="blockIndicator note"> + <p>El caracter ^ también puede indicar el {{JSxRef("../Guide/Regular_Expressions/Assertions", "comienzo de la entrada")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p><strong>Grupo de captura</strong>: Coincide con <code><em>x</em></code> y recuerda la coincidencia. Por ejemplo, <code>/(foo)/</code> encuentra y recuerda "foo" en "foo bar". </p> + + <p>Una expresión regular puede tener varios grupos de captura. En los resultados, coincide con los grupos capturados normalmente en un arreglo cuyos miembros están en el mismo orden que los paréntesis de la izquierda en el grupo capturado. Este suele ser solo el orden de los propios grupos capturados. Esto se vuelve importante cuando los grupos capturados están anidados. Se accede a las coincidencias utilizando el índice de los elementos del resultado (<code>[1], ..., [n]</code>) o desde las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</p> + + <p>Los grupos de captura tienen una penalización de rendimiento. Si no necesitas que se recupere la subcadena coincidente, prefiere los grupos de no captura (ve {{anch("GpoDeNoCaptura", "más abajo")}}).</p> + + <p>{{JSxRef("Objetos_globales/String/match", "String.match()")}} no devolverá grupos si se establece el indicador <code>/.../g</code>. Sin embargo, aún puedes usar {{JSxRef("Objetos_globales/String/matchAll", "String.matchAll()")}} para obtener todas las coincidencias.</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Donde "n" es un número entero positivo. Una referencia inversa a la última subcadena que coincide con el paréntesis <code>n</code> en la expresión regular (contando los paréntesis izquierdos). Por ejemplo, <code>/manzana(,)\snaranja\1/</code> coincide con "manzana, naranja" en "manzana, naranja, cereza, melocotón".</p> + </td> + </tr> + <tr> + <td><code>\k<Nombre></code></td> + <td> + <p>Una referencia inversa a la última subcadena que coincide con el grupo de captura <strong>N</strong><strong>ombrado</strong> especificado por <code><Nombre></code>.</p> + + <p>Por ejemplo, <code>/(?<trato>\w+), si \k<trato>/</code> coincide con "Sr., sí Sr." en "¿Me copias? ¡Sr., sí Sr.!".</p> + + <div class="blockIndicator note"> + <p>aquí se usa <code>\k</code> literalmente para indicar el comienzo de una referencia inversa a un grupo de captura con nombre.</p> + </div> + </td> + </tr> + <tr> + <td><code>(?<Nombre>x)</code></td> + <td> + <p><strong>Grupo de captura con nombre</strong>: Coincide con "x" y la almacena en la propiedad de grupos de las coincidencias devueltas con el nombre especificado por <code><Nombre></code>. Los corchetes angulares (<code><</code> y <code>></code>) son necesarios para el nombre del grupo.</p> + + <p>Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podrías usar <code>/\((?<area>\d\d\d)\)/</code>. El número resultante aparecería en <code>matches.groups.area</code>.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td><span id="GpoDeNoCaptura"><strong>Grupo de no captura</strong></span>: Coincide con "x" pero no recuerda la coincidencia. La subcadena coincidente no se puede recuperar de los elementos del arreglo resultante (<code>[1], ..., [n]</code>) o de las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Conteo_de_vocales">Conteo de vocales</h3> + +<pre class="brush: js notranslate">var aliceExcerpt = "Hubo un largo silencio después de esto, y Alicia solo podía escuchar susurros de vez en cuando."; +var regexpVowels = /[aeiouy]/g; + +console.log("Número de vocales minúsculas: ", aliceExcerpt.match(regexpVowels).length); +// Número de vocales: 34</pre> + +<h3 id="Uso_de_grupos">Uso de grupos</h3> + +<pre class="brush: js notranslate">let personList = `First_Name: John, Last_Name: Doe +First_Name: Jane, Last_Name: Smith`; + +let regexpNames = /First_Name: (\w+), Last_Name: (\w+)/mg; +let match = regexpNames.exec(personList); +do { + console.log(`Hola ${match[1]} ${match[2]}`); +} while((match = regexpNames.exec(personList)) !== null); +</pre> + +<h3 id="Uso_de_grupos_con_nombre">Uso de grupos con nombre</h3> + +<pre class="brush: js notranslate">let personList = `First_Name: John, Last_Name: Doe +First_Name: Jane, Last_Name: Smith`; + +let regexpNames = /First_Name: (?<firstname>\w+), Last_Name: (?<lastname>\w+)/mg; +let match = regexpNames.exec(personList); +do { + console.log(`Hola ${match.groups.firstname} ${match.groups.lastname}`); +} while((match = regexpNames.exec(personList)) !== null);</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: No todos los navegadores admiten esta función; consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla de compatibilidad", "#Compatibilidad_del_navegador")}}.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-classranges', 'RegExp: Ranges')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html b/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html new file mode 100644 index 0000000000..accc783aff --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html @@ -0,0 +1,451 @@ +--- +title: Hoja de referencia de sintaxis de expresiones regulares +slug: Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia +tags: + - Cheatsheet + - Expresiones Regulares + - Guía + - Hoja de referencia + - JavaScript + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Cheatsheet +--- +<div>{{jsSidebar("Guía de JavaScript")}}</div> + +<p><span class="seoSummary">Esta página proporciona una hoja de referencia general de todas las capacidades de la sintaxis de <code>RegExp</code> agregando el contenido de los artículos en la guía <code>RegExp</code>. Si necesitas más información sobre un tema específico, sigue el enlace del título correspondiente para acceder al artículo completo o dirígete a <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/">la guía</a>.</span></p> + +<h2 id="Clases_de_caracteres"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">el artículo original</a></div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + </tbody> + <tbody> + <tr> + <td><code>.</code></td> + <td> + <p>Tiene uno de los siguientes significados:</p> + + <ul> + <li>Encuentra cualquier caracter único <em>excepto</em> terminadores de línea: <code>\n</code>, <code>\r</code>, <code>\u2028</code> o <code>\u2029</code>. Por ejemplo, <code>/.y/</code> reconoce "my" y "ay", pero no "yes", en "yes make my day".</li> + <li>Dentro de un juego de caracteres, el punto pierde su significado especial y concuerda con un punto literal.</li> + </ul> + + <p>Ten en cuenta que el indicador multilínea <code>m</code> no cambia el comportamiento del punto. Por lo tanto, para buscar en un patrón multilínea, puedes usar el juego de caracteres <code>[^]</code> — este encontrará con cualquier caracter, incluidas las nuevas líneas.</p> + + <p>ES2018 agregó el indicador <code>s</code> "<em>dotAll</em>", que permite que el punto también concuerde con los terminadores de línea.</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Busca cualquier dígito (número arábigo). Equivalente a <code>[0-9]</code>. Por ejemplo, <code>/\d/</code> o <code>/[0-9]/</code> encuentra el "2" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Busca cualquier caracter que no sea un dígito (número arábigo). Equivalente a <code>[^0-9]</code>. Por ejemplo, <code>/\D/</code> o <code>/[^0-9]/</code> encuentra la "B" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Busca cualquier caracter alfanumérico del alfabeto latino básico, incluido el caracter de subrayado. Equivalente a <code>[A-Za-z0-9_]</code>. Por ejemplo, <code>/\w/</code> encuentra la "m" en "manzana", el "5" en "$5.28" y el "3" en "3D".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Busca cualquier caracter que no sea un caracter de palabra del alfabeto latino básico. Equivalente a <code>[^A-Za-z0-9_]</code>. Por ejemplo, <code>/\W/</code> o <code>/[^A-Za-z0-9_]/</code> encuentra el caracter "%" en "50%".</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Busca un solo caracter de espacio en blanco, incluido el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. Equivalente a <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\s\w*/</code> reconoce " bar" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Busca un solo caracter que no sea un espacio en blanco. Equivalente a <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\S\w*/</code> encuentra "foo" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Coincide con una tabulación horizontal.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Coincide con un retorno de carro.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Coincide con un salto de línea.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Coincide con una tabulación vertical.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Coincide con un caracter de avance de página.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Coincide con un caracter de retroceso. Si estás buscando el caracter de límite de palabra (<code>\b</code>), consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Límites</a>.</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Coincide con un caracter <code>NUL</code>. No sigue a este con otro dígito.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Coincide con un caracter de control usando <a href="https://en.wikipedia.org/wiki/Caret_notation">notación de acento circunflejo</a>, donde "X" es una letra de la A a la Z (correspondiente a los puntos de código <code>U+0001</code><em>-</em><code>U+001F</code>). Por ejemplo, <code>/\cM/</code> reconoce el caracter "\r" en "\r\n".</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Busca el caracter con el código <code><em>hh</em></code> (dos dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Busca una unidad de código UTF-16 con el valor <code><em>hhhh</em></code> (cuatro dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>{hhhh}</em> o <em>\u{hhhhh}</em></code></td> + <td>(Solo cuando se establece el indicador <code>u</code>). Busca el caracter con el valor Unicode <code>U+<em>hhhh</em></code> o <code>U+<em>hhhhh</em></code> (dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>Indica que el siguiente caracter se debe tratar de manera especial o "escaparse". Se comporta de dos formas.</p> + + <ul> + <li>Para los caracteres que generalmente se tratan literalmente, indica que el siguiente caracter es especial y no se debe interpretar literalmente. Por ejemplo, <code>/b/</code> reconoce el caracter "b". Al colocar una barra invertida delante de "b", es decir, usando <code>/\b/</code>, el caracter se vuelve especial para significar que concuerda con el límite de una palabra.</li> + <li>Para los caracteres que generalmente se tratan de manera especial, indica que el siguiente caracter no es especial y se debe interpretar literalmente. Por ejemplo, "*" es un caracter especial que significa que deben reconocer 0 o más ocurrencias del caracter anterior; por ejemplo, <code>/a*/</code> significa reconocer 0 o más "a"s. Para emparejar el <code>*</code> literal, precédelo con una barra invertida; por ejemplo, <code>/a\*/</code> concuerda con "a*".</li> + </ul> + + <p>Ten en cuenta que algunos caracteres como <code>:</code>, <code>-</code>, <code>@</code>, etc. no tienen un significado especial cuando se escapan ni cuando no se escapan. Las secuencias de escape como <code>\:</code>, <code>\-</code>, <code>\@</code> serán equivalentes a sus equivalentes de caracteres literales sin escapar en expresiones regulares. Sin embargo, en las expresiones regulares con <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">indicador Unicode</a>, esto provocará un error de <em>escape de identidad no válido</em>. Esto se hace para asegurar la compatibilidad con el código existente que usa nuevas secuencias de escape como <code>\p</code> o <code>\k</code>.</p> + + <div class="blockIndicator note"> + <p>Para reconocer este caracter literalmente, escápalo consigo mismo. En otras palabras, para buscar <code>\</code> usa <code>/\\/</code>.</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Aserciones"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">el artículo original</a></div> + +<h3 id="Aserciones_de_tipo_límite">Aserciones de tipo límite</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>^</code></td> + <td> + <p>Coincide con el comienzo de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca inmediatamente después de un caracter de salto de línea. Por ejemplo, <code>/^A/</code> no reconoce la "A" en "an A", pero encuentra la primera "A" en "An A".</p> + + <div class="blockIndicator note"> + <p>Este caracter tiene un significado diferente cuando aparece al comienzo de un <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupo</a>.</p> + </div> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Coincide con el final de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca hasta inmediatamente antes de un caracter de salto de línea. Por ejemplo, <code>/a$/</code> no reconoce la "t" en "eater", pero sí en "eat".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Marca el límite de una palabra. Esta es la posición en la que un caracter de palabra no va seguido o precedido por otro caracter de palabra, por ejemplo, entre una letra y un espacio. Ten en cuenta que el límite de una palabra encontrada no se incluye en el resultado. En otras palabras, la longitud de un límite de palabra encontrada es cero.</p> + + <p>Ejemplos:</p> + + <ul> + <li><code>/\bm/</code> reconoce la "m" en "moon".</li> + <li><code>/oo\b/</code> no reconoce "oo" en "moon", porque "oo" va seguido de "n", que es un caracter de palabra.</li> + <li><code>/oon\b/</code> encuentra "oon" en "moon", porque "oon" es el final de la cadena, por lo que no va seguido de un caracter de palabra.</li> + <li><code>/\w\b\w/</code> nunca encontrará nada, porque un caracter de palabra nunca puede ir seguido de un caracter que no sea de palabra y otro de palabra.</li> + </ul> + + <p>Para encontrar un caracter de retroceso (<code>[\b]</code>), consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a>.</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Coincide con un límite sin palabra. Esta es una posición en la que el caracter anterior y siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras, por ejemplo, entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras encontradas, el límite sin palabras reconocidas tampoco se incluye en el resultado. Por ejemplo, <code>/\Bon/</code> reconoce "on" en "at noon", y <code>/ye\B/</code> encuentra "ye" en "possibly yesterday".</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Otras_aserciones">Otras aserciones</h3> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El caracter <code>?</code> también se puede utilizar como cuantificador.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p><strong>Aserción anticipada</strong>: Coincide con "x" solo si "x" va seguida de "y". Por ejemplo, /<code>Jack(?=Sprat)/</code> reconocerá a "Jack" solo si va seguida de "Sprat".<br> + <code>/Jack(?=Sprat|Frost)/</code> encontrará a "Jack" solo si va seguida de "Sprat" o "Frost". Sin embargo, ni "Sprat" ni "Frost" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p><strong>Aserción de búsqueda anticipada negativa</strong>: reconoce la "x" solo si la "x" <span>no va seguida de</span> "y"<span>.</span> Por ejemplo, <code>/\d+(?!\.)/</code> <span>reconoce un número solo si no va seguido de un punto decimal.</span> <code>/\d+(?!\.)/.exec('3.141')</code> halla el "141" pero no el "3".</p> + </td> + </tr> + <tr> + <td><code>(?<=y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa</strong>: encontrará "x" solo si "x" está precedida por "y". Por ejemplo, <code>/(?<=Jack)Sprat/</code><span> reconoce a "Sprat" solo si está precedido por "Jack".</span> <code>/(?<=Jack|Tom)Sprat/</code> empareja "Sprat" solo si está precedido por "Jack" o "Tom". Sin embargo, ni "Jack" ni "Tom" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>(?<!y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa negativa</strong>: Reconoce la "x" solo si "x" no está precedida por "y". Por ejemplo, <code>/(?<!-)\d+/</code> <span>encuentra un número solo si no está precedido por un signo menos</span>. <code>/(?<!-)\d+/.exec('3')</code> encuentra el "3". <code>/(?<!-)\d+/.exec('-3')</code> no lo reconoce porque el número está precedido por el signo menos.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Grupos_y_rangos"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">el artículo original</a></div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Coincide con "x" o "y". Por ejemplo, <code>/verde|roja/</code> reconoce el "verde" en "manzana verde" y "roja" en "manzana roja".</p> + </td> + </tr> + <tr> + <td><code>[xyz]<br> + [a-c]</code></td> + <td> + <p>Un juego de caracteres. Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. También es posible incluir una clase de caracteres en un juego de caracteres.</p> + + <p>Por ejemplo, <code>[abcd]</code> es lo mismo que <code>[a-d]</code>. Coincide con la "b" en "brisket" y la "c" en "chop".</p> + + <p>Por ejemplo, <code>[abcd-]</code> y <code>[-abcd]</code> reconoce la "b" en "brisket", la "c" en "chop" y el "-" (guión) en "non-profit".</p> + + <p>Por ejemplo, <code>[\w-]</code> es lo mismo que <code>[A-Za-z0-9_-]</code>. Ambos reconocen la "b" en "brisket", la "c" en "chop" y la "n" en "non-profit".</p> + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]<br> + [^a-c]</code></p> + </td> + <td> + <p>Un juego de caracteres negado o complementado. Es decir, hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. Por ejemplo, <code>[^abc]</code> es lo mismo que <code>[^a-c]</code>. Inicialmente halla la "o" en "bacon" y la "h" en "chuleta".</p> + + <div class="blockIndicator note"> + <p>El caracter ^ además puede indicar el <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">comienzo de la entrada</a>.</p> + </div> + </td> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p><strong>Grupo de captura</strong>: Encuentra la <code><em>x</em></code> y la recuerda. Por ejemplo, <code>/(foo)/</code> encuentra y recuerda "foo" en "foo bar". </p> + + <p>Una expresión regular puede tener varios grupos de captura. En los resultados, coincide con los grupos capturados normalmente en un arreglo cuyos miembros están en el mismo orden que los paréntesis de la izquierda en el grupo capturado. Este suele ser solo el orden de los propios grupos capturados. Esto se vuelve importante cuando los grupos capturados están anidados. Se accede a las coincidencias utilizando el índice de los elementos del resultado (<code>[1], ..., [n]</code>) o desde las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</p> + + <p>Los grupos de captura tienen una penalización de rendimiento. Si no necesitas que se recupere la subcadena coincidente, prefiere los paréntesis que no capturen (ve más abajo).</p> + + <p><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> no devolverá grupos si el indicador <code>/.../g</code> está configurado. Sin embargo, aún puedes usar <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> para obtener todas los encontrados.</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Donde "n" es un número entero positivo. Una referencia posterior a la última subcadena que coincide con el paréntesis n en la expresión regular (contando los paréntesis izquierdos). Por ejemplo, <code>/apple(,)\sorange\1/</code> coincide con "apple, orange" en "apple, orange, cherry, peach".</p> + </td> + </tr> + <tr> + <td>\k<Name></td> + <td> + <p>Una referencia inversa a la última subcadena encontrada con el grupo de captura <strong>N</strong><strong>ombrado</strong> especificado por <code><Name></code>.</p> + + <p>Por ejemplo, <code>/(?<title>\w+), yes \k<title>/</code> concuerda con "Sir, yes Sir" en "Do you copy? Sir, yes Sir!".</p> + + <div class="blockIndicator note"> + <p><code>\k</code> aquí se usa literalmente para indicar el comienzo de una referencia a un grupo de captura nombrado.</p> + </div> + </td> + </tr> + <tr> + <td><code>(?<Name>x)</code></td> + <td> + <p><strong>Grupo de captura nombrado</strong>: reconoce la "x" y la almacena en la propiedad <code>group</code> del resultado devuelto bajo el nombre especificado por <code><Name></code>. Los corchetes angulares (<code><</code> y <code>></code>) son obligatorios para el nombre del grupo.</p> + + <p>Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podríamos usar <code>/\((?<area>\d\d\d)\)/</code>. El número resultante debería aparecer en <code>matches.groups.area</code>.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td><strong>Grupo sin captura</strong>: reconoce la "x" pero no recuerda el resultado. La subcadena encontrada no se puede recuperar de los elementos del arreglo resultante (<code>[1], ..., [n]</code>) o de las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</td> + </tr> + </tbody> +</table> + +<h2 id="Cuantificadores"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">el artículo original</a></div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A continuación, <em>elemento</em> se refiere no solo a caracteres singulares, sino que también incluye <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">clases de caracteres</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">escapes de propiedad Unicode</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos y rangos</a>.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Concuerda 0 o más veces con el elemento "x" anterior. Por ejemplo, <code>/bo*/</code> reconoce a "boooo" en "Un fantasma booooed" y "b" en "A bird warbled", pero nada en "Una cabra gruñó".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Encuentra 1 o más veces el elemento "x" anterior Equivalente a <code>{1,}</code>. Por ejemplo, <code>/a+/</code> encuentra la "a" en "candy" y todas las "a"es en "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Halla 0 o 1 vez el elemento "x" anterior. Por ejemplo, <code>/e?Le?/</code> reconoce a "el" en "ángel" y a "le" en "angle".</p> + + <p>Si se usa inmediatamente después de cualquiera de los cuantificadores <code>*</code>, <code>+</code>, <code>?</code>o <code>{}</code>, hace que el cuantificador no codicioso (que reconoce el número mínimo de veces), a diferencia del predeterminado, que es codicioso (que reconoce el número máximo de veces).</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda exactamente con "n" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{2}/</code> no reconoce la "a" en "candy", pero reconoce todas las "a"s en "caandy" y las dos primeras "a"s en "caaandy ".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda con al menos "n" apariciones del elemento "x". Por ejemplo, <code>/a{2,}/</code> no reconoce la "a" en "candy", pero reconoce todas las "a" en "caandy" y en "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Donde "n" es 0 o un número entero positivo, "m" es un número entero positivo y <code><em>m</em> > <em>n</em></code>, reconoce por lo menos "n" y como máximo "m" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{1,3}/</code> no reconoce nada en "cndy", la "a" en "caramelo", las dos "a" en "caandy" y las tres primeras "a" está en "caaaaaaandy". Observa que al comparar "caaaaaaandy", las "aaa" encontradas, aunque la cadena original tenía más "a" s.</p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code><br> + <code><em>x</em>??</code><br> + <code><em>x</em>{n}?</code><br> + <code><em>x</em>{n,}?</code><br> + <code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p>De manera predeterminada, los cuantificadores como <code>*</code> y <code>+</code> son "codiciosos", lo cual significa que intentan hacer coincidir la mayor cantidad de cadena posible. El carácter <code>?</code> después del cuantificador hace que este sea "no codicioso": lo cual significa que se detendrá tan pronto como encuentre una concordancia. Por ejemplo, dada una cadena "algo como <foo> <bar> new </bar> </foo>":</p> + + <ul> + <li><code>/<.*>/</code> reconocerá "<foo> <bar> nuevo </bar> </foo>"</li> + <li><code>/<.*?>/</code> encajará "<foo>"</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Escapa_la_propiedad_Unicode"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapa la propiedad Unicode</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">el artículo original</a></div> + +<pre class="brush: js notranslate">// Valores no binarios +\p{<em>UnicodePropertyValue</em>} +\p{<em>UnicodePropertyName</em>=<em>UnicodePropertyValue</em>} + +// Valores binarios y no binarios +\p{<em>UnicodeBinaryPropertyName</em>} + +// Negación: \P is negado \p +\P{<em>UnicodePropertyValue</em>} +\P{<em>UnicodeBinaryPropertyName</em>} +</pre> + +<dl> + <dt>UnicodeBinaryPropertyName</dt> + <dd>El nombre de una <a href="https://tc39.es/ecma262/#table-binary-unicode-properties">propiedad binaria</a>. Por ejemplo: <code><a href="https://unicode.org/reports/tr18/#General_Category_Property">ASCII</a></code>, <code><a href="https://unicode.org/reports/tr44/#Alphabetic">Alpha</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#Diacritic">Diacrítica</a></code>, <code><a href="https://unicode.org/reports/tr51/#Emoji_Properties">Emoji</a></code>, <code><a href="https://unicode.org/reports/tr44/#Hex_Digit">Hex_Digit</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#White_Space">Espacio_blanco</a></code>, etc. Consulta <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt">Unicode Data PropList.txt</a> para obtener más información.</dd> + <dt>UnicodePropertyName</dt> +</dl> + +<dl> + <dd>El nombre de una propiedad <a href="https://tc39.es/ecma262/#table-nonbinary-unicode-properties">no binaria</a>:</dd> +</dl> + +<ul> + <li><a href="https://unicode.org/reports/tr18/#General_Category_Property">General_Category</a> (<code>gc</code>)</li> + <li><a href="https://unicode.org/reports/tr24/#Script">Script</a> (<code>sc</code>)</li> + <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Script_Extensions</a> (<code>scx</code>)</li> +</ul> + +<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt</a></p> + +<dl> + <dt>UnicodePropertyValue</dt> + <dd>Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor <code>Decimal_Number</code> para la propiedad <code>General_Category</code> se puede escribir cómo <code>Nd</code>, <code>digit</code>, o <code>Decimal_number</code>). Para la mayoría de los valores, la parte <em><code>UnicodePropertyName</code> </em> y el signo igual se pueden omitir. Si se especifica un <em><code>UnicodePropertyName</code></em>, el valor debe corresponder al tipo de propiedad proporcionado.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puesto que hay muchas propiedades y valores disponibles, no las describiremos exhaustivamente aquí, sino que proporcionaremos varios ejemplos.</p> +</div> diff --git a/files/es/web/javascript/guide/regular_expressions/index.html b/files/es/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..150d86b5f6 --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,451 @@ +--- +title: Expresiones Regulares +slug: Web/JavaScript/Guide/Regular_Expressions +tags: + - Expresiones Regulares + - Guía + - Intermedio + - JavaScript + - Referencia + - RegExp + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> + +<p class="summary">Las expresiones regulares son patrones que se utilizan para hacer coincidir combinaciones de caracteres en cadenas. En JavaScript, las expresiones regulares también son objetos. Estos patrones se utilizan con los métodos {{jsxref("RegExp.exec", "exec()")}} y {{jsxref("RegExp.test", "test()")}} de {{jsxref("RegExp")}}, y con {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.replaceAll", "replaceAll()")}}, {{jsxref("String.search", "search()")}} y {{jsxref("String.split", "split()")}} métodos de {{jsxref("String")}}. Este capítulo describe las expresiones regulares de JavaScript.</p> + +<h2 id="Crear_una_expresión_regular">Crear una expresión regular</h2> + +<p>Construyes una expresión regular en una de estas dos formas:</p> + +<ul> + <li> + <p>Usando una expresión regular literal, que consiste en un patrón encerrado entre barras, como sigue:</p> + + <pre class="brush: js notranslate">let re = /ab+c/; +</pre> + + <p>Las expresiones regulares literales proporcionan la compilación de la expresión regular cuando se carga el script. Si la expresión regular permanece constante, su uso puede mejorar el rendimiento.</p> + </li> + <li> + <p>O llamando a la función constructora del objeto {{jsxref("RegExp")}}, de la siguiente manera:</p> + + <pre class="brush: js notranslate">let re = new RegExp('ab+c'); +</pre> + + <p>El uso de la función constructora proporciona una compilación en tiempo de ejecución de la expresión regular. Usa la función constructora cuando sepas que el patrón de la expresión regular cambiará, o no conoces el patrón y lo obtienes de otra fuente, como la entrada del usuario.</p> + </li> +</ul> + +<h2 id="Escribir_un_patrón_de_expresión_regular">Escribir un patrón de expresión regular</h2> + +<p>Un patrón de expresión regular se compone de caracteres simples, como <code>/abc/</code>, o una combinación de caracteres simples y especiales, como <code>/ab*c/</code> o <code>/Capítulo (\d)\.\d*/</code>. El último ejemplo incluye paréntesis, que se utilizan como dispositivos de memoria. La coincidencia realizada con esta parte del patrón se recuerda para su uso posterior, como se describe en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups">Uso de grupos</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si ya estás familiarizado con las formas de una expresión regular, también puedes leer <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">la hoja de referencia</a> para una búsqueda rápida de un patrón/construcción específica.</p> +</div> + +<h3 id="Usar_patrones_simples">Usar patrones simples</h3> + +<p>Los patrones simples se construyen con caracteres para los que deseas encontrar una coincidencia directa. Por ejemplo, el patrón <code>/abc/</code> coincide con combinaciones de caracteres en cadenas solo cuando ocurre la secuencia exacta <code>"abc"</code> (todos los caracteres juntos y en ese orden). Tal coincidencia tendría éxito en las cadenas <code>"Hola, ¿conoces tu abc?"</code> y <code>"Los últimos diseños de aviones evolucionaron a partir de slabcraft"</code>. En ambos casos, la coincidencia es con la subcadena <code>"abc"</code>. No hay ninguna coincidencia en la cadena <code>"Grab crab"</code> porque aunque contiene la subcadena <code>"ab c"</code>, no contiene la subcadena <code>"abc"</code> exacta.</p> + +<h3 id="Usar_caracteres_especiales">Usar caracteres especiales</h3> + +<p>Cuando la búsqueda de una coincidencia requiere algo más que una coincidencia exacta, como por ejemplo buscar una o más 'b', o encontrar espacios en blanco, puedes incluir caracteres especiales en el patrón. Por ejemplo, para hacer coincidir <em>una sola <code>"a"</code> seguida de cero o más <code>"b"</code>s seguidas de <code>"c"</code></em>, usarías el patrón <code>/ab*c/</code>: el <code>*</code> después de <code>"b"</code> significa "0 o más apariciones del elemento anterior". En la cadena <code>"cbbabbbbcdebc"</code>, este patrón coincidirá con la subcadena <code>"abbbbc"</code>.</p> + +<p>Las siguientes páginas proporcionan listas de los diferentes caracteres especiales que encajan en cada categoría, junto con descripciones y ejemplos.</p> + +<dl> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></dt> + <dd>Las aserciones incluyen límites, que indican el comienzo y el final de líneas y palabras, y otros patrones que indican de alguna manera que el reconocimiento es posible (incluidas las expresiones anticipadas, inversas y condicionales).</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></dt> + <dd>Distingue diferentes tipos de caracteres. Por ejemplo, distinguir entre letras y dígitos.</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></dt> + <dd>Indica grupos y rangos de caracteres de expresión.</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></dt> + <dd>Indica el número de caracteres o expresiones que deben coincidir.</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapes de propiedades Unicode</a></dt> + <dd>Distinguir según las propiedades de los caracteres Unicode, por ejemplo, letras mayúsculas y minúsculas, símbolos matemáticos y de puntuación.</dd> +</dl> + +<p>Si deseas ver todos los caracteres especiales que se pueden usar en expresiones regulares en una sola tabla, consulta lo siguiente:</p> + +<table class="standard-table"> + <caption>Caracteres especiales en expresiones regulares.</caption> + <thead> + <tr> + <th scope="col">Caracteres/construcciones</th> + <th scope="col">Artículo correspondiente</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\</code>, <code>.</code>, <code>\cX</code>, <code>\d</code>, <code>\D</code>, <code>\f</code>, <code>\n</code>, <code>\r</code>, <code>\s</code>, <code>\S</code>, <code>\t</code>, <code>\v</code>, <code>\w</code>, <code>\W</code>, <code>\0</code>, <code>\xhh</code>, <code>\uhhhh</code>, <code>\uhhhhh</code>, <code>[\b]</code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></p> + </td> + </tr> + <tr> + <td><code>^</code>, <code>$</code>, <code>x(?=y)</code>, <code>x(?!y)</code>, <code>(?<=y)x</code>, <code>(?<!y)x</code>, <code>\b</code>, <code>\B</code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></p> + </td> + </tr> + <tr> + <td><code>(x)</code>, <code>(?:x)</code>, <code>(?<Name>x)</code>, <code>x|y</code>, <code>[xyz]</code>, <code>[^xyz]</code>, <code>\<em>Number</em></code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></p> + </td> + </tr> + <tr> + <td><code>*</code>, <code>+</code>, <code>?</code>, <code>x{<em>n</em>}</code>, <code>x{<em>n</em>,}</code>, <code>x{<em>n</em>,<em>m</em>}</code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></p> + </td> + </tr> + <tr> + <td><code>\p{<em>UnicodeProperty</em>}</code>, <code>\P{<em>UnicodeProperty</em>}</code></td> + <td><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapes de propiedades Unicode</a></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">También está disponible una hoja de referencia más grande</a> (solo agregando partes de esos artículos individuales).</p> +</div> + +<h3 id="Escapando">Escapando</h3> + +<p>Si necesitas usar literalmente cualquiera de los caracteres especiales (en realidad buscando un <code>"*"</code>, por ejemplo), lo debes escapar colocando una barra invertida delante de él. Por ejemplo, para buscar <code>"a"</code> seguido de <code>"*"</code> seguido de <code>"b"</code>, usarías <code>/a\*b/</code> — la barra invertida "escapa" de <code>"*"</code>, volviéndola literal en lugar de especial.</p> + +<p>De manera similar, si estás escribiendo un literal de expresión regular y necesitas buscar una barra inclinada ("/"), la debes escapar (de lo contrario, esta termina el patrón). Por ejemplo, para buscar la cadena "/ejemplo/" seguida de uno o más caracteres alfabéticos, usarías <code>/\/ejemplo\/[a-z]+/i</code>: las barras invertidas antes de cada barra, las hace literales.</p> + +<p>Para hacer coincidir una barra invertida literal, debes escapar de la barra invertida. Por ejemplo, para encontrar la cadena "C:\" donde "C" puede ser cualquier letra, usarías <code>/[A-Z]:\\/</code> — la primera barra invertida escapa a la que sigue, por lo que la expresión busca una sola barra invertida literal.</p> + +<p>Si usas el constructor <code>RegExp</code> con un literal de cadena, recuerda que la barra invertida es un escape en los literales de cadena, por lo que para usarlo en la expresión regular, debes escapar en el nivel del literal de cadena. <code>/a\*b/</code> y <code>new RegExp("a\\*b")</code> crean la misma expresión, que busca "a" seguida de un "*" literal seguido de "b".</p> + +<p>Si las cadenas de escape aún no forman parte de tu patrón, puedes agregarlas usando {{jsxref('String.replace')}}:</p> + +<pre class="brush: js notranslate">function escapeRegExp(string) { + return string.replace(/[.*+\-?^${}()|[\]\\]/g,'\\$&'); // $& significa toda la cadena coincidente +} +</pre> + +<p>La "g" después de la expresión regular es una opción o indicador que realiza una búsqueda global, buscando en toda la cadena y devolviendo todas las coincidencias. Se explica en detalle a continuación en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Búsqueda avanzada con indicadores</a>.</p> + +<p><em>¿Por qué no está integrada en JavaScript?</em> Existe una propuesta para agregar esta función a RegExp, pero fue <a href="https://github.com/benjamingr/RegExp.escape/issues/37">rechazada por TC39.</a></p> + +<h3 id="Usando_paréntesis">Usando paréntesis</h3> + +<p>Los paréntesis alrededor de cualquier parte del patrón de expresión regular hacen que se recuerde esa parte de la subcadena coincidente. Una vez reconocida, la subcadena se puede recuperar para otro uso. Consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups">Grupos y rangos</a> para obtener más detalles.</p> + +<h2 id="Usar_expresiones_regulares_en_JavaScript">Usar expresiones regulares en JavaScript</h2> + +<p>Las expresiones regulares se utilizan con los métodos <code>RegExp</code> <code>test()</code> y <code>exec()</code> y con los métodos de <code>String</code>, <code>match()</code>, <code>replace()</code>, <code>search()</code> y <code>split()</code>. Estos métodos se explican en detalle en la <a href="/es/docs/Web/JavaScript/Reference" title="/es/docs/JavaScript/Reference">referencia de JavaScript</a>.</p> + +<table class="standard-table"> + <caption>Métodos que usan expresiones regulares</caption> + <thead> + <tr> + <th scope="col">Método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("RegExp.exec", "exec()")}}</td> + <td>Ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un arreglo de información o <code>null</code> en una discrepancia.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.test", "test()")}}</td> + <td>Prueba una coincidencia en una cadena. Devuelve <code>true</code> o <code>false</code>.</td> + </tr> + <tr> + <td>{{jsxref("String.match", "match()")}}</td> + <td>Devuelve un arreglo que contiene todas las coincidencias, incluidos los grupos de captura, o <code>null</code> si no se encuentra ninguna coincidencia.</td> + </tr> + <tr> + <td>{{jsxref("String.matchAll", "matchAll()")}}</td> + <td>Devuelve un iterador que contiene todas las coincidencias, incluidos los grupos de captura.</td> + </tr> + <tr> + <td>{{jsxref("String.search", "search()")}}</td> + <td>Prueba una coincidencia en una cadena. Devuelve el índice de la coincidencia, o <code>-1</code> si la búsqueda falla.</td> + </tr> + <tr> + <td>{{jsxref("String.replace", "replace()")}}</td> + <td>Ejecuta una búsqueda por una coincidencia en una cadena y reemplaza la subcadena coincidente con una subcadena de reemplazo.</td> + </tr> + <tr> + <td>{{jsxref("String.replaceAll", "replaceAll()")}}</td> + <td>Ejecuta una búsqueda de todas las coincidencias en una cadena y reemplaza las subcadenas coincidentes con una subcadena de reemplazo.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split()")}}</td> + <td>Utiliza una expresión regular o una cadena fija para dividir una cadena en un arreglo de subcadenas.</td> + </tr> + </tbody> +</table> + +<p>Cuando desees saber si un patrón se encuentra en una cadena, utiliza los métodos <code>test()</code> o <code>search()</code>; para obtener más información (pero una ejecución más lenta) utiliza los métodos <code>exec()</code> o <code>match()</code>. Si usas <code>exec()</code> o <code>match()</code> y si la búsqueda tiene éxito, estos métodos devuelven un arreglo y actualizan las propiedades del objeto expresión regular asociado y también del objeto de expresión regular predefinido, el objeto <code>RegExp</code>. Si la búsqueda falla, el método <code>exec()</code> devuelve <code>null</code> (que coacciona a <code>false</code>).</p> + +<p>En el siguiente ejemplo, el script utiliza el método <code>exec()</code> para encontrar una coincidencia en una cadena.</p> + +<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +var myArray = myRe.exec('cdbbdbsbz'); +</pre> + +<p>Si no necesitas acceder a las propiedades de la expresión regular, una forma alternativa de crear <code>myArray</code> es con este script:</p> + +<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec('cdbbdbsbz'); + // similar a "cdbbdbsbz" .match(/d(b+)d/g); sin embargo, + // "cdbbdbsbz" .match (/d(b+)d/g) genera Array ["dbbd"], mientras + // /d(b+)d/g.exec('cdbbdbsbz ') produce Array ['dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ]. +</pre> + +<p>(Consulta <a href="#g-diferentes-comportamientos">diferentes comportamientos</a> para obtener más información sobre los diferentes comportamientos).</p> + +<p>Si deseas construir la expresión regular a partir de una cadena, otra alternativa más es este script:</p> + +<pre class="brush: js notranslate">var myRe = new RegExp('d(b+)d', 'g'); +var myArray = myRe.exec('cdbbdbsbz'); +</pre> + +<p>Con estos scripts, la búsqueda se realiza correctamente, devuelve el arreglo y actualiza las propiedades que se muestran en la siguiente tabla.</p> + +<table class="standard-table"> + <caption>Resultado de la ejecución de expresiones regulares.</caption> + <thead> + <tr> + <th scope="col">Objeto</th> + <th scope="col">Propiedad o índice</th> + <th scope="col">Descripción</th> + <th scope="col">En este ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>myArray</code></td> + <td></td> + <td>La cadena coincidente y todas las subcadenas recordadas.</td> + <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td> + </tr> + <tr> + <td><code>índice</code></td> + <td>El índice basado en 0 de la coincidencia en la cadena de entrada.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>entrada</code></td> + <td>La cadena original.</td> + <td><code>'cdbbdbsbz'</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Los últimos caracteres encontrados.</td> + <td><code>'dbbd'</code></td> + </tr> + <tr> + <td rowspan="2"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td>El índice en el que comenzará la siguiente búsqueda. (Esta propiedad se establece solo si la expresión regular usa la opción <code>g</code>, descrita en <a href="#Búsqueda_avanzada_con_banderas">Búsqueda avanzada con banderas</a>).</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>fuente</code></td> + <td>El texto del patrón. Actualizado en el momento en que se crea la expresión regular, no se ejecuta.</td> + <td><code>'d(b+)d'</code></td> + </tr> + </tbody> +</table> + +<p>Como se muestra en la segunda forma de este ejemplo, puedes usar una expresión regular creada con un iniciador de objeto sin asignarla a una variable. Sin embargo, si lo hace, cada aparición es una nueva expresión regular. Por este motivo, si utilizas esta forma sin asignarla a una variable, no podrás acceder posteriormente a las propiedades de esa expresión regular. Por ejemplo, supongamos que tienes este script:</p> + +<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +var myArray = myRe.exec('cdbbdbsbz'); +console.log('El valor de lastIndex es ' + myRe.lastIndex); + +// "El valor de lastIndex es 5" +</pre> + +<p>Sin embargo, si tienes este script:</p> + +<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec('cdbbdbsbz'); +console.log('El valor de lastIndex es ' + /d(b+)d/g.lastIndex); + +// "El valor de lastIndex es 0" +</pre> + +<p>Las apariciones de <code>/d(b+)d/g</code> en las dos declaraciones son objetos de expresión regular diferentes y, por lo tanto, tienen valores diferentes para su propiedad <code>lastIndex</code>. Si necesitas acceder a las propiedades de una expresión regular creada con un iniciador de objeto, primero debes asignarla a una variable.</p> + +<h3 id="Búsqueda_avanzada_con_banderas"><a name="Advanced_searching_with_flags">Búsqueda avanzada con banderas</a></h3> + +<p>Las expresiones regulares tienen seis indicadores opcionales que permiten funciones como la búsqueda global y que no distinga entre mayúsculas y minúsculas. Estos indicadores se pueden usar por separado o juntos en cualquier orden y se incluyen como parte de la expresión regular.</p> + +<table class="standard-table"> + <caption>Indicadores de expresión regular</caption> + <thead> + <tr> + <th scope="col">Bandera</th> + <th scope="col">Descripción</th> + <th scope="col">Propiedad correspondiente</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>Búsqueda global.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global">RegExp.prototype.global</a></code></td> + </tr> + <tr> + <td><code>i</code></td> + <td>Búsqueda que no distingue entre mayúsculas y minúsculas.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase">RegExp.prototype.ignoreCase</a></code></td> + </tr> + <tr> + <td><code>m</code></td> + <td>Búsqueda multilínea.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline">RegExp.prototype.multiline</a></code></td> + </tr> + <tr> + <td><code>s</code></td> + <td>Permite que el <code>.</code> coincida con caracteres de nueva línea.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll">RegExp.prototype.dotAll</a></code></td> + </tr> + <tr> + <td><code>u</code></td> + <td>"unicode"; tratar un patrón como una secuencia de puntos de código Unicode.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode">RegExp.prototype.unicode</a></code></td> + </tr> + <tr> + <td><code>y</code></td> + <td>Realiza una búsqueda "pegajosa" que coincida a partir de la posición actual en la cadena de destino. Consulta {{jsxref("RegExp.sticky", "sticky")}}.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">RegExp.prototype.sticky</a></code></td> + </tr> + </tbody> +</table> + +<p>Para incluir una bandera con la expresión regular, usa esta sintaxis:</p> + +<pre class="brush: js notranslate">var re = /patrón/banderas; +</pre> + +<p>o</p> + +<pre class="brush: js notranslate">var re = new RegExp('patrón', 'banderas'); +</pre> + +<p>Ten en cuenta que las banderas son parte integral de una expresión regular. No se pueden agregar ni eliminar más tarde.</p> + +<p>Por ejemplo, <code>re = /\w+\s/g</code> crea una expresión regular que busca uno o más caracteres seguidos de un espacio y busca esta combinación en toda la cadena.</p> + +<pre class="brush: js notranslate">var re = /\w+\s/g; +var str = 'fee fi fo fum'; +var myArray = str.match(re); +console.log(myArray); + +// ["fee ", "fi ", "fo "] +</pre> + +<p>Podrías reemplazar la línea:</p> + +<pre class="brush: js notranslate">var re = /\w+\s/g; +</pre> + +<p>con:</p> + +<pre class="brush: js notranslate">var re = new RegExp('\\w+\\s', 'g'); +</pre> + +<p>y obtener el mismo resultado.</p> + +<p id="g-different-behaviors">El comportamiento asociado con el indicador <code>g</code> es diferente cuando se usa el método <code>.exec()</code>. Los roles de "clase" y "argumento" se invierten: En el caso de <code>.match()</code>, la clase cadena (o tipo de datos) posee el método y la expresión regular es solo un argumento, mientras que en el caso de <code>.exec()</code>, es la expresión regular la que posee el método, siendo la cadena el argumento. Compara esto <em><code>str.match(re)</code></em> con <em><code>re.exec(str)</code></em>. El indicador <code>g</code> se usa con el método <strong><code>.exec()</code></strong> para obtener una progresión iterativa.</p> + +<pre class="brush: js notranslate">var xArray; while(xArray = re.exec(str)) console.log(xArray); +// produce: +// ["fee ", index: 0, input: "fee fi fo fum"] +// ["fi ", index: 4, input: "fee fi fo fum"] +// ["fo ", index: 7, input: "fee fi fo fum"]</pre> + +<p>La bandera <code>m</code> se utiliza para especificar que una cadena de entrada de varias líneas se debe tratar como varias líneas. Si se usa el indicador <code>m</code>, <code>^</code> y <code>$</code> coinciden al principio o al final de cualquier línea dentro de la cadena de entrada en lugar del inicio o el final de toda la cadena.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: También hay varios ejemplos disponibles en:</p> + +<ul> + <li>Las páginas de referencia para {{jsxref("RegExp.exec", "exec()")}}, {{jsxref("RegExp.test", "test()")}}, {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.search", "search()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.split", "split()")}}</li> + <li>Artículos de esta guía: <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">clases de caracteres</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">aserciones</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos y rangos</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">cuantificadores</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">escapes de propiedades Unicode</a></li> +</ul> +</div> + +<h3 id="Usar_caracteres_especiales_para_verificar_la_entrada">Usar caracteres especiales para verificar la entrada</h3> + +<p>En el siguiente ejemplo, se espera que el usuario ingrese un número de teléfono. Cuando el usuario presiona el botón "Comprobar", el script verifica la validez del número. Si el número es válido (encuentra la secuencia de caracteres especificada por la expresión regular), la secuencia de comandos muestra un mensaje agradeciendo al usuario y confirmando el número. Si el número no es válido, el guión informa al usuario que el número de teléfono no es válido.</p> + +<p>Entre paréntesis que no capturan <code>(?:</code>, la expresión regular busca tres caracteres numéricos <code>\d{3}</code> O <code>|</code> un paréntesis izquierdo <code>\(</code> seguido de tres dígitos <code>\d{3}</code>, seguido de un paréntesis cerrado <code>\)</code>, (finaliza el paréntesis no capturador <code>)</code>), seguido de un guión, una barra diagonal o un punto decimal y cuando lo encuentre, recuerde el carácter <code>([-\/\.])</code>, seguido de tres dígitos <code>\d{3}</code>, seguido de la coincidencia recordada de un guión, una barra diagonal o un punto decimal <code>\1</code>, seguida de cuatro dígitos <code>\d{4}</code>.</p> + +<p>El evento <code>Change</code> activado cuando el usuario presiona <kbd>Enter</kbd> establece el valor de <code>RegExp.input</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p> + Ingresa tu número de teléfono (con el código de área) y luego haz clic en "Comprobar". + <br> + El formato esperado es como ###-###-####. +</p> +<form action="#"> + <input id="phone"> + <button onclick="testInfo(document.getElementById('phone'));">Comprobar</button> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; +function testInfo(phoneInput) { + var OK = re.exec(phoneInput.value); + if (!OK) { + console.error(phoneInput.value + ' isn\'t a phone number with area code!'); + } else { + console.log('Gracias, tu número de teléfono es ' + OK[0]);} +} </pre> + +<h4 id="Resultado">Resultado</h4> + +<div> +<p>{{ EmbedLiveSample('Using_special_characters_to_verify_input', '', '', '', 'Web/JavaScript/Guide/Regular_Expressions') }}</p> + +<h2 id="Herramientas">Herramientas</h2> + +<dl> + <dt><a href="https://regex101.com/" rel="noopener">Probador de expresiones regulares</a></dt> + <dd>Un constructor/depurador de expresiones regulares en línea</dd> + <dt><a href="https://extendsclass.com/regex-tester.html" rel="noopener">Visualizador de expresiones regulares</a></dt> + <dd>Un probador de expresiones regulares visual en línea.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.builtins.RegExp")}}</p> +</div> +</div> + +<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> |