javascript로 텍스트 변경하기 (자체 정리용)

자바스크립트로 텍스트를 변경하는 방법 예시입니다.

목차

자바스크립트로 텍스트 변경하기

html 소스

<h2>Test - 1</h2>

<h2>Test - 2</h2>

<h2>Test - 3</h2>

"Test - 3"을 "Test - 5"로 변경

var string = document.getElementsByTagName("h2")[2].innerHTML;

var replacedString = string.replace("Test - 3", "Test - 5");

document.getElementsByTagName("h2")[2].innerHTML = replacedString;

"Microsoft"를 "W3Schools"로 변경

var str = "Visit Microsoft!";

var res = str.replace("Microsoft", "W3Schools");

전역 변경

var str = "Mr Blue has a blue house and a blue car";

var res = str.replace(/blue/g, "red");

getElementsByClassName() 메소드

var list = document.getElementsByClassName("example")[0];

list.getElementsByClassName("child")[0].innerHTML = "Milk";

div 내에서 child라는 클래스를 가진 2번째 요소의 배경색 변경

var x = document.getElementById("myDIV");

x.getElementsByClassName("child")[1].style.backgroundColor = "red";

https://www.w3schools.com/jsref/met_element_getelementsbyclassname.asp 참고

Javascript/jQuery 템플릿:

PHP 스크립트, 워드프레스 플러그인, CSS 코드 등을 판매하는 CodeCanyon에서 다양한 기능(예: 슬라이드, 동영상 플레이어 등)의 자바스크립트 또는 jQuery 템플릿을 비교적 저렴하게 구입할 수 있습니다.

참고:

• https://www.codeproject.com/Tips/639255/JavaScript-Replace-text-of-an-HTML-element-without
• https://www.w3schools.com/jsref/jsref_replace.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
• https://docs.microsoft.com/en-us/scripting/javascript/reference/replace-method-string-javascript
• https://davidwalsh.name/string-replace-javascript