javascript < > 를 &lt; &gt;로 변환

blog-convert.zip

0.00MB

 

html tag중에 <와 >를 각각 &lt;와 &gt;로 변환 해준다.

 

JS

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

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

copyBtn.addEventListener('click', function() {
	codeWrap.select();
	document.execCommand("copy");
	codeWrap.blur();
	alert("Copy !"); 
});

7,8번째줄에 lt와 gt앞에 &를 추가해주어야한다.

 

HTML

<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>
            <button class="btn btn-primary" id="copyBtn">Copy</button>
         </div>            
      </div>
   </div>
</section>

 

CSS

@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;
}