JavaScriptでテキスト検索のブックマークレットを作成する方法

ブックマークレット あります JavaScriptアプリケーション としてアクセスすることができます ブラウザのブックマーク. それらはユーザーができるようにするために使用されます さまざまなアクションを実行する Webページに。たとえば、このFontShopによるブックマークレットは、任意のWebページでFontShop Webフォントをプレビューするためのものです。.

この記事では、それがどれほど迅速で簡単なのかを見ていきます。 ブックマークレットを作成する それを作成することによって Wikiwandを実行します （見栄えの良いウィキペディア） サーチ 任意のWebページ上の選択したテキスト用.

ブックマークレットの仕組み

ブックマークレットのURI を使用します JavaScript： プロトコル それはそれを示しています JavaScriptコードで構成. ブックマークレットをクリックすると、 JavaScriptを実行 Webページ上で、ページの外観を変更したり、別のページにリダイレクトしたり、そのページに新しい情報を表示したりするなどのタスクを実行します。.

ブックマークは基本的に JavaScriptコードのセット, 個人的な使用のために、あるいはWordPressのようにそれをユーザーに提供するために、JavaScriptの知識がほとんどなくても簡単に作成できます。.

JavaScriptコードを始めよう

の URLの構造 Wikiwandが英語の記事に使用しています https://www.wikiwand.com/en/articleTitle. どのURLのWikiwandページにジャンプするスクリプトを書く必要があります。 ユーザーが選択したばかりの文字列で終わります - 選択したテキストは 代わりに置く articleTitle.

まず、私たち テキストを手に入れる ユーザーが次のコードでページを選択しました。

 getSelection（）。toString（） 

必要がある キャスト によって返されるオブジェクト getSelection（） 文字列として を使用して toString（） それをするための方法 選択したテキストを出力する.

次に、私たちはする必要があります 訪問する Wikiwandの記事ページへ。次のロジックを使用してこれを実現します。 newURL になります Wikiwandの記事ページのURL （最後に選択した文字列が含まれます）

 location.href = newURL 

これら2つのコードスニペットをまとめると、次のようなスクリプトになります。

 location.href = 'https://www.wikiwand.com/en/'+getSelection（）.toString（） 

今、我々は追加するだけです JavaScript： 前面にプロトコル、そして我々は持っています 最終コード ブックマークレットで使用します。

 //改行せずに1行に追加する） 

オプション 置換（/ \ n / g、 '％20'） 最後に 改行文字を置き換えます （\ n本文中） 単一の空白文字を使用 （％20）.

JavaScriptコードは準備ができています。コードを配置する必要があることに注意してください。 改行なしで単一行で, 後でそれはなります テキスト入力フィールドに追加.

ブックマークを作成する

ブラウザのブックマークウィンドウを開き、 新しいブックマークを追加する：

• Firefox： Ctrl + Shift + B / cmd + Shift + Bを押し、[ブックマークツールバー]を右クリックして[新しいブックマーク]を選択します.
• クロム： Ctrl + Shift + O / cmd + Alt + Bを押し、[ブックマークバー]を右クリックして[ページの追加]を選択します。.

URLフィールドに JavaScriptコードをコピー＆ペーストする 前から。ブックマークが作成されたら、使用する準備が整いました。任意のWebページに移動する, 単語を選択 Wikiwandで検索したい ブックマークレットをクリック - Wikiwandの記事ページがすぐに開きます.

迅速なアクセス

ブックマークレットが必要になるたびにブックマークメニューにアクセスするのではなく、次のように選択できます。 直接表示する 素早いアクセスのためにあなたのブラウザで.

• Firefox： トップメニューバーの[表示]> [ツールバー]をクリックし、[ブックマークツールバー]を選択します。.
• クロム： Ctrl + Shift + B / cmd + Shift + Bを押す.

ブックマークレットリンクを作成する

ブックマークレットをWebサイトに追加できます ハイパーリンクとして どの訪問者も ブックマークできます リンクをブックマークツールバーにドラッグアンドドロップするか、リンクを右クリックしてブックマークを付けるオプションを選択します。.

ブックマークレットをハイパーリンクにするには、 ブックマークレットスクリプトを含むHTMLタグ その値として href 属性：

   Wikiwand Searchのブックマークレット  

ブックマークレットを個別に保存する方法

あなたもすることができます 別のJavaScriptファイルを使用する ブックマークレットコードを保存するには、このチュートリアルで紹介したような短いスクリプトがある場合はおそらく必要ありませんが、JavaScriptコードが長すぎてブックマークバーにコピーアンドペーストできない場合は便利です。あなたのブラウザの.

ファイル myscript.js 意志 メインのJavaScriptコードを収容する ブックマークレットの場合は、次のコードを追加する必要があります。 ブックマークのURLとして （ブラウザのブックマークバーに、または href HTMLファイルの属性）：

 //改行せずに1行に追加するjavascript：（（）=> with（document）let s = createElement（ 'script'）; s.src = 'myscript.js'; head.appendChild（s） ）（）; 

上記のコードスニペットは 自己呼び出し矢印関数に包まれて, 以下のようなECMAScript 6の機能を使用します。 させて コード長を減らすためのキーワード。それを追加します > を指すタグ myscript.js にファイル 文書のセクション ユーザーがブックマークレットをクリックしたとき （絶対パスを使用する必要があるかもしれないことに注意してください。 myscript.js ファイル）.