HTML特殊文字変換

HTML 特殊文字を変換するツールのサンプルです。

"&", "<", ">" ,'"', "'" の文字を JavaScript の正規表現を使って "&amp;", "&lt;", "&gt;", "&quot;", "&#39;" に変換します。

実際のコードも掲載しています。

作成日:2019年05月10日

変換ツール

HTML ソースを入力

変換結果


      

変換ツールのコード

以下は上記ツールの HTML と CSS です(ボタンのスタイルは Bootstrap を使用しています)。

<div id="entity_convertor">
  <h3>変換ツール</h3>
  <p>HTML ソースを入力</p>
  <div>
    <textarea id="input" rows="20" cols="60"></textarea>
  </div>
  <button id="convert" class="btn btn-primary">変換</button>
  <button id="clear_all" class="btn btn-danger">全てクリア</button>
  <button id="clear_html" class="btn btn-warning">HTML をクリア</button>
  <button id="clear_escape" class="btn btn-warning">出力をクリア</button>
  <button id="restore" class="btn btn-success">リストア</button>
  <div>
    <pre id="escapeHTML"></pre>
  </div>
</div>
textarea {
  width: 95%;
  margin: 10px auto;
}
#escapeHTML {
  width: 95%;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #efefef;
  font-family: "Lucida Console", Monaco, monospace;
  white-space: pre-wrap;
  overflow: auto;
  margin: 30px 0;
}

以下は上記ツールの JavaScript(jQuery)の記述です。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
jQuery(function($){	

  var restore_input = '';
  var restore_escape = '';
 
  $('#convert').click(function() {
    restore_input = $('#input').val();
    var converted = $('#input').val().replace(/&/g,"&amp;")
    .replace(/"/g,"&quot;")
    .replace(/'/g,"&#39;")
    .replace(/</g,"&lt;")
    .replace(/>/g,"&gt;");
    restore_escape = 	converted;
    $('#escapeHTML').text(converted);
  });	
 
  $('#clear_html').click(function() {
    $('#input').val('');	
  });	
 
  $('#clear_escape').click(function() {
    $('#escapeHTML').text('');
  });	
 
  $('#clear_all').click(function() {
    $('#input').val('');	
    $('#escapeHTML').text('');
  });		
 
  $('#restore').click(function() {
    $('#input').val(restore_input);	
    $('#escapeHTML').text(restore_escape);
  });
  
});
</script>

以下は jQuery を使わない場合の例です。

<script>
  const convertBtn = document.getElementById('convert');
  const clearAllBtn = document.getElementById('clear_all');
  const clearHtmlBtn = document.getElementById('clear_html');
  const clearEscapeBtn = document.getElementById('clear_escape');
  const restoreBtn = document.getElementById('restore');
  const input =  document.getElementById('input');
  const escapeHTML =  document.getElementById('escapeHTML'); 
  let inputValue = '';
  let escapeHTMLValue = '';
 
  convertBtn.addEventListener('click', () => {
    inputValue = input.value;
    escapeHTMLValue = inputValue.replace(/&/g,"&amp;")
    .replace(/"/g,"&quot;")
    .replace(/'/g,"&#39;")
    .replace(/</g,"&lt;")
    .replace(/>/g,"&gt;");
    escapeHTML.textContent = escapeHTMLValue;
  });
  
  clearAllBtn.addEventListener('click', () => {
    escapeHTML.textContent = '';
    input.value = '';
  });
  
  clearHtmlBtn.addEventListener('click', () => {
    input.value = '';
  });
  
  clearEscapeBtn.addEventListener('click', () => {
    escapeHTML.textContent = '';
  });
  
  restoreBtn.addEventListener('click', () => {
    escapeHTML.textContent = escapeHTMLValue;
    input.value = inputValue;
  });
</script> 

関連ページ: