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>
위의 코드는 범위에서 www.delftstack.com으로 delftstack을 대체합니다. 출력 참조:
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