คุณสมบัติ search ของ Location ใน HTML DOM

คุณสมบัติ search ของ Location

คุณสมบัติ search ของออบเจ็กต์ Location ใช้สำหรับคืนค่าหรือกำหนดค่าสตริงที่ตรงกับ query parameters (สตริงคำสั่ง) ของ URL ส่วน query string อยู่หลังเครื่องหมาย ? ใน URL

ไวยากรณ์ (Syntax)

การอ่านค่า search

location.search

การกำหนดค่า search

location.search = searchString

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้คุณสมบัติ Location search เพื่อเปลี่ยน query string

<!DOCTYPE html>
<html>
<head>
    <title>Location search</title>
    <style>
        form { width: 70%; margin: 0 auto; text-align: center; }
        * { padding: 2px; margin: 5px; }
        input[type="button"] { border-radius: 10px; }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Location-search</legend>
            <label for="urlSelect">URL ปัจจุบัน:</label>
            <input type="url" size="30" id="urlSelect" value="https://www.example.com:2544/aboutUs/CTO.htm">
            <input type="button" onclick="getsearch()" value="Get search">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var urlSelect = document.getElementById("urlSelect");
        function getsearch() {
            divDisplay.textContent = 'URL search: ' + location.search;
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม Get search จะแสดง URL ในช่องป้อนข้อมูล

หลังคลิกปุ่ม Get search จะแสดง query string (เช่น ?id=123&name=test) หรือสตริงว่างถ้าไม่มี

คำอธิบายเพิ่มเติม

• คุณสมบัติ search จะคืนค่ารวมเครื่องหมาย ? เสมอ (เช่น ?q=test&page=1)
• เมื่อกำหนดค่า location.search = "new=value" เบราว์เซอร์จะโหลดหน้าใหม่พร้อม query string ใหม่
• ใช้ร่วมกับ URLSearchParams API เพื่อจัดการ query parameters ได้ง่ายขึ้น:

  const params = new URLSearchParams(location.search);
  console.log(params.get('id')); // อ่านค่า
  params.set('page', '2'); // ตั้งค่า
  location.search = params.toString(); // อัปเดต URL

• มักใช้สำหรับส่งข้อมูลแบบ GET request, การกรองข้อมูล, pagination, tracking