2020年11月04日

JavaScript ご覧のページのタイトルをリンクテキストとしたリンクを取得

こんにちは。ガッツです。

先月から、「JavaScriptをうまく使って、今見ているページに飛べるリンクのコードを簡単に作れないだろうか。ただしリンクテキストは、そのページのタイトル名で。」ということに取り組んでいました。

■ここまでのあらすじ

本日は、リンクに必要な文字列を取得することを目標にしましょう。

今回は、イベントの操作(後付け)については必要ないので使いません。クリップボードを操作したい次回当たりに必要になるでしょう。

ホームページがもともと持っている情報にJavaScriptでアクセスして、こちらで文字列を追加することで、必要な文字列を取得することができます。

ホームページから取得する情報は、下記2つ。

  1. ページのURL‥document.URL
    (またはdocument.location)
  2. ページのタイトル名‥document.title

このページを見ていて、アドレスバーのURLがになっている方は、タイトルがになっていると思います。

これら2つの情報を織り込んだHTMLタグを作るように、こちらから適宜文字列を追加します。

ここで使うのが、「文字列の連結」です。JavaScriptでは、2つの文字列に「+」演算子を使うと、文字列を連結できます。

文字列の連結は、よく使われるスクリプト言語やエクセル関数ではおなじみのものですが、言語、アプリケーションごとに書式が違うので、必要に応じて覚えておく良いと思います。

求める文字列を取得するためのコード(表現)は

"<a href=\"" + document.URL + "\">" + document.title + "</a>"

になります。区切りが分かりやすいように、文字列のひとまとまりに緑色のマーカーを引きました。

何かに出力しないと見ることはできないので、コンソールに出力してもよいのですが、ここでは開発者ツールを使ったことがない人でも手っ取り早くみられるダイアログ、alertを使って出力してみましょう。

javascript:alert("<a href=\"" + document.URL + "\">" + document.title + "</a>")

先日のようにこのコードをアドレスバーから実行したら、こんなダイアログが出ました。

ダイアログの画像。このページのURLが書いている

この文字列こそがこのページへのリンクを有するテキストのHTMLになります。

次回はいよいよ、取得したHTMLタグをクリップボードにコピーし、貼り付けられる状態にしたいと思います。

本日は、ガッツが更新いたしました。

posted by ハモニ仙台 at 14:32| 宮城 ☁| Comment(0) | 日記 | このブログの読者になる | 更新情報をチェックする