ระบบแยกข้อมูลที่อยู่ (Extract Address)

bysemicon -
0

 

1. โครงสร้างหน้า HTML

  • มีฟอร์มป้อนข้อความ (textarea) สำหรับกรอกที่อยู่และเบอร์โทรศัพท์
  • ปุ่ม Extract Data เพื่อทำการแยกข้อมูล
  • ฟอร์มสำหรับแสดงข้อมูลที่แยกออกมา ได้แก่:
    • Address (ที่อยู่)
    • Subdistrict (ตำบล/แขวง)
    • District (อำเภอ/เขต)
    • Province (จังหวัด)
    • Zipcode (รหัสไปรษณีย์)
    • Tel (เบอร์โทรศัพท์)

2. การทำงานฝั่ง JavaScript

  • รับค่าจาก textarea และแยกข้อมูลด้วย Regular Expression (RegEx)
  • RegEx รองรับ:
    • ทั้งรูปแบบที่เว้นวรรคและไม่เว้นวรรค
    • คำย่อ เช่น ต., อ., จ. หรือคำเต็ม เช่น ตำบล, อำเภอ, จังหวัด
    • รูปแบบพิเศษของ กรุงเทพ ที่ไม่มีคำว่า จังหวัด

3. รูปแบบข้อมูลที่รองรับ

  1. ตัวย่อแบบเว้นวรรค
    102/147 หมู่7 ต.สามโคก อ.สามพาน จ.นครปฐม 10250 0891640000
  2. คำเต็มแบบไม่เว้นวรรค
    102/147 หมู่7 ตำบลสามโคก อำเภอสามพาน จังหวัดนครปฐม 10250 0891640000
  3. กรุงเทพฯ
    102/147 หมู่7 แขวงสามโคก เขตสามพาน กรุงเทพ 10250 0891640000

4. กระบวนการแยกข้อมูล

    4.1 Regular Expression:
  • ใช้จับรูปแบบข้อความตามโครงสร้างที่กำหนด
  • รองรับทั้งการเว้นวรรคและไม่เว้นวรรค เช่น:
    • ต. / ตำบล หรือ แขวง
    • อ. / อำเภอ หรือ เขต
    • จ. / จังหวัด หรือ กรุงเทพ
   const regex = /^(.*?)\s(?:ตำบล|ต\.|แขวง)\s?([\u0E00-\u0E7F]+)\s(?:อำเภอ|อ\.|เขต)\s?([\u0E00-\u0E7F]+)\s(?:จังหวัด|จ\.|กรุงเทพ)\s?([\u0E00-\u0E7F]*)\s(\d{5})\s(\d{9,10})$/;
    รายละเอียด
     1. \s?
  • เพิ่มคำสั่งนี้หลังคำว่า ตำบล, ต., แขวง, อำเภอ, อ., เขต, จังหวัด, จ., และ กรุงเทพ
  • หมายถึง รองรับทั้งกรณีที่มีหรือไม่มีช่องว่างหลังคำดังกล่าว

    2. กลุ่มจับข้อมูลไทย [\\u0E00-\\u0E7F]+

  • จับข้อความภาษาไทยให้ยืดหยุ่นทั้งกรณีที่เว้นวรรคและไม่เว้นวรรค
    4.2 การเติมค่าในช่อง Input:
  • ที่อยู่ (Address): match[1]
  • ตำบล/แขวง (Subdistrict): match[2]
  • อำเภอ/เขต (District): match[3]
  • จังหวัด (Province): match[4] (เติมค่า กรุงเทพ กรณีว่าง)
  • รหัสไปรษณีย์ (Zipcode): match[5]
  • เบอร์โทรศัพท์ (Tel): match[6]

5. ข้อความแจ้งเตือน

  • หากข้อมูลไม่ตรงรูปแบบ จะมีการแจ้งเตือน:
    ไม่สามารถจับข้อมูลได้ กรุณาตรวจสอบรูปแบบข้อมูล

6. ตัวอย่างผลลัพธ์

Input
102/147 หมู่7 ต.สามโคก อ.สามพาน จ.นครปฐม 10250 0891640000
Output
Address: 102/147 หมู่7
Subdistrict: สามโคก
District: สามพาน
Province: นครปฐม
Zipcode: 10250
Tel: 0891640000

สรุป

ระบบนี้ช่วยแยกข้อมูลที่อยู่และเบอร์โทรศัพท์ออกมาให้ใช้งานง่ายในช่อง Input รองรับทั้งคำเต็มและคำย่อ โดยสามารถนำไปประยุกต์ใช้ในแอปพลิเคชันหรือระบบอื่นๆ ได้ทันทีครับ!


Code


<!DOCTYPE html>
<html>
<head>
  <title>Extract Address</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="container mt-5">
  <h2>Extract Address</h2>
  <div class="mb-3">
    <label for="inputText" class="form-label">Input Address</label>
    <textarea id="inputText" class="form-control" rows="3"></textarea>
  </div>
  <button id="splitButton" class="btn btn-primary">Extract Data</button>

  <h3 class="mt-4">Extracted Data</h3>
  <form>
    <div class="mb-3">
      <label for="address" class="form-label">Address</label>
      <input type="text" id="address" class="form-control">
    </div>
    <div class="mb-3">
      <label for="subdistrict" class="form-label">Subdistrict</label>
      <input type="text" id="subdistrict" class="form-control">
    </div>
    <div class="mb-3">
      <label for="district" class="form-label">District</label>
      <input type="text" id="district" class="form-control">
    </div>
    <div class="mb-3">
      <label for="province" class="form-label">Province</label>
      <input type="text" id="province" class="form-control">
    </div>
    <div class="mb-3">
      <label for="zipcode" class="form-label">Zipcode</label>
      <input type="text" id="zipcode" class="form-control">
    </div>
    <div class="mb-3">
      <label for="tel" class="form-label">Tel</label>
      <input type="text" id="tel" class="form-control">
    </div>
  </form>

  <script>
   document.getElementById('splitButton').addEventListener('click', () => {
    const inputText = document.getElementById('inputText').value;

    const regex = /^(.*?)\s(?:ตำบล|ต\.|แขวง)\s?([\u0E00-\u0E7F]+)\s(?:อำเภอ|อ\.|เขต)\s?([\u0E00-\u0E7F]+)\s(?:จังหวัด|จ\.|กรุงเทพ)\s?([\u0E00-\u0E7F]*)\s(\d{5})\s(\d{9,10})$/;


    const match = inputText.match(regex);

    if (match) {
      document.getElementById('address').value = match[1].trim(); // ที่อยู่
      document.getElementById('subdistrict').value = match[2].trim(); // ตำบลหรือแขวง
      document.getElementById('district').value = match[3].trim(); // อำเภอหรือเขต
      document.getElementById('province').value = match[4].trim() || 'กรุงเทพ'; // จังหวัด
      document.getElementById('zipcode').value = match[5].trim(); // รหัสไปรษณีย์
      document.getElementById('tel').value = match[6].trim(); // เบอร์โทร
    } else {
      alert('ไม่สามารถจับข้อมูลได้ กรุณาตรวจสอบรูปแบบข้อมูล');
    }
  });

  </script>
</body>
</html>




ถ้ามีประโยชน์โปรดสนับสนุนเพื่อเป็นกำลังใจในการพัฒนาต่อไป






Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า