HTMLタグエスケープ

ツール

• HTML
• JavaScript

本体

↓

概要

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

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

コード

HTML

<textarea id="input" rows="5" placeholder="入力欄"></textarea>
<p class="text-center">↓</p>
<textarea id="output" rows="5" placeholder="出力欄" readonly="readonly"></textarea>
<div class="text-center">
  <button id="bt-submit" class="bt-common">変換</button>
  <button id="bt-copy" class="bt-common">出力結果をコピー</button>
</div>

JavaScript

const el_input = document.getElementById("input");
const el_output = document.getElementById("output");
const bt_submit = document.getElementById('bt-submit');
const bt_copy = document.getElementById('bt-copy');

el_input.addEventListener('input',escHtml);
bt_submit.addEventListener('click',escHtml);
bt_copy.addEventListener('click',copyText);

function escHtml(){
  const str_output = el_input.value
    .replace(/&/g,'&')
    .replace(/</g,'&lt;')
    .replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;');
  el_output.value = str_output;
}

function copyText(){
  navigator.clipboard.writeText(el_output.value);
}