PHPベースのＷＥＢで、データベースに情報を記録して、そのデータを表示する。
まぁ、ごく一般的なものですが、ここにユーザが自分でHTMLを入れて、出力する際に差込するようにしようとする場合、問題になるのが、タグの閉じ忘れなどのHTML規則違反。
特にCSSでデザインしている場合、divタグなどの閉じ忘れは致命的なデザインの崩壊を招く恐れがあったりする。
通常、データの登録時にこれらのデータをチェックして、必要なら補完・削除をしてやらないといけないんだけど、どうにも面倒。簡単にしようにも、モジュールインストールしないといけなかったり、もしくはXMLベース？ただ、クラス化が面倒だったり（だったらどこぞのフレームワークっぽいのを使えばいいんだろうけど）、エラーがあるとそこで処理が終わってしまったり・・・
といったことで、とにかく面倒（そればっか。）
で、思いついたというか、なんというか。
IEやFFで、JavaScript(JScript)のinnerHTMLを通すと、タグって勝手に補完されてしまう。ならば、送信前に一度innerHTMLを通して無理やり補完してやるってのも手ではないかな？
ということで、試してみた。
エラー処理若干抜いてますが。
IEだと、タグ名が大文字に（ついでに、BRタグも、<br />とはなってくれず、<BR>となってしまう）
また、属性値でスペースなどが含まれない場合、引用符が消されてしまう。
FFだと、タグ名は小文字になるものの、<br>となる。
属性値の引用符は必ず付加されるようだが、スタイルシート（style属性）色の指定をする際、#FF0000といった形ではなく、rgb(255,0,0)といった形になってしまう。
といった問題が。
まぁ、差込したときに不具合が出るってわけではないんだけど・・・
まぁ、ごく一般的なものですが、ここにユーザが自分でHTMLを入れて、出力する際に差込するようにしようとする場合、問題になるのが、タグの閉じ忘れなどのHTML規則違反。
特にCSSでデザインしている場合、divタグなどの閉じ忘れは致命的なデザインの崩壊を招く恐れがあったりする。
通常、データの登録時にこれらのデータをチェックして、必要なら補完・削除をしてやらないといけないんだけど、どうにも面倒。簡単にしようにも、モジュールインストールしないといけなかったり、もしくはXMLベース？ただ、クラス化が面倒だったり（だったらどこぞのフレームワークっぽいのを使えばいいんだろうけど）、エラーがあるとそこで処理が終わってしまったり・・・
といったことで、とにかく面倒（そればっか。）
で、思いついたというか、なんというか。
IEやFFで、JavaScript(JScript)のinnerHTMLを通すと、タグって勝手に補完されてしまう。ならば、送信前に一度innerHTMLを通して無理やり補完してやるってのも手ではないかな？
ということで、試してみた。
<html>
<head>
<script>
function a()
{
var obj0 = document.getElementById("form");
var obj1 = document.getElementById("from");
var obj2 = document.getElementById("to");
var str = obj0.value;
str = str.replace(/\n/ig,"<br />");
$(obj1).innerHTML = str;
$(obj2).setText(obj1.innerHTML);
}
function $(ID)
{
var obj = typeof(ID)=='object' ? ID : document.getElementById(ID);
obj.setText = function(str)
{
if(navigator.userAgent.indexOf("Firefox") > -1)
{
obj.textContent = str;
}
else
{
obj.innerText = str;
}
}
return obj;
}
</script>
<style>
#form {height:10em;}
#form,#from,#to {width:600px;border:solid 1px #666;padding:5px;margin:5px;}
</style>
</head>
<body onload='a()'>
<textarea onkeyup='a()' id='form'></textarea>
<div id='from'></div>
<div id='to'></div>
</body>
</html>
<head>
<script>
function a()
{
var obj0 = document.getElementById("form");
var obj1 = document.getElementById("from");
var obj2 = document.getElementById("to");
var str = obj0.value;
str = str.replace(/\n/ig,"<br />");
$(obj1).innerHTML = str;
$(obj2).setText(obj1.innerHTML);
}
function $(ID)
{
var obj = typeof(ID)=='object' ? ID : document.getElementById(ID);
obj.setText = function(str)
{
if(navigator.userAgent.indexOf("Firefox") > -1)
{
obj.textContent = str;
}
else
{
obj.innerText = str;
}
}
return obj;
}
</script>
<style>
#form {height:10em;}
#form,#from,#to {width:600px;border:solid 1px #666;padding:5px;margin:5px;}
</style>
</head>
<body onload='a()'>
<textarea onkeyup='a()' id='form'></textarea>
<div id='from'></div>
<div id='to'></div>
</body>
</html>
エラー処理若干抜いてますが。
IEだと、タグ名が大文字に（ついでに、BRタグも、<br />とはなってくれず、<BR>となってしまう）
また、属性値でスペースなどが含まれない場合、引用符が消されてしまう。
FFだと、タグ名は小文字になるものの、<br>となる。
属性値の引用符は必ず付加されるようだが、スタイルシート（style属性）色の指定をする際、#FF0000といった形ではなく、rgb(255,0,0)といった形になってしまう。
といった問題が。
まぁ、差込したときに不具合が出るってわけではないんだけど・・・
ここで、相対パスで指定すると、FFだとそのままだけどIEだとファイルのカレントパスを勝手に補完してしまう模様。
オブジェクトにだけ、BASE HREFが指定できるとかあるといいんだけどなぁ・・・
は
str = str.replace(/¥n/ig,"<br />");
再編集するとき、＜＞が変換されてしまって面倒だ・・・