実体参照に変換（不細工版）

たぶん動く。

by ethertank

HTML

<section>

<header>
<hgroup>
<h1>実体参照変換ツール</h1>
<h2>&amp;、&lt;、&gt;、&quot;、&copy;、&forall;、&omega;&nbsp;及び半角スペースを実体参照文字に変換します。</h2>
</hgroup>
</header>

<div>
<textarea id="input">&lt;!DOCTYPE html&gt;&lt;html lang=&quot;ja&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;title&gt;まよまよ&lt;/title&gt;
&lt;style&gt;
body { padding:0; color:#906; }
&lt;/style&gt;
&lt;script&gt;
var S = &quot;マヨうまい&quot;; alert(S);
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;header id=&quot;global_header&quot;&gt;
&lt;hgroup&gt;
&lt;h1 id=&quot;site_ID&quot;&gt;まよランド&lt;/h1&gt;
&lt;h2 id=&quot;site_subTitle&quot;&gt;まよ子のページだよ！&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;/header&gt;

&lt;section&gt;
&lt;h1&gt;まよ！&lt;/h1&gt;
&lt;p&gt;まよまよまよまよ。まよ？まよまよ！&lt;/p&gt;
&lt;p&gt;&amp; &amp; &lt; &gt; &quot;(。-&forall;-)(｀・&omega;・´)(´･ &omega; ･｀)&lt;/p&gt;
&lt;/section&gt;

&lt;footer&gt;&lt;p&gt;&lt;small&gt;&copy;2048 マヨ子 All Right Reserved.&lt;/small&gt;&lt;/p&gt;&lt;/footer&gt;

&lt;/body&gt;&lt;/html&gt;</textarea>
</div>

<div>
<button id="button_01">実体参照に変換 →</button>
<button id="button_02">消去</button>
</div>

<div>
<textarea id="output" readonly></textarea>
</div>

</section>

CSS

@charset "utf-8";
html,body{margin:0;padding:0;height:100%;}
html{
  overflow-y:scroll;
  -webkit-background-size: 10px 10px;
     -moz-background-size: 10px 10px;
          background-size: 10px 10px;
  background-color: #577e00;
  background-image: -webkit-gradient(
    radial,
    center top, 0,
    center top, 32,
    from(#00c2bf),
    color-stop(50%, #000),
    to(#000)
  );
  background-image: -moz-radial-gradient(
    center top, circle,
    #00c2bf, #000, #000 32px
  );
  background-image: radial-gradient(
    center top, circle,
    #00c2bf, #000, #000 32px
  );
}

body{color:#fff;background:transparent}

a{color:#fffe00}

section{ display:block; min-width: 300px; max-width: 800px; margin: 0 auto; padding:20px;}

h1,h2{
  margin:0; font-weight:300;
  font-family:KozGoPro-Light, "Hiragino Kaku Gothic Pro", "Trebuchet MS", Verdana, Meiryo,"MSP Gothic", sans-serif;
}

h1{ font-size:2.5em}
h2{ font-size:1.25em}

textarea,button{font-size:12px}
textarea {
  width:100%; height:180px; resize:vertical;
  border: 1px solid #fff;
  padding:3px;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.5) inset;
     -moz-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.5) inset;
          box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.5) inset;
}

button {vertical-align:top}

JavaScript

(function() {
    document.createElement("section");

    function addEvent(e, n, o, u) {
        (e.addEventListener) ? e.addEventListener(n, o, u) : (e.attachEvent) ? e.attachEvent('on' + n, o) : "";
    }

    function id(id) {
        var ID = document.getElementById(id);
        return ID;
    }

    addEvent(window, "load", init, false);

    function init() {

        var input = id("input"),
            output = id("output"),
            button_01 = id("button_01"),
            button_02 = id("button_02");

        addEvent(button_01, "click", replaceButtonClick, false);
        addEvent(button_02, "click", clearButtonClick, false);

        function clearButtonClick() {
            input.value = "";
            output.value = "";
        }

        function replaceButtonClick() {
            var INPUT = input.value;
            E = INPUT;
            E = E.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
            E = E.replace(/ /g, "&nbsp;").replace(/©/g, "&copy;").replace(/∀/g, "&forall;").replace(/ω/g, "&omega;");
            output.value = E;
        }

    }

})();