Mmemo

PC作業に関するメモ

HTMLタグエスケープ

実装

概要

HTML中で「<」などの文字を使うと、タグとして認識されて文字列として表示することが出来なくなる。

それを防ぐためにエスケープ処理を行うためのツール。
※例えば「<」は「&lt;」に置き換えると文字列として表示される。
このツールでは「&」「<」「>」に対応。

コード

HTML

<textarea id="input" placeholder="入力欄"></textarea>
<p class="txt_cen">↓</p>
<textarea id="output" placeholder="出力欄"></textarea>
<div class="txt_cen">
  <button onclick="htmlesc();">変換</button>
  <button id="bt_copy" data-clipboard-target="#output">出力結果をコピー</button>
</div> 
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

JavaScript

function htmlesc(){
  var inputOb = document.getElementById("input");
  var outputOb = document.getElementById("output");
  var output = inputOb.value
  .replace(/&/g,'&amp;')
  .replace(/</g,'&lt;')
  .replace(/>/g,'&gt;');
  outputOb.value = output;
}