[js] JS - 특정 문자열 글자 포함 요소의 글자색 스타일 변경

1. 특정 글자를 포함하는 요소의 글자색 변경
2. 특정 글자와 일치하는 요소만 글자색 변경

특정 글자를 포함하는 요소의 글자색 변경

 

<p>홈짱</p>

<p>닷컴</p>

<p>홈짱닷컴</p>

 

<script>

document.querySelectorAll('p').forEach(p => {

  if (p.textContent.includes("홈짱")) {

    p.style.color = 'red';

  }

});

</script>

결과보기

---

PS. 특정 글자가 여러 개인 경우

 

<p>홈짱</p>

<p>닷컴</p>

<p>홈짱닷컴</p>

<div>홈짱최고</div>

<script>

const banList = ["홈짱",'닷컴'];

document.querySelectorAll("p, div").forEach(e => {

  if (banList.some(word => e.textContent.includes(word))) {

    e.style.display = "none";

  }

});

</script>

결과보기 

특정 글자와 일치하는 요소만 글자색 변경

 

<p>홈짱</p>

<p>닷컴</p>

<p>홈짱닷컴</p>

 

<style>

document.querySelectorAll('p').forEach(p => {

  if (p.textContent.trim() === "홈짱") { 

    p.style.color = 'red'; 

  }

});

</style>

 

결과보기