Ersetzen von Text- und DOM-Elemente in jQuery

Sheeraz Gul 15 Februar 2024
  1. Ersetzen von Text- und DOM-Elemente in jQuery
  2. Verwenden Sie die replace()-Methode, um Text in jQuery zu ersetzen
  3. Verwenden Sie die replaceAll()-Methode, um DOM-Elemente in jQuery zu ersetzen
  4. Verwendung der Methode replaceWith() zum Ersetzen von DOM-Elementen in jQuery
Ersetzen von Text- und DOM-Elemente 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:

  1. So ersetzen Sie einen Text mit der Methode replace():

    string.replace (/[old string]/+/g, 'new string')
    
  2. So ersetzen Sie ein Zielelement mit der Methode replaceAll():

    $(content).replaceAll(selector)
    
  3. So ersetzen Sie den ausgewählten Inhalt mit der Methode replaceWith():

    $(selector).replaceWith(content, function(index))
    

    Wobei g in der Methode replace() den globalen Modifikator darstellt. Der content ist 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:

jQuery-Ersetzungsmethode

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:

jQuery-ReplaceAll-Methode

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:

jQuery ReplaceWith-Methode

Sheeraz Gul avatar Sheeraz Gul avatar

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

Verwandter Artikel - jQuery Text