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

締切済

質問者：st13665
質問日時：2011/08/24 17:01
回答数：2件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2011/08/25 13:00

#1です。

＞HTMLソースの中のタグまたは文字列を検索し、該当部分を
＞ブラウザ表示する方法だとどうすればいいのでしょうか？
なんだか、元の質問内容とはぜんぜん違うような…？？

ソースを文字列として検索したいのであれば、documentのhtmlやbodyのinnerHTMLを取得して検索するということになりそう。
でもタグの検索はけっこう面倒そうな気がしますが…（単に、私の感想だけですが←正規表現が苦手なこともあり）
単純にdocument内の特定要素を拾い出したいだけであれば、DOMでgetElementsByTagName("○○")を利用する方がはるかに簡単かと思います。

通常の「文字列」はブラウザに表示されていますから色を変えたりすることで強調できますが、タグやその属性の文字列などは表示されていませんので、検索した後どのように表示するのかについてはひと工夫いるのではないでしょうか。

別に拾い出して、文書の最後に文字列として追加しちゃうとか…
でも、これ（↑）だと部分だけ拾い出しても文書全体のどこに当たるのかはまったくわからないですねぇ…

いっそのこと、ソース全体を文字列として表示してしまい、その中で該当箇所の色を変えて表示するとか…
しかし、このような方法だと、スクリプトでソース自体が変更されてしまいますので、#1での回答のように2回、3回と繰り返すわけにはいかなくなってしまいます。
そうすると、ソースの変更を避ける意味からも、別ウィンドウを開いて、そちらにソースを表示するようにするといった案も考えられそうですが…（ブックマークレットからの動作はちゃんと確認はしていません）

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2011/08/24 22:37

私の環境では、ご提示のコードは動作しないみたいだし（コピペミスなのかな？）、整形するのも面倒なので中身は見ていませんが…

もし、お手元のもので動作しているのなら、そのままで使えるのではないでしょうか？
そのまま登録すればよいはずです。（…って説明にも書いてありますよね？）
スクリプトの作者もそのつもりで作成なさっているのではないでしょうか？
（多分に、簡易版のつもりのようではありますが…）

＞任意の複数の文字列
の意味がよくわかりませんが、
＞公式ホームページを例にとると「公式twitterのID」と言った任意の文字列
というのは、任意の『単数』の文字列なので、そのままで問題ないのではないでしょうか？

複数の文字列に対して同じ処理を行ないたければ、2回行なうことで可能ではないかと想像しますが？
同じ色になってしまうのが困るとか言うのであれば又別ですが…
（色をかえたものを別に用意しておくという、単純な方法も使えると思います。）

＞または色を変えて表示する、フォントを変える、太字にする
作者の説明（？）にもありますが、別の色にしたりするのと同じ要領で、太字やフォントへの変更も可能なのではないでしょうか？
（内容を見ていないので推測ですが…cssと同じ指定になっているみたいなので）

- 0
- 件

通報する

この回答へのお礼

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

質問の仕方が悪かったですね…。申し訳ございません。

＞任意の複数の文字列
＞または色を変えて表示する、フォントを変える、太字にする
はおっしゃるっとり対応できました。

HTMLソースの中のタグまたは文字列を検索し、該当部分をブラウザ表示する方法だとどうすればいいのでしょうか？

通報する

お礼日時：2011/08/25 09:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！