티스토리 텍스트 에어리어 만들고 data-ke-size 제거 하기

2023. 4. 6. 14:48 / 서기랑

 티스토리 블로그에서 h태그나 p태그가 <h3>나 <p>와 같은 형태로 변경면 css에서 전체 글자 크기를 조절할 수 없게 되기 때문에 이를 제거하는 사용자가 있을 것이다.

 이러한 형태를 제거하는 방법으로는 자바스크립트를 사용하는 것이 가장 편하긴 하지만 블로그 전체에 스크립트를 추가하는 것이 싫은 사용자 중에서는 문서 프로그램에 html을 붙여 넣고 찾아 바꾸기로 직접 제거하는 사용자도 있을 것이다.

 

data-ke-size 제거 텍스트 에어리어

 <p>와 같은 형태를 제거하고 <p>로 변경하는 경우 정규식을 제공하는 문서 프로그램이 아니라면 찾아 바꾸기를 여러 번 해야할 수도 있다.

 조금 더 편하게 찾아 바꾸기를 하고자 한다면 블로그 공지나, 글 등과 같은 공간에 아래와 같은 형태의 텍스트 에어리어를 만들고 한번에 제거하는 방법도 시도해 볼 수 있다.

 (상단 텍스트 에어리어에 붙여 넣고 바꾸기 버튼을 클릭하면 data-ke-size가 제거된 결과 값이 나타난다.)



 

텍스트 에어리어 코드

 현재의 페이지를 즐겨찾기 해두고 data-ke-size 제거 용도로 사용해도 좋지만 자신의 블로그에 만들고 싶다면 글을 쓸 때 html 편집 부분에서 아래의 코드를 붙여 넣고 글을 발행하면 된다.

 참고로 inputtext.replace 부분이 data-ke-size을 찾아서 공백으로 변환하여 제거하는 부분으로 다른 부분을 제거하거나 바꾸고 싶다면 해당 부분을 수정하면 자신만의 텍스트 에어리어를 만들 수 있다.

<div>
 <script>
  function replaceText() {
   // 입력된 텍스트 가져오기
   var inputText = document.getElementById("input-text").value;

   // size1 ~ size99 까지의 숫자가 포함된 문자열 찾아서 바꾸기
   var replacedText = inputText.replace(/ data-ke-size="size\d+"/g, "")
                           .replace(/&/g, '&amp;')
                           .replace(/</g, '&lt;')
                           .replace(/>/g, '&gt;')
                           .replace(/"/g, '&quot;')
                           .replace(/'/g, '&#039;');
   // 결과 텍스트 박스에 표시
   document.getElementById("result-text").innerHTML = replacedText;
  }
 </script>

 <style>
  textarea {
   width: 100%;
   box-sizing: border-box;
  }
  button {
   display: block;
   margin: 0 auto;
  }
 </style>

 <textarea id="input-text" cols="50" rows="10"></textarea><br />
 <button onclick="replaceText()">바꾸기</button><br />
 <textarea id="result-text" cols="50" rows="10"></textarea>
</div>

텍스트 에어리어 넣기

 

그 외 내용

 처음에도 언급했지만 data-ke-size를 가장 편하게 제거하고자 한다면 자바스크립트를 사용하는것이 편하다.

 하지만 블로그 스킨에 스크립트 코드가 늘어나는 것이 싫다면 수동으로 data-ke-size를 제거해야 하는데 위 텍스트 에어리어가 조금은 도움이 될 것이다.