2017年03月 / 01月≪ 12345678910111213141516171819202122232425262728293031≫02月

インフォメーション

FC2ブログで画像等を一括アップロードするソフトを地味に配布してます。
FC2ブログ用ファイルアップロードの最新版はこちら
(ベクター)FC2ブログ用ファイルアップロード

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 |  --:--  |  スポンサー広告  |  Top↑

2008.02.21 (Thu)

innerHTMLの罠

pre内の改行がなくなる問題について、どのタイミングでなくなるのかを調べてみました。

結果、エレメント.innerHTMLに値を入れたときに改行が半角スペースに変換され、
連続半角スペースが1つになります。
行頭の半角スペースは消えてなくなります。

[html]
pre1
<pre id="pre1">
for( int i = 0; i < 100; i++)
{
  if(i = 0) continue;
  n = n + i;
}
</pre>
<script language="JavaScript">
<!--
alert(document.getElementById("pre1").innerHTML);
-->
</script>

↓実行すると
up000000.jpg

まだちゃんと改行・半角スペースが入っています。

ところが、下記のようにinnerHTMLにそのままinnerHTMLを入れると

var pre1 = document.getElementById("pre1");
pre1.innerHTML = pre1.innerHTML;


up000001.jpg


改行が消える・・・

ほんとに改行があったのか、そしてなくなったのか確かめるため

alert(escape(document.getElementById("pre1").innerHTML));

で見てみると

innerHTMLに値を入れる前
up000002.jpg

innerHTMLに値を入れた後
up000003.jpg


改行コードが半角スペースに変換され、行頭半角スペースが無くなり
結果スペース1つになってしまいます。

innerHTMLを使用せずにhtmlソースを変更できれば何とかなりそうかな?


そしてこれによりわかったことは、
ソースを色分けしてくれる便利なJavaScript
「google-code-prettify」
これも色分けしたコードを出力する際innerHTMLを使っているので、
google-code-prettifyを使用して色分けしたコードは
表示では改行されていても、そのコードをコピペすると改行がなくなります。

google-code-prettifyで色分けされてるコードを
いろんなサイトから拾いコピペしてみたら、皆改行がなくなっていました。

createTextNodeを使用すると改行コードを入れられるみたいですが、まだ模索中です。
もうちょっと解決方法を探してみます。
もうしばらくpreもgoogle-code-prettifyもおあずけか・・・。
スポンサーサイト


 |  16:14  |  プログラム全般  |  トラックバック(0)  |  コメント(0)  |  Top↑
 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。