• ベストアンサー

こんな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のレベルは、ほぼゼロです。 でも自分でいろいろ調べようと思っていますので そのヒントを頂ければ嬉しいです。 どうぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.6

> 改行コードが無くなっているということですか？ Firefoxでは余計な<br>が先頭についています。 なお、これはIEでは発生しませんでした。（検証不足でした。） >>この問題の原因とは異なりますが 勘違いしてましたが、まさにこれ(DOMツリーにおける空白文字)が原因で余計な<br>が付くようです。 > より良い方法をご教授して下さるとありがたいです。 地道にnodeValue中の\nを削除する。 \nだけのテキストノードは除外する。 と、なるでしょうか？もっといい方法があるのかもしれないけれど思いつきませんでした。 Javascriptに手をいれない方法として最後の <br> </div> を <br></div> と改行しないようにするのが最も楽そうだけど。 話が飛躍してしまって質問者さんには失礼しています。

その他の回答 (6)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.7

#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については、残念ですが持ってませんので、動作確認ができません。申し訳ありません。<(_ _)>

non_milky
質問者

お礼

詳しい解説をいただき、ありがとうございます。 これで、いろいろいじってみたいと思います。 BLUEPIXY様、steel_gray様、お二方にとても感謝しています。 どうもありがとうございました！

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

#4>結果が期待したものと違っている事がわかります。 ご指摘ありがとうございます。 できたら、もっとはっきりと言って貰ったほうが嬉しいです。 改行コードが無くなっているということですか？ >data[i/2]=old_el.childNodes[i].nodeValue; が危うい感じなのは、一応理解しているつもりです。 できたら、より良い方法をご教授して下さるとありがたいです。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

まず、質問者さんへの回答ではないことをお詫びします。 #3の回答でも少々問題があります。 onloadの最後にでも alert(new_el.innerHTML) を入れてみれば結果が期待したものと違っている事がわかります。 また、この問題の原因とは異なりますが data[i/2]=old_el.childNodes[i].nodeValue; このあたりが結構危うい感じなので参考URLを一読しておくことをお勧めします。

参考URL：
http://moz.skillup.jp/docs/dom/technote/whitespace/
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

＞ペーストしてみたのですが、どうもうまくいかないみたい…。 ブラウザとかは何をお使いですか？ サンプルは、一応ＩＥ６とＦｉｒｅＦｏｘ１．０では動作確認しています。 サンプルが動かないという意味でしょうか？ ネスケでは、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>

non_milky
質問者

補足

取り急ぎ、ご質問へのお返事だけさせて頂きます。 申し訳ないです、ブラウザの問題のようだったようです。 こちらでは、頂いたソースをそのままペーストして、 opera7にて確認していました。 また新しいソースも試させて頂きます。 BLUEPIXY様、steel_gray様、 お二方にご回答を頂けて大変感謝しております。 ありがとうございます。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

かなり手抜きのサンプルです。 この例の場合、各行に順番となる数値がありますから、その数値を番号とする配列に切り出しで、数値の順番に取り出しています。 --------------------------------------------------------------- <!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>

non_milky
質問者

お礼

ご回答、どうもありがとうございます。 ペーストしてみたのですが、どうもうまくいかないみたい…。 「かなり手抜きのサンプル」とのことなので これをヒントに作ってみなさい！と教えて下さったのですよね。 いま、試行錯誤しています＾＾； わざわざ、プログラムを書いて下さって、 どうもありがとうございました！

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

テーブルの内容をソートするサンプルならそこそこあると思うので「javascript テーブル ソート」で検索してみるとみつかります。 また、内容の書き換え（1.～6.を消す）については ・内容を取得する。 ・それを書き換える。 の二つの処理が必要になりますが、前者についてはソートする過程で内容を「見て」いるわけですから検索して探したソートのjavascriptを読み解いてみてください。 書き換えについてはいくつか方法はありますが文字列置換を使うといいかと思います。 「Javascript replace」で検索してみてください。 いろいろ調べたいとの事で直接的な回答は避けましたががんばってください。 時間があれば参考URLとそのリンク先も見てみて下さい。

参考URL：
http://www.shoshinsha.com/pukiwiki/pukiwiki.php?JavaScript%A4%F2%CA%D9%B6%AF%A4%B7%A4%BF%A4%A4
non_milky
質問者

お礼

ご回答ありがとうございます＾＾ 実は、検索やらしてみたのですが、 正直、ちんぷんかんぷんです…TT でも、参考URLなど頂いたので、いろいろ見てみたいと思います。 どうもありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する