replace

블로그 포스팅을 하다보면 pre태그를 사용하기 위해서 <> 태그들을 각각 &lt; &gt;로 replace 시켜줘야하는데

textarea과 버튼을 이용해서 간단하게 만들어보았다.

<section>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <h1 class="text-center">Insert Code</h1>
        <div class="form-group">
          <textarea class="form-control" id="code" rows="20"></textarea>
        </div>
        <button class="btn btn-primary" id="convertBtn">CONVERT</button>
      </div>
      <div class="col-xs-12 col-sm-6">
         <h1 class="text-center">Copy Code</h1>
         <div class="form-group">
           <textarea class="form-control" id="convertCode" rows="20"></textarea>
         </div>
      </div>            
    </div>
  </div>
</section>

HTML

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@200,400&display=swap");

* {
 box-sizing: border-box;
}

body {
 font-family: "Poppins", sans-serif;
 margin: 0;
 background-color: #f16529;
 background-image: linear-gradient(142deg, #f1a829, #f18629 31%, #f16529 65%, #f14429);	
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

h1 {
 margin: 0 0 30px;
 color: #fff;
}

pre {
 height: 414px!important;
}

CSS

const convertBtn = document.querySelector("#convertBtn");
const convertWrap = document.querySelector("#code");
const codeWrap = document.querySelector('#convertCode');

convertBtn.addEventListener('click', function() {
   var convertContent = convertWrap.value;
   convertContent = convertContent.replaceAll('<', '<');
   convertContent = convertContent.replaceAll('>', '>');
   codeWrap.value = convertContent;
});

javascript

 

한번 만들어두면 생각보다 쓸만한거같다.

 

 

초기화는 새로고침을 하면되지만 다음에는 버튼도 만들어도 좋을거같다.