システム開発ブログ

流通システム部

その他

JavaScriptの文字列自動エンコード

JavaScriptでの文字の扱いというのは非常に難しいもので、
複数の種類のブラウザに対応させようとしたとたん、
いきなり思ってもみなかったところでハマったりする。

最近 Webサービスもどき Ajaxもどきからデータを取得して加工しようとして
JavaScriptで行なわれる文字列の自動エンコードでハマった。

その例を物凄く簡略化すると、以下のようになる。

<html>
<head>
</head>
<body>
<div id="uke">
 img src="hoge"<br/>
 img src="<%= hoge2 %>"<br/>
 img src='<%= "hoge3" %>'<br/>
 <img src="hoge4"><br/>
 <img src="<%= hoge5 %>"><br/>
 <img src='<%= "hoge6" %>'><br/>
</div>
<script language="javascript">
 alert(document.getElementById("uke").innerHTML)
</script>
</body>
</html>

これを、いろいろなブラウザで実行してみると・・・。

IE8
ie8.png

Firefox3.6
firefox3_6.png

Chrome4.0
chrome4_0.png

Safari3.2
safari3_2.png

Opera10.10
opera10_10.png

おまけ IE6
ie6.png

(OSは IE8のみ Windows7、その他は WindowsXPです)

JavaScriptの実装が個々のブラウザによって違うため、
『>』がそのまま来てみたり %3Eになったり &gt; になったり、
『<』は変換されるが『>』は変換されなかったり。
『<』~『>』で囲まれている間だけ違う変換がされたり。
・・・もう、いろいろ。
お気をつけあそばせ。

こういうのを乗り越えてこそ、Webアプリケーション開発です。

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