Can you consider checking for regex patterns?

(function() {
    const consoleInput = document.getElementById('console-input');
    const consoleOutput = document.getElementById('console-output');

    // Function to auto-resize the textarea
    function autoResizeTextarea() {
        consoleInput.style.height = 'auto'; // Reset the height
        consoleInput.style.height = consoleInput.scrollHeight + 'px'; // Set new height based on content
    }

    // Initial call to set the height correctly
    autoResizeTextarea();

    consoleInput.addEventListener('input', autoResizeTextarea);

    // Override console.log
    (function() {
        const oldLog = console.log;
        console.log = function(...args) {
            oldLog.apply(console, args);
            let message = '';
            args.forEach(arg => {
                message += `<pre>${JSON.stringify(arg, null, 2)}</pre>`;
            });
            appendOutput(message, 'log');
        };
    })();

    // Append output to console
    function appendOutput(message, type) {
        const outputDiv = document.createElement('div');
        outputDiv.classList.add('output', type);
        outputDiv.innerHTML = message;
        consoleOutput.appendChild(outputDiv);
        consoleOutput.scrollTop = consoleOutput.scrollHeight;
    }

    // Execute code
    consoleInput.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            const code = consoleInput.value;
            consoleInput.value = '';
            executeCode(code);
            autoResizeTextarea(); // Reset textarea height after execution
        }
    });

    function executeCode(code) {
        try {
            const result = eval(code);
            if (result !== undefined) {
                appendOutput(`<pre>${JSON.stringify(result, null, 2)}</pre>`, 'result');
            }
        } catch (error) {
            appendOutput(`<pre>${error}</pre>`, 'error');
        }
    }
})();

---

body {
    margin: 0;
    padding: 0;
    background-color: #1e1e1e;
    font-family: 'Consolas', monospace;
    color: #dcdcdc;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.console-container {
    background-color: #252526;
    border: 1px solid #333;
    border-radius: 5px;
    width: 80%;
    max-width: 800px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.console-output {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    font-size: 14px;
}

.console-output div {
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.3s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.console-input {
    background-color: #1e1e1e;
    color: #dcdcdc;
    border: none;
    padding: 15px;
    font-size: 14px;
    outline: none;
    resize: none;
    height: auto;
    max-height: 150px;
    overflow-y: auto;
}

.console-input::-webkit-scrollbar {
    width: 8px;
}

.console-input::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.console-input::-webkit-scrollbar-thumb {
    background: #3e3e42;
    border-radius: 4px;
}

.console-input::placeholder {
    color: #6a9955;
}

.console-input:focus {
    background-color: #1b1b1b;
}

@keyframes slideUp {
    from {
        height: 0;
    }
    to {
        height: 100px;
    }
}

.output.log pre {
    color: #9CDCFE;
}

.output.result pre {
    color: #B5CEA8;
}

.output.error pre {
    color: #F44747;
}

pre {
    margin: 0;
    font-family: 'Consolas', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #252526;
}

::-webkit-scrollbar-thumb {
    background: #3e3e42;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a5e;
}

---

In the website:
console.log(/test/g);

Output: {}

The output shall be: /test/g
But with dark shade of red