在 jQuery 中替换文本和 DOM 元素
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>
上面的代码将替换所选元素的内容。此示例将段落中的内容替换为 www.delftstack.com。
见输出：
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
