HTML内から画面で選択した文字列のIDを取得する方法

このQ&Aのポイント
  • HTML内から画面で選択した文字列のIDを取得するには、JavaScriptを使用することができます。
  • 具体的には、document.selection.createRange().textやwindow.getSelection().toStringなどの方法を使用します。
  • これにより、選択した文字列を取得し、その文字列を含むXXXタグのNAME属性の値を取得することができます。
回答を見る
  • ベストアンサー

HTML内から画面で選択した文字列のIDを取得する方法

こんばんは。 質問させて下さい。 例えば以下のようなHTMLを出力し、 なんらかのタグでNAMEを付けておきます。 ---<HTMLファイルここから       : <XXX NAME="ID001"></XXX>ようこそJavaScriptへ。 <XXX NAME="ID002"></XXX>うまく表示されているでしょうか? <XXX NAME="ID003"></XXX>たまたま表示されているだけでしょうか?       : <XXX NAME="IDnnn"></XXX>これはテスト文字列です。       : ---<HTMLファイルここまで この時に、「たまたま表示されている」をマウスで範囲選択し、 document.selection.createRange().textや window.getSelection().toStringなどで文字列を取得して、 XXXタグのNAMEよりID003を拾うには どういったやり方があるでしょうか?

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

  • ベストアンサー
  • makoto_u
  • ベストアンサー率75% (3/4)
回答No.1

function hoge() { var ranges = document.selection.createRange(); alert(ranges.parentElement().name); } こんな感じのスクリプトを作って <span NAME="ID003" onmouseup="hoge();">たまたま表示されている。</span> こんな感じで文字列を<span>タグで囲ってやればどうでしょう

liorzil
質問者

お礼

makoto_uさんご回答ありがとうございます! 頂いたサンプルで実行したところundefinedとアラートが表示されました。 他のサイトでメソッド等の使い方を見ても間違っていないので、 タグを変えたらAタグのみNAME要素が取得出来ました。 P、FONT、B・・・等もundefinedでした・・・。 やはり、ID振ってある文章全体をNAMEを持ったタグで 囲ったほうが簡単そうですね。 アタマの中では正規表現か、 HTMLファイルのBODY内を全部CGI側に送って・・・等を考えておりました。 もう少し触りながら調べてみます。 ありがとうございました!

