자바스크립트 제이쿼리 replace 텍스트 문장 변경하는 방법

티스토리에는 치환자라는 시스템이 있습니다. 티스토리에서만 사용하는 일종의 암구호같은 존재입니다. 치환자에는 값치환자와 그룹치환자가 있습니다. 이 치환자는 정해진 클래스명, 태그명, 텍스트가 있어서 일반적인 HTML에서는 수정이 불가합니다. 즉 이미 뿌려져 출력된 결과값을 다시 한 번 자바스크립트나 제이쿼리로 추적해 수정해야 합니다. 예를 들면 이런 경우입니다.

상황 살펴보기

티스토리 본문을 들어가보면 일반 방문자들은 보이지 않는 관리자 메뉴가 블로거 운영자에게는 보이게 됩니다. 그러면 위의 스크린샷 이미지처럼 비공개로 변경합니다. 라는 텍스트도 보이게 되지요. 개인적으로 좀 통일감이 있으면 좋겠는데 저게 너무 눈엣가시입니다. 잘 보세요. 다른 메뉴들은 모두 단어 하나로 표현되어 있는데 왜 저 녀석만 문장형이냐고요. 이게 거슬리는 부분인 것입니다. 따라서 저는 저놈의 「비공개로 변경합니다.」를 바꾸고 싶습니다.

하지만 HTML 편집 모드에서 살펴보면 이렇게 치환자 형태로 나옵니다. 즉 이 상태에서 텍스트 수정은 불가합니다.

[샵샵_s_ad_s2_label_샵샵] 이라는 티스토리 값치환자가 티스토리 데이터베이스로부터 치환되면 결과적으로 저렇게 한글 텍스트로 출력되는 것입니다. 글이 현재 공개 상태면 「비공개로 변경합니다」라는 문장으로, 반대로 비공개 상태면 텍스트는 「공개로 변경합니다」로 바뀝니다. 그럼 한번 작업을 시작해 봅시다.

CDN 세팅하기 (선택사항)

제이쿼리를 사용하려면 <head>에 제이쿼리 관련 CDN을 세팅해야 합니다. 근데 보통은 티스토리 서버 자체적으로 모든 티스토리 스킨에 jQuery(제이쿼리) CDN 주소를 기본 세팅해놓은 상태일 것입니다. 따라서 이 내용은 굳이 하지 않아도 상관은 없습니다만 만약 CDN 세팅을 건너뛰고 그 다음 과정부터 모두 진행 완료했음에도 불구하고 정상적으로 동작하지 않는다면 그때 이 과정을 추가 진행해주시기 바랍니다.

https://jquery.com/download/

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

제이쿼리 공홈을 방문하면 CDN 주소를 쉽고 간편하게 입력할 수 있습니다.

위의 페이지를 방문해 조금만 아래로 내려가면 4개의 서버에 대한 제이쿼리 CDN 스크립트 코드가 있을겁니다. 개인적으로 추천하는건 구글 CDN입니다.

3.x 스니펫:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
2.x 스니펫:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x 스니펫:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

버전에 따라 구별이 되어있는데 최신 버전을 사용하면 왠만한 문제는 대부분 해결될 것입니다. 셋 중 최신 버전의 제이쿼리 스크립트 코드를 <head> 안에 붙여넣기 합니다.

Script 세팅하기

<script>
    $(document).ready(function() {
        $("선택자").each(function() {
            var 변수명 = $(this).text();
            $(this).text(변수명.replace("원본 텍스트", "변경하려는 텍스트"));
        });
    });
</script>

그리고 제이쿼리 코드는 이렇게 구상합니다. 제이쿼리에서 텍스트를 변경하는 대표적인 매소드는 replace 가 있습니다. 바로 이 replace를 사용하여 티스토리의 텍스트 문장을 원하는 키워드로 변경할 수 있습니다. 선택자와 변수명에 대한 설명은 다음과 같습니다.

선택자 : CSS에서 태그(요소)를 선택하는 옵션 (크롬 개발자 툴에서 확인하면 파악 가능)

변수명 : 사용자가 지정한 홈페이지 ID같은 존재

변수명은 한 개의 알파벳 단어로 사용 가능하며 여러개의 알파벳을 조합해 사용해도 상관 없습니다. 홈페이지 가입 시 여러분들께서 자유롭게 원하는 키워드를 사용하시는 것처럼 변수명도 같은 개념으로 이해하시면 됩니다. 위의 코드는 아래 첨부파일에 올려두었으니 다운로드 받아서 편하게 사용하시면 됩니다.

제이쿼리 replace.txt

0.00MB

이 스크립트 코드를 사용중인 티스토리 스킨의 </body> 바로 위에 붙여넣기 하시면 됩니다.

친효스킨 경우

<script>
    $(document).ready(function() {
        $(".articleAdmin a.change").each(function() {
            var t = $(this).text();
            $(this).text(t.replace("비공개로 변경합니다.", "비공개"));
            $(this).text(t.replace("공개로 변경합니다.", "공개"));
        });
    });
</script>

친효스킨의 경우에는 선택자가 .articleAdmin a.change 입니다. 변수명은 그냥 t만 사용했고요. 그리고 replace가 두 번 사용되었는데 이유는 비공개와 공개 상태의 텍스트가 서로 다르기 때문입니다. 이렇게 완성된 스크립트 코드를 </body> 바로 위에 붙여넣기하면 끝입니다.