การดึงหมายเลขพอร์ตจาก href ของแท็ก area ใน JavaScript

คุณสมบัติ port

ใน JavaScript สามารถเข้าถึงหมายเลขพอร์ตของ URL ในแท็ก <area> ได้ผ่านคุณสมบัติ port ของอ็อบเจกต์ HTMLAreaElement

ตัวอย่างโค้ด

<!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="https://example.com:8080/about.htm?id=company" 
          alt="Team" target="_self">
  </map>
  
  <script>
    var area = document.getElementById("myarea");
    var port = area.port;
    document.write("Port Number: " + port);
  </script>
</body>
</html>

พฤติกรรมที่ควรทราบ

• หาก URL ไม่ได้ระบุพอร์ตอย่างชัดเจน (ใช้พอร์ตเริ่มต้น เช่น 80 สำหรับ HTTP, 443 สำหรับ HTTPS) บราวเซอร์บางตัวอาจคืนค่า "" (สตริงว่าง) หรือ "0"
• คุณสมบัติ port จะคืนค่าเป็นสตริงเสมอ
• ทำงานได้กับ URL แบบ relative และ absolute ทั้งคู่

คุณสมบัติ URL อื่น ๆ ที่มีประโยชน์

อ็อบเจกต์ HTMLAreaElement (เช่นเดียวกับ HTMLAnchorElement) มีคุณสมบัติ URL ต่าง ๆ ดังนี้:

วิธีการมืออาชีพ: ใช้ URL API

สำหรับการจัดการ URL ที่ซับซ้อน แนะนำให้ใช้ URL API:

var area = document.getElementById("myarea");
var url = new URL(area.href);
console.log(url.port);     // "8080"
console.log(url.hostname); // "example.com"