Codelab Editor
Free Online HTML Editor
Run
Learn JSON
<!DOCTYPE html> <html> <head> <style> body { padding: 10px; background: #fdfdfd; font-family: sans-serif; } .user-card { display: none; max-width: 340px; padding: 16px; border: 1px solid #ccc; border-radius: 12px; background-color: #f5f5f5; margin-top: 20px; } .user-card h3 { margin: 0 0 10px; font-size: 20px; } .user-card p { margin: 6px 0; } button { margin-right: 10px; padding: 8px 16px; border: none; background-color: #0088cc; color: white; border-radius: 6px; cursor: pointer; } button:hover { background-color: #006fa3; } </style> </head> <body> <h2>Parsing Dates from JSON</h2> <p>Click below to parse a JSON string with an ISO date and convert it to a <code>Date</code> object using a reviver.</p> <button onclick="loadEvent()">Parse Event</button> <div class="user-card" id="eventCard"> <h3 id="eventTitle"></h3> <p><strong>Date:</strong> <span id="eventDate"></span></p> <p><strong>Type:</strong> <span id="typeCheck"></span></p> </div> <script> function loadEvent() { const jsonText = '{"event":"Conference","date":"2025-08-15T09:30:00Z"}'; const data = JSON.parse(jsonText, (key, value) => { if (typeof value === 'string' && /^d{4}-d{2}-d{2}Td{2}:d{2}:d{2}Z$/.test(value)) { return new Date(value); } return value; }); document.getElementById('eventTitle').textContent = data.event; document.getElementById('eventDate').textContent = data.date.toLocaleString(); document.getElementById('typeCheck').textContent = data.date instanceof Date ? 'Date object' : 'String'; document.getElementById('eventCard').style.display = 'block'; } </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console