- 締切済み
Javascriptで動的に変更した点を保存して、ページを更新したときに また再現したいです
初心者です。よろしくお願いします。 マウスで文字列を選択して、反転した部分の文字をスタイルで大きくする… という簡単な Javascript を作りました。 このページを更新・リロードすれば、当然変更された部分も元に戻ってしまいますが、 この変更部分を PHP に送ってファイルに保存し、今度呼び出されたとき変更した部分を再現したいと思っています。 ただその文字列の位置などをどうやって保存するか、またどうやって再現するのかがよく分かりません。 コードは以下のような感じです ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- function test(){ if (!document.selection.createRange().text) return; var rng = document.selection.createRange(); var selectedText = rng.text; //選択された文字列 //選択された文字を大きくするだけでいいです。複雑なことはしません。 rng.pasteHTML('<span style="font-size: 160%;">'+selectedText+'</span>'); oRange = document.body.createTextRange(); var moji_nagasa = rng.text.length; //ページ中の文字列の位置を探そうとしています。 rng.moveEnd("textedit");//選択範囲の終端をページの最後まで持って行き、 moji_nagasa += rng.text.length;//文字列の位置を保存したい…この辺りが再現するときうまく働きません //↓書きませんが、適当にphpかperlに送って選択文字列のデータと位置を保存しています sampleAjax ( selectedText, oRange.text.length - moji_nagasa ); } // --></script> </head> <body onContextmenu="test()"> 文字列を選択して↑右クリックを押すと選択文字列を変更します。 OKWave 「文字列」「文字列」「文字列」 </body> </html> ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 上記の通り「文字列」という同じ言葉が何度も使われていると match や RegExp だと全て大きくなってしまいます。 また rng.moveStart("character", -1); rng.moveEnd("character", 1); などで再現しようと思っているのですが、改行文字を飛ばしているのかどうか分かりませんが、うまく動かないので、再現できません。 目的はただ、好きな文字列を選択して強調した部分を、今度ページを見たときもいつでも何を強調したか分かるようにしたい…というだけです。 どうか詳しい方お力をお貸しください。よろしくお願いしますm(_ _)m
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kiyominmin
- ベストアンサー率50% (2/4)
form タグを使って、保存したい文字を、textarea タグ内に入れれば、いけると思いますが。 <form action="hoge.php" method="post"> <textarea name="hoge">「文字列」「文字列」「文字列」</textarea> <input type="submit" value="保存する"> </form> hoge.php で、受け取ったデータを保存しないといけませんが、いかがでしょう？
お礼
すいません、自己解決しました。 for (var v=0;v<list[0];v++ ){ rng.moveStart("character",1); } for (var v=0;v<list[1];v++ ){ rng.moveEnd("character",-1); } のように、１つ１つカウントしたらできました texteditで使うと作動が悪いみたいです
補足
回答ありがとうございます。 すいません、僕のイメージとしては教科書にラインマーカーで線を引くように、文字列を選択してその部分を強調して、また次に見たとき見直すことができるようにしたい思っています。 文字列だけ保存されると前後の文脈が分からなくなるので、ちょっとイメージとは違います… それはとにかく回答ありがとうございました!