選択した文字列をハイライト表示するブックマークレットを作ってみた

JavaScript

Twitterを見ていたら、「Evernoteのノートがラインマーカー機能に対応していなくて、Webクリップにマーカーを予め引いておいて取り込む機能があればいいのにな〜」という趣旨の発言を見つけました。
たしかに、Webクリップにマーカーを引いておけば、あとで見たときに重要な部分がすぐわかって便利です。
Google等で探してみましたが、それっぽいようなものはありませんでした。


ないならば作ってしまえ！ということで作ってみました。
↓↓↓
http://let.hatelabo.jp/kuro_m88/let/gYC-y8zV19DpUg
↑↑↑
に置いてあります。
「bookmarklet:選択した文字列を検索し、ハイライト表示する」と書いてある所をドラッグ＆ドロップでブックマークの所に移動させるか、右クリックメニューから、お気に入りに追加等すれば、準備完了です。

使い方

使いかたは簡単です。ハイライト表示したいを選択して、先ほど登録したブックマークレットをクリックするだけです。
Internet Explorer、Firefox、Sleipnirで動作確認を行いました。

ソースコード

http://let.hatelabo.jp/kuro_m88/let/gYC-y8zV19DpUg
にも同じ物が置いてあります。
もちろん、JavaScriptです。

(function(){
var str=(document.all)?document.selection.createRange().text:(window.getSelection()+'');
if(str!=''){
document.body.innerHTML=document.body.innerHTML.replace(str,'<font color="black" style="background:#ffff00;padding:5;">'+str+'</font>')
}
})();

こんな感じで作りました。
選択文字列を取得しているのが、

var str=(document.all)?document.selection.createRange().text:(window.getSelection()+'');

なのですが、ここがポイントです。
何をやっているのかというと、

document.all

というメソッドが存在するなら、変数strに

document.selection.createRange().text

の結果を代入。
存在しないなら、変数strに

window.getSelection()+''

の結果を代入しろということをやっています。
選択範囲の文字列の取得のメソッドなのですが、IEとその他のブラウザで名前が違うようです。
なので、簡易的に、document.allが定義されているブラウザならば、document.selection.createRange().textを使えば選択範囲の文字列が取得できるだろう。でなければwindow.getSelection()を使えばいいだろう。と決め打ちで処理しています。
また、

window.getSelection()

とせずに、

window.getSelection()+''

としているのは、''を付加することによって変数strの内容がString型になることが保証されるからです。
そして、strの中身が''、すなわち何も選択されていなかったら何も処理をせずに終了し、選択されていたらその文字列を

<font color="black" style="background:#ffff00;padding:5;"></font>

で囲んだもので置換します。


ただ、選択文字列を検索して一番最初に見つけたものをタグで囲ってるだけなので、まれに違うところにマーカーが引かれるかもしれませんが、それは気にしないということでw


簡易的にささっと作っただけですが、意外と使えそうです。


#JavaScriptもちゃんと書けるように勉強しないとだめだな〜と実感。