こんなJavaScriptありますか？

HTML文書にテキストで
--------------------------------------
3.文字C
4.文字D
2.文字B
6.文字F
1.文字A
5.文字E
--------------------------------------
とあったとします。これを↓の状態にしたいです。
--------------------------------------
文字A
文字B
文字C
文字D
文字E
文字F
--------------------------------------
（1.～6.の順にソートし、1.～6.を消す）

ソートするJavaScript、1.～6.を消すJavaScript、
どちらかでも構いません。
また、参考になりそうな情報だったら、
なんでも結構です。どなたかアドバイス頂けませんか？

ちなみに私自身のJavaScriptのレベルは、ほぼゼロです。
でも自分でいろいろ調べようと思っていますので
そのヒントを頂ければ嬉しいです。

どうぞよろしくお願いします。

No.6 ベストアンサー 回答者： steel_gray 回答日時： 2005/08/08 21:52

> 改行コードが無くなっているということですか？

Firefoxでは余計な<br>が先頭についています。
なお、これはIEでは発生しませんでした。（検証不足でした。）

>>この問題の原因とは異なりますが
勘違いしてましたが、まさにこれ(DOMツリーにおける空白文字)が原因で余計な<br>が付くようです。

> より良い方法をご教授して下さるとありがたいです。
地道にnodeValue中の\nを削除する。
\nだけのテキストノードは除外する。
と、なるでしょうか？もっといい方法があるのかもしれないけれど思いつきませんでした。

Javascriptに手をいれない方法として最後の
<br>
</div>
を
<br></div>
と改行しないようにするのが最も楽そうだけど。

話が飛躍してしまって質問者さんには失礼しています。

No.7 回答者： BLUEPIXY 回答日時： 2005/08/09 01:32

#6>Firefoxでは余計な<br>が先頭についています。

>(DOMツリーにおける空白文字)が原因で余計な<br>が付くようです。
確認しました。
対処の方法としては、やはり、
<br></div>
にするのが良さそう（というか楽）ですね。
ご教示ありがとうございました。
steel grayさんの回答はいつも参考になります。
勉強になりました、本当に感謝しております。

質問者さんのために、この件の簡単な解説をすると
<div id="data">
3.文字C<br>
4.文字D<br>
2.文字B<br>
6.文字F<br>
1.文字A<br>
5.文字E<br>
</div>
の部分が、FireFoxでは、プログラム的に
<div id="data">
childNodes[0],childNodes[1]
childNodes[2],childNodes[3]
childNodes[4],childNodes[5]
childNodes[6],childNodes[7]
childNodes[8],childNodes[9]
childNodes[10],childNodes[11]
childNodes[12]
</div>
childNodes[12]は"\n"
になっているということです。
つまり、FireFoxでは、childNodes[12]が（ＩＥと比べて）余計に有って改行のみの（想定外の）データが１つ増えるので改行されてしまう。
"\n"<BR>の行が一行はいるということです。
ＩＥでは、childNodes[12]はありません。
※偶数番目がデータの文字列で、記数番目が"<BR>"
ＩＥでは"\n"は無視されるようですが、
FireFoxでは、
例えば、
childNodes[2]が"\n２番目の文字列"
になるようです。
どちらかというと、FireFoxの方が動作として正しいと思います。
対処としては、＃６で言われるような感じになると思います。
*
あと、operaについては、残念ですが持ってませんので、動作確認ができません。申し訳ありません。<(_ _)>

この回答へのお礼

詳しい解説をいただき、ありがとうございます。

これで、いろいろいじってみたいと思います。
BLUEPIXY様、steel_gray様、お二方にとても感謝しています。

どうもありがとうございました！

お礼日時：2005/08/12 00:09

No.5 回答者： BLUEPIXY 回答日時： 2005/08/08 18:50

#4>結果が期待したものと違っている事がわかります。

ご指摘ありがとうございます。
できたら、もっとはっきりと言って貰ったほうが嬉しいです。
改行コードが無くなっているということですか？

>data[i/2]=old_el.childNodes[i].nodeValue;
が危うい感じなのは、一応理解しているつもりです。
できたら、より良い方法をご教授して下さるとありがたいです。

No.4 回答者： steel_gray 回答日時： 2005/08/08 17:42

まず、質問者さんへの回答ではないことをお詫びします。

#3の回答でも少々問題があります。
onloadの最後にでも
alert(new_el.innerHTML)
を入れてみれば結果が期待したものと違っている事がわかります。

また、この問題の原因とは異なりますが
data[i/2]=old_el.childNodes[i].nodeValue;
このあたりが結構危うい感じなので参考URLを一読しておくことをお勧めします。

参考URL：http://moz.skillup.jp/docs/dom/technote/whitespa …

No.3 回答者： BLUEPIXY 回答日時： 2005/08/08 11:04

