Reemplazar texto y elementos DOM en jQuery
- Reemplazar texto y elementos DOM en jQuery
-
Use el método
replace()para reemplazar texto en jQuery -
Use el método
replaceAll()para reemplazar elementos DOM en jQuery -
Use el método
replaceWith()para reemplazar elementos DOM en jQuery
jQuery tiene diferentes métodos para realizar la funcionalidad de replace. Este tutorial demuestra cómo reemplazar texto o elementos DOM en jQuery.
Reemplazar texto y elementos DOM en jQuery
jQuery tiene funcionalidades para reemplazar una cadena por otra o un elemento DOM por otro. El método replace() puede reemplazar una cadena en una oración o grupo de cadenas.
El método replace() solo puede reemplazar la primera instancia. Si queremos reemplazar todas las ocurrencias de cadenas, se usa un modificador global.
De manera similar, jQuery ofrece un método para reemplazar el elemento DOM por otro. Los métodos replaceAll() y replaceWith() se pueden usar para reemplazar elementos DOM.
El método replaceAll() puede reemplazar cada elemento de destino con un conjunto de elementos. El método replaceWith() puede reemplazar cada elemento con el nuevo contenido; devolverá el conjunto de elementos eliminados.
Las sintaxis para estos métodos son:
-
Para reemplazar un texto usando el método
replace():string.replace (/[old string]/+/g, 'new string') -
Para reemplazar un elemento objetivo utilizando el método
replaceAll():$(content).replaceAll(selector) -
Para reemplazar el contenido seleccionado utilizando el método
replaceWith():$(selector).replaceWith(content, function(index))Donde
gen el métodoreplace()representa el modificador global. Elcontentes obligatorio en cada método, que especificará si la entrada es una cadena, elementos HTML u objetos jQuery.La
function(index)es opcional, que especifica el contenido a reemplazar. Probemos ejemplos para cada método.
Use el método replace() para reemplazar texto en jQuery
Como se mencionó anteriormente, el método replace() se puede usar para reemplazar una cadena o subcadena. Probemos un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Replace() Method</title>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".SubElement span").text(function (index, text) {
return text.replace("delftstack", "www.delftstack.com");
});
});
</script>
<style>
#MainDiv {
width: 800px;
height: 400px;
background-color: lightblue;
padding-top: 30px;
padding-left: 10px;
font-size: 40px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="MainDiv">
<div class="SubElement">
<h2 style="color: green;">
jQuery Replace() Method Example
</h2>
<hr />
<br />
<span>Hello, This is delftstack</span>
</div>
</div>
</body>
</html>
El código anterior reemplazará el delftstack del tramo a www.delftstack.com. Ver salida:
Use el método replaceAll() para reemplazar elementos DOM en jQuery
El método replaceAll() reemplazará cada elemento con el conjunto de elementos coincidentes. Probemos un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>jQuery ReplaceAll Method</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("<p>The Paragraph is replaced</p>").replaceAll("p");
});
});
</script>
<style>
#MainDiv {
width: 800px;
height: 400px;
background-color: lightblue;
padding-top: 30px;
padding-left: 10px;
font-size: 30px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="MainDiv">
<h2>jQuery ReplaceAll Method</h2>
<p>This is paragraph One</p>
<p>This is paragraph Two</p>
<p>This is paragraph Three</p>
<button>Click to see change</button><br />
</div>
</body>
</html>
El código anterior reemplazará todos los párrafos en el div dado con el párrafo dado. Ver salida:
Use el método replaceWith() para reemplazar elementos DOM en jQuery
El método replaceWith() se usa para reemplazar cada elemento en el conjunto de elementos coincidentes con el nuevo contenido dado. Ver ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>jQuery ReplaceWith() Method</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#DemoPara").replaceWith("www.delftstack.com");
});
});
</script>
<style>
#MainDiv {
width: 800px;
height: 400px;
background-color: lightblue;
padding-top: 30px;
padding-left: 10px;
font-size: 30px;
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="MainDiv">
<h2>jQuery ReplaceWith Method Example</h2>
<hr />
<br />
<p id="DemoPara">delftstack</p>
<button id="button">Click here to replace the selected element</button>
</div>
</body>
</html>
El código anterior reemplazará el contenido del elemento seleccionado. Este ejemplo reemplaza el contenido del párrafo a www.delftstack.com.
Ver salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook