ใช้ Regex กับ String.replace() และ Function Replacer จัดรูปแบบ String ให้เป็น ABC-1234
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Format ABC-1234</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p class="formatting">ABC1234</p>
<script>
function joinTheDashSymbol(m, r1, r2, r3, r4, r5) {
if (r1) return [r1, r2, r3].join('-'); // 3-3-4 digits
else return [r4, r5].join('-'); // 3 letters-4 digits
}
$(".formatting").text(function(i, words) {
return words.replace(/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/, joinTheDashSymbol);
});
</script>
</body>
</html>
คำอธิบาย Regex
/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/^(\d{3})(\d{3})(\d{4}): 10 Digits → Group 1,2,3 (Phone: 123-456-7890)|: OR([A-Z]{3})(\d{4}): 3 Uppercase + 4 Digits → Group 4,5 (ABC-1234)$: จบ String
Replacer Function
- m = Full Match
- r1-r5 = Capture Groups
- ถ้า r1 มีค่า (Match Pattern แรก) → Join Group 1-3 ด้วย -
- Else (Match Pattern ที่ 2) → Join Group 4-5 ด้วย -
Vanilla JS Version
const format = str => str.replace(/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/,
(m, g1,g2,g3,g4,g5) => g1 ? [g1,g2,g3].join('-') : [g4,g5].join('-')
);ผลลัพธ์
Input: "ABC1234" → Output: "ABC-1234"
