[jquery] 특정 태그를 다른 태그로 바꿔주는 스크립트

블로그 글을 쓰다보면 기본에디터로 글을 쓰고 html 모드로 변경해서 목차, 버튼 등 특정 태그를 넣어주는 경우가 많습니다. 이번 포스팅에서는 이부분을 좀 쉽게 변경하는 방법이 없을까 생각해보면서 만들어본 스크립트 입니다.

바꿔줄  p 태그 찾기

보통 티스토리 에디터에서는 특정 태그에 id나 class 속성 값을 줄 수가 없기 때문에 태그가 감싸고 있는 내용( .html()값 ) 으로 찾아야 합니다.

예제로 p태그 안에 data-ke-size="size16" 속성을 가지고 있는 것 중에서 버튼 '버튼'이라는 내용이 있는 것을 찾는 코드 입니다.

    $('p[data-ke-size="size16"]').each(function(){
        var $p = $(this);
        
        // <p> 태그의 텍스트가 '광고'인 경우에만 실행합니다.
        if ($p.text().trim() === '버튼') {
        	console.log( $p.text() );
        }
    });

 

console로는 '버튼'이 출력될 겁니다.

 

p태그 내용 바꿔주기

여기서 내용만 변경해 주면 됩니다. 

    $('p[data-ke-size="size16"]').each(function(){
        var $p = $(this);
        
        // <p> 태그의 텍스트가 '광고'인 경우에만 실행합니다.
        if ($p.text().trim() === '버튼') {
        	// 변경할 내용 삽입
        	$p.text('<a class="RedBtn" href="https://www.naver.com" >더 알아보기</a>')
        }
    });

이렇게 변경 할 수 있습니다.

 

아래 버튼은 위 코드를 응용해서 html편집기를 쓰지 않고 버튼으로 만들어 봤습니다.

 

이 부분이 버튼이 됩니다.

 

감사합니다.