JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでarea要素のhref属性からクエリ文字列を取得するには？searchプロパティの使い方

HTMLの<area>要素に設定されたリンク先URLのうち、クエリ文字列（?id=companyのような「?」以降の部分）だけを取り出したい場面は意外と多くあります。JavaScriptでは、searchプロパティを使うだけで、このクエリ文字列部分を簡単に取得できます。

searchプロパティは、href属性のURLから「?」とそれに続くパラメータ部分をそのまま文字列として返します。以下のサンプルコードで、実際の動きを確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
  <body>
    <img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html"/>
    <map name="html">
      <area id="myarea" shape="circle" coords="154,150,59" href="about.htm?id=company" alt="Team" target="_self">
    </map>
    <script>
      var x = document.getElementById("myarea").search;
      document.write("<br>Querystring: " + x);
    </script>
  </body>
</html>

実行結果

Querystring: ?id=company

コードの解説

  • document.getElementById("myarea")で、idが「myarea」の<area>要素を取得します。
  • .searchにアクセスすると、href属性「about.htm?id=company」のうち、クエリ文字列である「?id=company」の部分が返されます。
  • document.write()で、その結果を画面に出力しています。

ポイント

searchプロパティは「?」記号自体も含めて返す点に注意してください。「?」を除いた純粋なパラメータ部分が必要な場合は、x.substring(1)のように先頭の1文字を取り除くか、近年のブラウザではURLSearchParamsオブジェクトを使って各パラメータを個別に扱うのが便利です。

  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

  2. HTMLのarea要素におけるhref属性の使い方を徹底解説

    HTMLの<area>要素におけるhref属性は、クリック可能な領域（イメージマップ）にリンク先を設定するための重要な属性です。この記事では、href属性の基本的な構文から実際のコード例まで、わかりやすく解説します。href属性の基本構文<area>要素のhref属性は、ハイパーリンクのリンク先（ターゲット）を指定します。基本的な構文は以下のとおりです。<area href=URL>ここで指定する「URL」には、相対パス、絶対パス、スクリプト、各種プロトコルなど、さまざまな形式のリンク先を設定できます。実装例：イメージマップでhref属性を使うそれでは、&l