関連するQ&A

  • GoogleChromeで選択文字列を取得する方法を教えて下さい。

    GoogleChromeで選択文字列を取得する方法を教えて下さい。 GoogleChromeでページ内で選択した文字列を取得し、表示させるプログラムを作成しています。 いろいろ検索してみたところ、window.getSelection()+''; のようにすれば取得できるようなことが書いて あったんですが、うまくいきませんでした。 function test() { var selection = window.getSelection()+''; return selection; } もちろん window.getSelection() でも駄目でした。 わかる方いらっしゃいましたら、教えて頂けると嬉しいです。

  • textareaの選択された文字列の取得

    HTMLエディタを作ろうとしています。 textAreaの選択された文字列の開始桁数・終了桁数を取得するにはどのようにすればよいのでしょうか? var selected_text; if (document.getSelection) // Moz { selected_text = document.getSelection(); } else if (document.selection && document.selection.createRange) // IE { rng = document.selection.createRange(); selected_text = rng.text; } alert(selected_text); これで、選択された内容は取得できたのですが、初めと終了の桁数が取れていません。 クロスブラウザに対応したく、IE6以上、FF3、Opera9.5、Safari3.1、Choromeにて動作を確認したいのですが、お分かりになる方いましたら、よろしくお願いします。

  • 選んだ文字列を表示させる方法について

    JavaScriptを使って,ドラッグで選んだ文字列を,同じページ内に,抜き出して表示させることを考えています。 いろいろなページを参考にして,以下のように作ってみましたが,どうもうまく動きません。 具体的には,文字を選ぶと[object]と表示されてしまいます。 アドバイスをお願いします。 <html lang="ja"> <head> <script type="text/javascript"> function doAlert(){ if(document.all){ var s = new String; s=document.selection.createRange(); if (document.all) { his.innerHTML = s; } else if ( document.layers ) { document.his.document.open(); document.his.document.write(s); document.his.document.close(); } }else if(document.getElementById){ s=window.getSelection(); document.write(s); } } document.onmouseup=doAlert; </script> </head> <body> <div id="div1" style="font-size:24pt"> 選択してください。 </div> <hr> <DIV id="his" style="position: absolute;"> <P>上の文をドラッグすると,ここに選んだ文字列が表示されます</P> <hr> </DIV> </body> </html>

  • HTMLのinputタグに入力された文字列の中にHTMLのタグが

    HTMLのinputタグに入力された文字列の中にHTMLのタグが 含まれたらjavascriptでalertを出すようにしたいのですが、 どのようにしたらよいかお分かりの方いましたら、 どうか教えてください。 お願いいたします。

  • WebページまたはHTMLソースから任意の文字列を

    WebページまたはHTMLソースから任意の文字列を抽出する(または色を変える太字にする)ブックマークレットを探しています WebページまたはHTMLソースから任意の複数の文字列(※)を抽出する(または色を変えて表示する、フォントを変える、太字にする)方法はありませんか? ※任意の文字列は別ウィンドウを出し、そこに入力したものが抽出されるものがいいのですが…。 JavascriptによるBookmarkletで実現可能だと思うのですが、アドバイスお待ちしています。 (※「WebページまたはHTMLソースから任意の複数の文字列」という表現が分かりにくいですが、例えば芸能人のtwitterのIDを含んだ公式ホームページを例にとると「公式twitterのID」と言った任意の文字列を抽出[または色を変えて表示する、フォントを変える、太字にする]方法を探しています。) 下記のタイプだとHTMLソース内の検索ができなくて…。教えてください <html> <body> <a href="javascript:(function(){ var arg = prompt('文字を入力',''), cont; if(!arg){ return; } if(document.body.createTextRange){ cont = document.body.createTextRange(); var BM= cont.getBookmark() }; function MakeSpan(mode){ var div = document.createElement('div'), span = document.createElement('span'); div.appendChild(span); span.style.cssText = 'background-color:#ff00ff; color:white;'; if(mode){ span.innerHTML = arg; return div}else{ return span; } } if(cont){ cont.moveToBookmark(BM); while(cont.findText(arg,1,4)){ cont.pasteHTML(MakeSpan(true).innerHTML); }}else{ if(window.find){ while(window.find(arg, true, false) ){ if(window.getSelection() == ''){ continue; } window.getSelection().getRangeAt(0).surroundContents(MakeSpan()); }}}})();">検索反転</a> これをHTMLファイルとして表示させて、このリンク『検索反転』をブックマークしてください。 ざっと作った簡単なbookmarkletなので、、 RSSフィードの方の対応はしていません。 IE7とFirefox2のみ動作確認しています。 Netscapeは動きません。 Safariは調整すれば動きますが調整していません。 反転表示の色については現在は背景ピンク、文字が白です。 このスクリプト内に background-color:#ff00ff; color:white; と言う場所があります。 色を変える時はこのスクリプトの色部分を変更してからブックマークしなおしてください。 この説明文は、色書換えの時のサンプル用にHTML内に入れてあります。 「検索反転」をクリックすればこのページ内で確認できます。 </body> </html>

  • ajaxでサーバより取得したHTML断片文字列をブラウザに正しく表示させたい

    質問1 ajaxを利用してWebサーバから「<B>hoge</B>」のような文字列を取得することはできたのですが、それをブラウザ上に太字のhogeとして表示させたいのですが、ブラウザでタグが解釈されず「<B>hoge</B>」のまま表示されます。サーバから取得したHTML断片文字列をブラウザに解釈させて表示させるにはどうしたらよいのでしょうか。 質問2 appendChild()を繰り返し実行すると、既に取得済みの文字列に対して、新たに取得した文字列がアペンドされます。アペンドさせずにボタン押下で取得した文字列だけを画面に表示させるにはどうしたらよいのでしょうか? よろしくお願いいたします。 JavaScript var disp = document.getElementById('disp'); disp.appendChild(document.createTextNode(xmlhttp.responseText)); HTML出力位置 <div id="disp"></div>

  • Javascriptで正規表現を使って HTMLタグの[id="hea

    Javascriptで正規表現を使って HTMLタグの[id="header-nav"]のような文字列がある場合に[id="headerNav"]というように一斉に置換するにはどういったふうに書けば良いでしょうか?

  • 画面から文字列を取得してその文字列の位置を知る方法

    こんばんは。 質問させてください。 画面から文字列を選択して、取得します。(これは出来ました。) その文字列がHTMLソースファイルの どの位置のものか取得する方法はありますでしょうか? ○番目の「こんばんは」を画面から取得した時に 同じ文字列があっても、○番目の位置が取得出来る方法なのですが・・・ ---- <HTML><HEAD></HEAD> <BODY> おはよう、こんばんは。 さようなら、ありがとう。 しつれいしました、おはよう、こんばんは。 こんばんは、さようなら。 さようなら </BODY> </HTML> ----

  • HTMLでのid とnameの違い

    HTMLとJavaScriptを使ってWebページを作っていますが、 id と name の使い分け方がよくわかりません。 id は各エレメントに個別に与える識別子と認識していて、getElementById() メソッドなどでよく使うのですが、それと name プロパティーはどう違うのでしょうか? あるサンプルコードに次のようなものがありました。 <a href="http://www.google.com" name="google_link"> <img src="google.gif" id="engine-1" alt="google graphic"> </a> というHTML部分があり、しばらく後に function show_attribs() { var attribs=""; attribs += "Link name: " + window.document.getElementById("engine-1").name; ..... alert(attribs); } というJavaScriptの関数があり、結果としてアラートボックスに  Link name: google_link と表示されるものです。 よくわからないのは、"engine-1" という id で取得した <img> エレメントが、 <a> エレメントに設定したはずの name プロパティー とその値を持っているということです。なんだか二つのエレメントが一体になったように扱われていますが、なぜそうなるのかわかりません。 どなたかよく説明していただけないでしょうか。お願いします。

    • ベストアンサー
    • HTML
  • HTMLで選択不可能な文字列

     いつもお世話になっております。HTML関連で疑問がありますのでお答え出来る方がいらっしゃいましたらご教示願います。  HTML(+CSS/JavaScript)で選択不可能な文字列はどのように生成するのでしょうか? 選択不可能とは、コピペが出来ない状態のことです。多くのアプリケーションの「ヘルプ」→「バージョン情報」などではそれが出来ませんよね。あれのことを指します。 動作環境 Windows XP Pro SP2 IE 6.0 or 7.0(日本語正式) Firefox 1.5.0.8  どなたかご存じの方がいらっしゃいましたら、ご一報頂ければ幸いです。