＞ペーストしてみたのですが、どうもうまくいかないみたい…。

ブラウザとかは何をお使いですか？
サンプルは、一応ＩＥ６とＦｉｒｅＦｏｘ１．０では動作確認しています。
サンプルが動かないという意味でしょうか？
ネスケでは、innerHTMLが働かないので、動作しないと思います。
自分のページに適用してみたがうまく行かないという場合は、補足でソースを挙げて下さい。

＞かなり手抜きのサンプル
１から始まり、数字の抜けがないとか
数字の後に必ず"."があるとか
そういうことを前提としているので、そういうことをなるべく前提を少なくした汎用的なものを作るべきだけれども、そうしていないので「手抜き」をしていると言っております。
-------------------------------------------------------------------
ということで、innerHTMLに依存しないように、
ＤＯＭを使ってデータの部分にアクセスするように修正してみました。
今回は、Array.sort()を使っています。
ここでも、
テキスト<br>のような形になっていること。
初めの「.」の後ろが切り出すデータであることを前提としています。
行全体をソートの対象としているので、
数字で始まっているかどうかとか数字に抜けがあるかどうかは関係ありません。
ソート後のループは、１つにできますが、あえて処理を分けてあります。
-------------------------------------------------------------------
<script type="text/javascript">
<!--
window.onload=function (){
var old_el = document.getElementById("data");
var data = new Array();
for(var i=0;i< old_el.childNodes.length;i+=2){
data[i/2]=old_el.childNodes[i].nodeValue;
}
data.sort();
for(var i=0;i<data.length;i++){
data[i]=data[i].substr(data[i].indexOf(".")+1);
}
var new_el = document.createElement(old_el.nodeName);
for(var i=0;i<data.length;i++){
new_el.appendChild(document.createTextNode(data[i]));
br_el = document.createElement("BR");
new_el.appendChild(br_el);
}
old_el.parentNode.replaceChild(new_el, old_el);
}
//-->
</script>

この回答への補足

取り急ぎ、ご質問へのお返事だけさせて頂きます。

申し訳ないです、ブラウザの問題のようだったようです。
こちらでは、頂いたソースをそのままペーストして、
opera7にて確認していました。

また新しいソースも試させて頂きます。

BLUEPIXY様、steel_gray様、
お二方にご回答を頂けて大変感謝しております。
ありがとうございます。

補足日時：2005/08/08 23:14

No.2 回答者： BLUEPIXY 回答日時： 2005/08/06 19:21

かなり手抜きのサンプルです。

この例の場合、各行に順番となる数値がありますから、その数値を番号とする配列に切り出しで、数値の順番に取り出しています。
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>並び替え？</title>
<script type="text/javascript">
<!--
window.onload=function (){
var data = (document.getElementById("data").innerHTML).split(/<br>/i);
var lines = Array();
for(var i=0;i<data.length;i++){
lines[parseInt(data[i])]=data[i].substr(data[i].indexOf(".")+1);
}
var outStr="";
for(var i=1;i<lines.length;i++){
outStr+=lines[i]+"<br>";
}
document.getElementById("data").innerHTML=outStr;
}
//-->
</script>
</head>
<body>
<div id="data">
3.文字C<br>
4.文字D<br>
2.文字B<br>
6.文字F<br>
1.文字A<br>
5.文字E<br>
</div>
</body>
</html>

この回答へのお礼

ご回答、どうもありがとうございます。

ペーストしてみたのですが、どうもうまくいかないみたい…。

「かなり手抜きのサンプル」とのことなので
これをヒントに作ってみなさい！と教えて下さったのですよね。
いま、試行錯誤しています＾＾；

わざわざ、プログラムを書いて下さって、
どうもありがとうございました！

お礼日時：2005/08/08 02:17

No.1 回答者： steel_gray 回答日時： 2005/08/06 18:03

テーブルの内容をソートするサンプルならそこそこあると思うので「javascript テーブル ソート」で検索してみるとみつかります。

また、内容の書き換え（1.～6.を消す）については
・内容を取得する。
・それを書き換える。
の二つの処理が必要になりますが、前者についてはソートする過程で内容を「見て」いるわけですから検索して探したソートのjavascriptを読み解いてみてください。
書き換えについてはいくつか方法はありますが文字列置換を使うといいかと思います。
「Javascript replace」で検索してみてください。

いろいろ調べたいとの事で直接的な回答は避けましたががんばってください。
時間があれば参考URLとそのリンク先も見てみて下さい。

参考URL：http://www.shoshinsha.com/pukiwiki/pukiwiki.php? …

この回答へのお礼

ご回答ありがとうございます＾＾

実は、検索やらしてみたのですが、
正直、ちんぷんかんぷんです…TT

でも、参考URLなど頂いたので、いろいろ見てみたいと思います。

どうもありがとうございました！

お礼日時：2005/08/08 02:15