Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Regex ใน JavaScript: ตรวจสอบตัวอักษร ตัวเลข และ Underscore เท่านั้น


ใช้ Regular Expression (Regex) ตรวจสอบว่าสตริงประกอบด้วย ตัวอักษร (a-z, A-Z), ตัวเลข (0-9), และ Underscore (_) เท่านั้น ใช้ Pattern ^\w+$ โดย \w = [A-Za-z0-9_] (Word character)

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

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Regex: ตัวอักษร ตัวเลข Underscore</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; }
  </style>
</head>
<body>
  <h1>Regex: ตรวจสอบตัวอักษร ตัวเลข Underscore เท่านั้น</h1>
  <div style="color: green;" class="result"></div>
  <input type="text" class="txt" placeholder="พิมพ์ข้อความ" />
  <button class="Btn">ตรวจสอบ</button>
  <h3>กดปุ่มเพื่อตรวจสอบว่าข้อความมีเฉพาะ a-z A-Z 0-9 _ เท่านั้นหรือไม่</h3>
  <script>
    const resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
      const str = document.querySelector(".txt").value;
      const regex = /^\w+$/; // ^ เริ่มต้น \w+ ตัวอักษร/ตัวเลข/_ 1ขึ้นไป $ จบ
      const match = str.match(regex);
      if (match) {
        resEle.textContent = "ข้อความถูกต้อง: เฉพาะตัวอักษร ตัวเลข _";
        resEle.style.color = "green";
      } else {
        resEle.textContent = "ข้อความไม่ถูกต้อง: มีอักขระอื่น (ช่องว่าง, สัญลักษณ์, ฯลฯ)";
        resEle.style.color = "red";
      }
    });
  </script>
</body>
</html>

ผลลัพธ์

Regex ใน JavaScript: ตรวจสอบตัวอักษร ตัวเลข และ Underscore เท่านั้น

กรอกข้อความมีช่องว่าง กด "ตรวจสอบ":

Regex ใน JavaScript: ตรวจสอบตัวอักษร ตัวเลข และ Underscore เท่านั้น

กรอกข้อความถูกต้อง กด "ตรวจสอบ":

Regex ใน JavaScript: ตรวจสอบตัวอักษร ตัวเลข และ Underscore เท่านั้น

รายละเอียด Regex Pattern

/^\w+$/
// ^       เริ่มต้นสตริง
// \w      Word character = [A-Za-z0-9_]
// +       หนึ่งตัวขึ้นไป (quantifier)
// $       จบสตริง

รูปแบบ Regex ที่เกี่ยวข้อง

^\w+$^[\w-]+$^[a-zA-Z0-9_]+$^\p{L}+$/u^[\w\s]+$
Patternความหมายตัวอย่างผ่าน
ตัวอักษร ตัวเลข _ เท่านั้น (ต้องมีอย่างน้อย 1 ตัว)"abc123", "user_name", "ABC"
เพิ่ม Hyphen (-)"user-name", "abc-123"
เหมือน \w แต่ชัดเจนกว่า (ไม่รองรับ Unicode letters)"abc123"
ตัวอักษร Unicode ทุกภาษา (ต้องใช้ flag u)"สวัสดี", "こんにちは"
ตัวอักษร ตัวเลข _ และ whitespace"hello world", "user name"

การใช้งานจริง

  • Validate Username / Variable names / CSS Class names
  • Sanitize input ก่อนบันทึกลงฐานข้อมูล
  • Client-side validation ก่อนส่งฟอร์ม (ยังต้อง validate server-side อีกครั้ง)

หมายเหตุ

\w ใน JavaScript รองรับเฉพาะ ASCII (A-Z, a-z, 0-9, _) หากต้องการรองรับภาษาไทย/อื่นๆ ต้องใช้ Unicode property escapes: /^[\p{L}\p{N}_]+$/u (ต้องใช้ flag u)