Ersetzen von Text- und DOM-Elemente in jQuery
- Ersetzen von Text- und DOM-Elemente in jQuery
-
Verwenden Sie die
replace()-Methode, um Text in jQuery zu ersetzen -
Verwenden Sie die
replaceAll()-Methode, um DOM-Elemente in jQuery zu ersetzen -
Verwendung der Methode
replaceWith()zum Ersetzen von DOM-Elementen in jQuery
jQuery hat verschiedene Methoden, um die Funktion Ersetzen auszuführen. Dieses Tutorial zeigt, wie Sie Text- oder DOM-Elemente in jQuery ersetzen.
Ersetzen von Text- und DOM-Elemente in jQuery
jQuery hat Funktionen, um einen String durch einen anderen oder ein DOM-Element durch ein anderes zu ersetzen. Die Methode replace() kann einen String in einem Satz oder einer Gruppe von Strings ersetzen.
Die Methode replace() kann nur die erste Instanz ersetzen. Wenn wir alle Zeichenfolgenvorkommen ersetzen möchten, wird ein globaler Modifikator verwendet.
In ähnlicher Weise bietet jQuery eine Methode, um das DOM-Element durch ein anderes zu ersetzen. Die Methoden replaceAll() und replaceWith() können verwendet werden, um DOM-Elemente zu ersetzen.
Die Methode replaceAll() kann jedes Zielelement durch eine Menge von Elementen ersetzen. Die Methode replaceWith() kann jedes Element durch den neuen Inhalt ersetzen; es wird die Menge der entfernten Elemente zurückgeben.
Die Syntaxen für diese Methoden sind:
-
So ersetzen Sie einen Text mit der Methode
replace():string.replace (/[old string]/+/g, 'new string') -
So ersetzen Sie ein Zielelement mit der Methode
replaceAll():$(content).replaceAll(selector) -
So ersetzen Sie den ausgewählten Inhalt mit der Methode
replaceWith():$(selector).replaceWith(content, function(index))Wobei
gin der Methodereplace()den globalen Modifikator darstellt. Dercontentist in jeder Methode obligatorisch und gibt an, ob die Eingabe ein String, HTML-Elemente oder jQuery-Objekte ist.Optional ist die Funktion
function(index), die den zu ersetzenden Inhalt angibt. Lassen Sie uns Beispiele für jede Methode ausprobieren.
Verwenden Sie die replace()-Methode, um Text in jQuery zu ersetzen
Wie oben erwähnt, kann mit der Methode replace() ein String oder Teilstring ersetzt werden. Versuchen wir es an einem Beispiel:
<!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>
Der obige Code ersetzt das delftstack von der Spanne bis www.delftstack.com. Siehe Ausgabe:
Verwenden Sie die replaceAll()-Methode, um DOM-Elemente in jQuery zu ersetzen
Die Methode replaceAll() ersetzt jedes Element durch die Menge der übereinstimmenden Elemente. Versuchen wir es an einem Beispiel:
<!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>
Der obige Code ersetzt alle Absätze im angegebenen div durch den angegebenen Absatz. Siehe Ausgabe:
Verwendung der Methode replaceWith() zum Ersetzen von DOM-Elementen in jQuery
Die Methode replaceWith() wird verwendet, um jedes Element in der Menge der übereinstimmenden Elemente durch den angegebenen neuen Inhalt zu ersetzen. Siehe Beispiel:
<!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>
Der obige Code ersetzt den Inhalt des ausgewählten Elements. Dieses Beispiel ersetzt den Inhalt aus dem Absatz zu www.delftstack.com.
Siehe Ausgabe:
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