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

2018. 2. 4. 19:43 | 댓글 0

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

목차

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

    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


    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기

    댓글을 달아 주세요

    ">