HOWTO · jQuery
jQuery에서 텍스트 및 DOM 요소 바꾸기
이 튜토리얼은 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으로 바꿉니다.
출력 참조:
