Remplacer le texte et les éléments DOM dans jQuery
- Remplacer le texte et les éléments DOM dans jQuery
-
Utilisez la méthode
replace()pour remplacer le texte dans jQuery -
Utilisez la méthode
replaceAll()pour remplacer les éléments DOM dans jQuery -
Utilisez la méthode
replaceWith()pour remplacer les éléments DOM dans jQuery
jQuery a différentes méthodes pour exécuter la fonctionnalité remplacer. Ce tutoriel montre comment remplacer du texte ou des éléments DOM dans jQuery.
Remplacer le texte et les éléments DOM dans jQuery
jQuery a des fonctionnalités pour remplacer une chaîne par une autre ou un élément DOM par un autre. La méthode replace() peut remplacer une chaîne dans une phrase ou un groupe de chaînes.
La méthode replace() ne peut remplacer que la première instance. Si nous voulons remplacer toutes les occurrences de chaîne, un modificateur global est utilisé.
De même, jQuery propose une méthode pour remplacer l’élément DOM par un autre. Les méthodes replaceAll(), et replaceWith() peuvent être utilisées pour remplacer des éléments DOM.
La méthode replaceAll() permet de remplacer chaque élément cible par un ensemble d’éléments. La méthode replaceWith() peut remplacer chaque élément par le nouveau contenu ; il renverra l’ensemble des éléments supprimés.
Les syntaxes de ces méthodes sont :
-
Pour remplacer un texte en utilisant la méthode
replace():string.replace (/[old string]/+/g, 'new string') -
Pour remplacer un élément cible à l’aide de la méthode
replaceAll():$(content).replaceAll(selector) -
Pour remplacer le contenu sélectionné à l’aide de la méthode
replaceWith():$(selector).replaceWith(content, function(index))Où
gdans la méthodereplace()représente le modificateur global. Lecontentest obligatoire dans chaque méthode, qui précisera si l’entrée est une chaîne, des éléments HTML ou des objets jQuery.La
fonction(index)est optionnelle, elle précise le contenu à remplacer. Essayons des exemples pour chaque méthode.
Utilisez la méthode replace() pour remplacer le texte dans jQuery
Comme mentionné ci-dessus, la méthode replace() peut être utilisée pour remplacer une chaîne ou une sous-chaîne. Essayons un exemple :
<!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>
Le code ci-dessus remplacera le delftstack de la portée vers le www.delftstack.com. Voir la sortie :
Utilisez la méthode replaceAll() pour remplacer les éléments DOM dans jQuery
La méthode replaceAll() remplacera chaque élément par l’ensemble des éléments correspondants. Essayons un exemple :
<!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>
Le code ci-dessus remplacera tous les paragraphes de la div donnée par le paragraphe donné. Voir la sortie :
Utilisez la méthode replaceWith() pour remplacer les éléments DOM dans jQuery
La méthode replaceWith() est utilisée pour remplacer chaque élément de l’ensemble des éléments correspondants par le nouveau contenu donné. Voir exemple :
<!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>
Le code ci-dessus remplacera le contenu de l’élément sélectionné. Cet exemple remplace le contenu du paragraphe par www.delftstack.com.
Voir la sortie :
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