El método replace() de JavaScript se utiliza para reemplazar cualquier aparición de un carácter en una string o en toda la string. Busca una string correspondiente a un valor particular o una expresión regular y devuelve una nueva string con los valores modificados.
También se pueden usar expresiones regulares en lugar de strings para definir el carácter o la string que se reemplazará. Una expresión regular es una string que contiene símbolos y caracteres especiales para buscar y extraer la información necesaria de los datos dados. Las expresiones regulares son básicamente strings que contienen caracteres y símbolos especiales que pueden ayudar a seleccionar los valores requeridos.
Hay que tener en cuenta que la función replace() reemplazará solo la primera aparición del valor especificado. Para reemplazar todas las ocurrencias, uno tiene que usar el modificador global .
Sintaxis:
string.replace(valueToBeReplaced, newValue)
donde ‘valueToBeReplaced’ puede ser un valor de string o una expresión regular.
Ejemplo 1: la función replace() se usará para reemplazar la string ‘Hola’ con ‘Hola’
html
<!DOCTYPE html>
<html>
<head>
<title>Replace Example</title>
</head>
<body>
<h1>Hello welcome to our blog!</h1>
<p>
Hello today we shall learn about
replace() function in JavaScript
Click on the button below to replace
hello with hi.
</p>
<button onclick="rep()">Replace</button>
<script>
// Replace the first "Hello"
// in the page with "Hi"
function rep() {
document.body.innerHTML
= document.body.innerHTML
.replace("Hello", "Hi");
}
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
Como se ve en el resultado anterior, solo la primera aparición de ‘Hola’ se sustituyó por ‘Hola’. Para sustituir todas las ocurrencias, se debe usar un modificador global.
Ejemplo 2: use la función replace() para reemplazar todas las apariciones de la string ‘Hola’ con ‘Hola’
html
<!DOCTYPE html>
<html>
<head>
<title>Replace Example</title>
</head>
<body>
<h1>Hello welcome to our blog!</h1>
<p>Hello today we shall learn about
replace() function in JavaScript
Click on the button below to
replace hello with hi.
</p>
<button onclick="rep()">Replace</button>
<script>
// Replace all the "Hello"
// in the page with "Hi"
function rep() {
document.body.innerHTML =
document.body.innerHTML
.replace(/Hello/g, "Hi");
}
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
En el siguiente ejemplo, tanto el modificador global como el modificador «i» se utilizan para garantizar que todas las apariciones de la palabra dada se reemplacen independientemente de su caso.
Ejemplo 3: Uso de la función replace() para reemplazar todas las apariciones de la string ‘Hola’ con ‘Hola’ independientemente de su caso.
html
<!DOCTYPE html>
<html>
<head>
<title>Replace Example</title>
</head>
<body>
<h1>Hello welcome to our blog!</h1>
<p>
Hello today we shall learn about
replace() function in JavaScript
Click on the button below to
replace hello with hi.
</p>
<button onclick="rep()">
Replace
</button>
<script>
// Replace all the "Hello" in the
// page with "Hi" irrespective of
// the case
function rep() {
document.body.innerHTML =
document.body.innerHTML
.replace(/Hello/gi, "Hi");
}
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
Ejemplo 4: Uso de la función replace() para reemplazar todas las apariciones de la string ‘Hola’ con ‘Hola’ en una etiqueta en particular.
html
<!DOCTYPE html>
<html>
<head>
<title>Replace Example</title>
</head>
<body>
<h1>Hello welcome to our blog!</h1>
<p>Hello today we shall learn about
replace() function in JavaScript
Click on the button below to replace
hello with hi.
</p>
<button onclick="rep()">Replace</button>
<script>
// Replace all the "Hello" in the
// page with "Hi" irrespective of the case
// with the h1 tag
function rep() {
document.getElementById('h1').innerHTML
= document.getElementById('h1')
.innerHTML.replace(/Hello/g, "Hi");
}
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
Como se ve en el resultado, solo las apariciones de ‘Hola’ en la sección de la etiqueta h1 del código se reemplazan con ‘Hola’.
Publicación traducida automáticamente
Artículo escrito por srishtirajani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA