2009年05月09日

HTMLメタ文字→エスケープ文字変換javascript


javascriptネタを書こうと思って、HTMLソースをコピペしたら、メタ文字(&,",',<,>)が
ちゃんと表示されなかった(HTML構文と認識される)。 

メタ文字をエスケープ文字に変換しないといけないのね。HTMLのメタ文字とエスケープ文字の対応表は下記の通り。
メタ文字,エスケープ文字対応表
メタ文字エスケープ文字
&&amp
<&lt
>&gt
"&quot
'&#039

◆メタ文字→エスケープ文字変換

改行を&lt;br&gt;に変換する


◆メタ文字→エスケープ文字変換のソース

<script type="text/javascript" src="autogrow/jquery.autogrow-textarea.js"></script>
<link rel="stylesheet" href="autogrow/main.css" type="text/css" />

<script type="text/javascript">
function meta_to_escape(str,flg) {
str = str.replace(/&/g,"&amp;");
str = str.replace(/"/g,"&quot;");
str = str.replace(/'/g,"&#039;");
str = str.replace(/</g,"&lt;");
str = str.replace(/>/g,"&gt;");
if(flg == true)
{
str = str.replace(/\n/g,"<br>");
}
return str;
}

bflg = false;
function change(flg){
if(bflg==false)
{
if($("#chk1").attr("checked")==true)
{//改行も<br>に変換
$("#src").val(meta_to_escape($("#src").val(),true));
}else{
$("#src").val(meta_to_escape($("#src").val(),false));
}
$("#btn1").attr("value","HTMLを入力");
bflg = true;
}else{
$("#src").val("");
$("#btn1").attr("value","メタ文字変換");
bflg = false;
}
}
$(function() {
$('textarea').autogrow();
});
</script>
<div>
  <input type="button" id="btn1" value="メタ文字変換" onclick="change()">
  <input type="checkbox" id="chk1" >改行を&amp;lt;br&amp;gt;に変換する
</div>
  <textarea id="src" rows='20' cols='80' style='line-height:1; font-size: 120%;'></textarea><BR/>

ボタンをクリックされたら、change()という関数を呼ぶ

  <input type="button" id="btn1" value="メタ文字変換" onclick="change()">

テキストエリアに入力されている文字列を「メタ文字→エスケープ文字」変換(エスケープ処理)してくれる関数渡して、変換された文字列をテキストエリアに反映

function change(flg){
if(bflg==false)
{ if($("#chk1").attr("checked")==true)
{//改行も<br>に変換
$("#src").val(meta_to_escape($("#src").val(),true));
}else{
$("#src").val(meta_to_escape($("#src").val(),false));
}
$("#btn1").attr("value","HTMLを入力");
bflg = true;
}else{
$("#src").val("");
$("#btn1").attr("value","メタ文字変換");
bflg = false;
}
}

エスケープ処理の本体

function meta_to_escape(str,flg) {
str = str.replace(/&/g,"&amp;");
str = str.replace(/"/g,"&quot;");
str = str.replace(/'/g,"&#039;");
str = str.replace(/</g,"&lt;");
str = str.replace(/>/g,"&gt;");
if(flg == true)
{
str = str.replace(/\n/g,"<br>");
}
return str;
}

ですです。


ラベル:jquery
posted by purigen at 16:03| Comment(1) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
動作確認してたのですが、動作確認後に少し弄って動かなくしてしまっていたようです・・・(アホ。 とりあえず直しました。
Posted by purigen at 2009年05月12日 02:39
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。