Ejemplo de JavaScript String.Replace () con RegEx

Las expresiones regulares (también llamadas RegEx o RegExp) son una forma eficaz de analizar texto. Con RegEx, puede hacer coincidir cadenas en puntos que coinciden con caracteres específicos (por ejemplo, JavaScript) o patrones (por ejemplo, NumberStringSymbol - 3a &).

El .replacemétodo se usa en cadenas en JavaScript para reemplazar partes de cadenas con caracteres. A menudo se usa así:

const str = 'JavaScript'; const newStr = str.replace("ava", "-"); console.log(newStr); // J-Script 

Como puede ver arriba, el método de reemplazo acepta dos argumentos: la cadena que se reemplazará y con qué se reemplazará la cadena.

Aquí es donde entra en juego Regex .

El uso de lo .replaceanterior es limitado: los caracteres a reemplazar son conocidos - "ava". ¿Qué pasa si nos preocupamos por un patrón? ¿Quizás un número, dos letras y la palabra "foo" o tres símbolos usados ​​juntos?

El .replacemétodo utilizado con RegExpuede lograr esto. RegExse puede utilizar de forma eficaz para recrear patrones. Entonces, combinar esto con .replacesignifica que podemos reemplazar patrones y no solo caracteres exactos.

Cómo utilizar RegExcon .replaceen JavaScript

Para usar RegEx, el primer argumento de replaceserá reemplazado con sintaxis de expresiones regulares, por ejemplo /regex/. Esta sintaxis sirve como patrón donde cualquier parte de la cadena que coincida con ella será reemplazada por la nueva subcadena.

He aquí un ejemplo:

// matches a number, some characters and another number const reg = /\d.*\d/ const str = "Java3foobar4Script" const newStr = str.replace(reg, "-"); console.log(newStr); // "Java-Script" 

La cadena 3foobar4coincide con la expresión regular /\d.*\d/, por lo que se reemplaza.

¿Y si quisiéramos realizar reemplazos en varios lugares?

Regexya ofrece eso con la gbandera (global), y lo mismo se puede usar con replace. Así es cómo:

const reg = /\d{3}/g const str = "Java323Scr995ip4894545t"; const newStr = str.replace(reg, ""); console.log(newStr); // JavaScrip5t // 5 didn't pass the test :( 

La expresión regular coincide con partes de la cadena que son exactamente 3 números consecutivos. 323lo coincide, lo 995empareja, lo 489empareja y lo 454empareja. Pero el último 5no coincide con el patrón.

El resultado es que JavaScrip5tmuestra cómo los patrones coinciden correctamente y se reemplazan con la nueva subcadena (una cadena vacía).

iTambién se puede utilizar la bandera del caso . Esto significa que puede reemplazar los patrones que no distinguen entre mayúsculas y minúsculas. Así es como se usa:

const reg1 = /\dA/ const reg2 = /\dA/i const str = "Jav5ascript" const newStr1 = str.replace(reg1, "--"); const newStr2 = str.replace(reg2, "--"); console.log(newStr1) // Jav5ascript console.log(newStr2) // Jav--script 

..5a..no coincide con la primera sintaxis porque la expresión regular distingue entre mayúsculas y minúsculas de forma predeterminada. Pero con el uso de la ibandera, como se ve en la segunda sintaxis, la cadena es como se esperaba: reemplazada.

Cómo usar Dividir con expresiones regulares

splittambién utiliza RegEx. Lo que significa que puede dividir una cadena no solo en las subcadenas que coinciden con los caracteres exactos, sino también con los patrones.

He aquí un vistazo rápido:

const regex = /\d{2}a/; const str = "Hello54 How 64aare you"; console.log(str.split(regex)) // ["Hello54 How ", "are you"] 

La cadena estaba spliten 64aporque esa subcadena coincide con la expresión regular especificada.

Tenga en cuenta que la bandera global - g- en splites irrelevante, a diferencia de la ibandera y otras banderas. Esto se debe a que splitdivide la cadena en los varios puntos que coincide con la expresión regular.

Terminando

RegExhace que replacelas cadenas de caracteres en JavaScript sean más efectivas, potentes y divertidas.

No solo está restringido a caracteres exactos, sino a patrones y reemplazos múltiples a la vez. En este artículo, hemos visto cómo funcionan juntos usando algunos ejemplos.

Saludos a RegEx?