在 jQuery 中替换文本和 DOM 元素
- 在 jQuery 中替换文本和 DOM 元素
-
使用
replace()方法替换 jQuery 中的文本 -
使用
replaceAll()方法替换 jQuery 中的 DOM 元素 -
使用
replaceWith()方法替换 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。
见输出：
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