Ajaxサンプル:HTMLエスケープ [prototype.js]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet

HOME > 基本サンプル集, prototype.js > Ajaxサンプル:HTMLエスケープ [prototype.js]

Ajaxサンプル:HTMLエスケープ [prototype.js]

prototype.jsのescapeHTML()を使ったサンプルを紹介します。

実行サンプル

Ajaxサンプル:HTMLタグエスケープ

Ajaxサンプル解説

フォームに入力されたデータ（d1)を、prototype.jsの$F関数で取得し、
得られたテキストの値に対して、escapeHTML()メソッドを適用して
HTMLの特殊記号をエスケープします。

このとき変換された特殊記号には、&の文字が入っているので、さらに、
gsub()メソッドを適用して、&を&に置換します。

最後に、得られたテキストを$()関数で指定された場所(d2)に
innerHTMLを使って書き出します（JavaScript左辺)。

JavaScript

function changeData() {
    $('d2').innerHTML = $F('d1').escapeHTML().gsub('&','&amp;');
}

HTML

<form>
変換したいHTML混在文を入力してください：<br />
<textarea id="d1" cols="60" rows="5"></textarea>
<br /><br />

<input id="btn" type="button" value="変換" onclick="changeData()"/>
<br /><br />

変換後の値：<br />
<textarea id="d2" cols="60" rows="5"></textarea>
</form>

参考：escapeHTML()

ブックマーク登録：