在 jQuery 中替换文本和 DOM 元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 jQuery 中替换文本和 DOM 元素

作者：迹忆客最近更新：2024/03/24 浏览次数：

jQuery 有不同的方法来执行 replace 功能。本教程演示如何在 jQuery 中替换文本或 DOM 元素。

在 jQuery 中替换文本和 DOM 元素

jQuery 具有用另一个替换字符串或用另一个替换 DOM 元素的功能。replace() 方法可以替换一个句子或一组字符串中的字符串。

replace() 方法只能替换第一个实例。如果我们想替换所有出现的字符串，则使用全局修饰符。

类似地，jQuery 提供了一种用另一个替换 DOM 元素的方法。replaceAll() 和 replaceWith() 方法可用于替换 DOM 元素。

replaceAll() 方法可以用一组元素替换每个目标元素。replaceWith() 方法可以用新内容替换每个元素；它将返回已删除元素的集合。

这些方法的语法是：

使用 replace() 方法替换文本：

string.replace (/[old string]/+/g, 'new string')

使用 replaceAll() 方法替换目标元素：
```
$(content).replaceAll(selector)
```
使用 replaceWith() 方法替换所选内容：
```
$(selector).replaceWith(content, function(index))
```
其中 replace() 方法中的 g 表示全局修饰符。content 在每个方法中都是强制性的，它将指定输入是字符串、HTML 元素还是 jQuery 对象。

function(index) 是可选的，它指定要替换的内容。让我们尝试每种方法的示例。

使用 `replace()` 方法替换 jQuery 中的文本

如上所述，replace() 方法可用于替换字符串或子字符串。让我们尝试一个例子：

<!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>

上面的代码将把 span 中的 delftstack 替换为 www.delftstack.com。见输出：

使用 `replaceAll()` 方法替换 jQuery 中的 DOM 元素

replaceAll() 方法将用匹配的元素集替换每个元素。让我们尝试一个例子：

<!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>

上面的代码将用给定的段落替换给定 div 中的所有段落。见输出：

使用 `replaceWith()` 方法替换 jQuery 中的 DOM 元素

replaceWith() 方法用于将匹配元素集中的每个元素替换为给定的新内容。参见示例：

<!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>