See the Pen 문자 대체 by nilgi (@nilgi) on CodePen.
<p id="np1">인생은 찰나다.</p>
<button onclick="nilgif()">삶의 선택</button>
<script>
function nilgif() {
let text = document.getElementById("np1").innerHTML;
document.getElementById("np1").innerHTML =
text.replace("찰나", "반복이"); // 글자 '찰나'를 '반복이'로 바꾼다.
}
</script>
<p id="np2">닐기에 오신걸 환영합니다. 여기는 닐기입니다.</p>
<button onclick="nilgif2()">버튼</button>
<script>
function nilgif2() {
let text = document.getElementById("np2").innerHTML;
document.getElementById("np2").innerHTML =
text.replace("닐기", "우주"); // 첫번째 글자부터 바꾼다.
}
</script>
<p id="np3">NILGI's blood type is AB.</p>
<button onclick="nilgif3()">혈액형</button>
<script>
function nilgif3() {
let text = document.getElementById("np3").innerHTML;
document.getElementById("np3").innerHTML =
text.replace("ab", "A+B"); // 대소문자를 구분한다. 여기서는 바뀌는 문자가 없다.
}
</script>
<p id="np4">NILGI's blood type is AB.</p>
<button onclick="nilgif4()">혈액형</button>
<script>
function nilgif4() {
let text = document.getElementById("np4").innerHTML;
document.getElementById("np4").innerHTML =
text.replace(/ab/i, "A+B"); // 대소문자를 구분하지 않고 바꾸려면 /글자/i를 쓴다.
}
</script>
<p id="np5">NILGI's blood type is AB. Type AB is stupid.</p>
<button onclick="nilgif5()">혈액형</button>
<script>
function nilgif5() {
let text = document.getElementById("np5").innerHTML;
document.getElementById("np5").innerHTML =
text.replace(/AB/g, "ab"); // 대소문자 구분 없이 모두 바꾸려면 '/글자/g'를 쓴다.
}
</script>
<p id="np6">nilgi's blood tyoe is ab.</p>
<button onclick="nilgif6()">대문자</button>
<script>
function nilgif6() {
let text = document.getElementById("np6").innerHTML;
document.getElementById("np6").innerHTML =
text.toUpperCase(); // 소문자를 대문자로 바꾼다.
}
</script>
<p id="np7">NILGI'S BLOOD TYOE IS AB.</p>
<button onclick="nilgif7()">소문자</button>
<script>
function nilgif7() {
let text = document.getElementById("np7").innerHTML;
document.getElementById("np7").innerHTML =
text.toLowerCase(); // 대문자를 소문자로 바꾼다.
}
</script>