HTML特殊文字変換

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

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

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

作成日:2019年05月10日

変換ツール

HTML ソースを入力

出力結果:


      

変換ツールのコード

以下は上記ツールの HTML です。

<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>

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

<script>
jQuery(function($){	
	
    var targets = ["&", "<", ">" ,'"', "'"];
    var escapes = ["&amp;", "&lt;", "&gt;", "&quot;", "&#39;"];
    
    var restore_input = '';
    var restore_escape = '';

    $('#convert').click(function() {
        var converted = $('#input').val();
        restore_input = converted;
        for(var i=0; i<targets.length; i++){ 		 
            converted = converted.replace(new RegExp(targets[i], 'g'), escapes[i]);
        }	
        restore_escape = converted;
        $('#escapeHTML').text(converted).css('display', 'block');
    });	
    
    $('#clear_html').click(function() {
        $('#input').val('');	
    });	
    
    $('#clear_escape').click(function() {
        $('#escapeHTML').text('').css('display', 'none');
    });	
		
    $('#clear_all').click(function() {
        $('#input').val('');	
        $('#escapeHTML').text('').css('display', 'none');
    });		
    
    $('#restore').click(function() {
        $('#input').val(restore_input);	
        $('#escapeHTML').text(restore_escape).css('display', 'block');
    });	
});
</script>

関連ページ:JavaScript の正規表現/RegExp オブジェクト