<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Formatter</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="max-w-2xl w-full bg-white p-6 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-center mb-6">ID Formatter</h1>
<div class="mb-4">
<label for="inputText" class="block text-lg font-medium text-gray-700 mb-2">Input Text</label>
<textarea id="inputText" rows="6" class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your text here..."></textarea>
</div>
<div class="mb-6">
<label for="outputText" class="block text-lg font-medium text-gray-700 mb-2">Output Text</label>
<textarea id="outputText" rows="6" readonly class="w-full p-4 border border-gray-300 rounded-lg bg-gray-50"></textarea>
</div>
<div class="text-center">
<button onclick="formatText()" class="bg-blue-500 text-white py-2 px-6 rounded-lg shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Format IDs</button>
</div>
</div>
<script>
function formatText() {
const inputText = document.getElementById('inputText').value;
const outputText = document.getElementById('outputText');
// Regular expression to find 7-digit numbers
const regex = /\b\d{7}\b/g;
const matches = inputText.match(regex);
// Format matches with quotes and commas
if (matches) {
const formattedMatches = matches.map(num => `"${num}",`).join('\n');
outputText.value = formattedMatches;
} else {
outputText.value = 'No 7-digit numbers found.';
}
}
</script>
</body>
</html>