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

JavaScriptでarea要素のhref属性からポート番号を取得する方法

JavaScriptでarea要素のhref属性に含まれるポート番号の部分を取得したい場合は、portプロパティを使用します。このプロパティは、リンク先URLのうちポート番号に該当する部分を文字列として返します。

サンプルコード

以下のコードを実行すると、area要素のポート番号を取得して画面に表示できます。なお、ポート番号がデフォルトの「80」である場合、ブラウザによっては結果が「0」または空欄（空白）として返される点に注意してください。

<!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").port;
         document.write("<br>Port Number: "+x);
      </script>
   </body>
</html>

コードの解説

このサンプルでは、イメージマップ内に配置したarea要素に対してid「myarea」を設定し、document.getElementById()で要素を取得しています。その後、.portプロパティを参照することで、href属性のURLに含まれるポート番号を取り出し、document.write()で結果を出力しています。

補足：ポート番号が省略された場合の挙動

href属性のURLにポート番号が明示されていない場合（例：「about.htm?id=company」など）、多くの環境では空文字列が返されます。また、明示的に「80」が指定されている場合でも、ブラウザの実装によっては「0」と表示されることがあるため、実装時はこの挙動を考慮しておくとよいでしょう。確実にポート情報を扱いたい場合は、返り値が空でないかどうかを事前にチェックする処理を組み合わせることをおすすめします。

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

    HTMLの<area>要素に設定されたリンク先URLのうち、クエリ文字列（?id=companyのような「?」以降の部分）だけを取り出したい場面は意外と多くあります。JavaScriptでは、searchプロパティを使うだけで、このクエリ文字列部分を簡単に取得できます。searchプロパティは、href属性のURLから「?」とそれに続くパラメータ部分をそのまま文字列として返します。以下のサンプルコードで、実際の動きを確認してみましょう。サンプルコード<!DOCTYPE html> <html>   <body>  &

  2. JavaScriptでarea要素のhref属性からパス名（pathname）を取得して表示する方法

    パス名の取得方法JavaScriptでarea要素のhref属性に含まれるパス名（pathname）部分を取得するには、pathnameプロパティを使用します。このプロパティは、リンク先URLのうちドメイン名やクエリ文字列を除いたパス部分のみを文字列として返します。たとえば、href属性が「about.htm」のような相対パスで指定されている場合でも、現在のページを基準としたパス名が自動的に解決されて返されます。サンプルコード以下のコードを実行すると、area要素のパス名部分が画面に表示されます。<!DOCTYPE html> <html>    &