HTML Code Escaper

Was bedeutet "Escapen"?

Wenn du HTML-Code auf einer Webseite zeigen willst, interpretiert der Browser ihn normalerweise als echtes HTML. Um das zu verhindern, ersetzt du bestimmte Zeichen durch ihre HTML-Entities:

< wird zu <
> wird zu >
& wird zu &

" wird zu "
' wird zu '

So wird aus <div> der Text <div>, der dann als lesbarer Code angezeigt wird.

Je nach Umfang kann das sehr zeitaufwendig werden, daher gibt es hier dieses kleine Tool.

Code Escaper

HTML Escaper

Script

Das Script wird am Ende der Seite vor dem schließenden </body> eingefügt.

Entweder direkt inline in <script></script>, oder mit Verweis auf ein externes Script <script src="/assets/js/code-escaper.js" defer></script>

JavaScript

<script>
    document.querySelectorAll('.html-escaper').forEach(block => {
        const input = block.querySelector('.code-input');
        const output = block.querySelector('.code-output');
        const escapeBtn = block.querySelector('.escape-btn');
        const copyBtn = block.querySelector('.copy-btn');

        function escapeHTML(str) {
            return str
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        escapeBtn.addEventListener('click', () => {
            const escaped = escapeHTML(input.value);
            output.value = escaped;
            output.focus();
            output.select();

            escapeBtn.classList.add('copied');
            escapeBtn.querySelector('.copy-text').textContent = 'Fertig!';
            setTimeout(() => {
                escapeBtn.classList.remove('copied');
                escapeBtn.querySelector('.copy-text').textContent = 'Escapen';
            }, 1500);
        });

        copyBtn.addEventListener('click', () => {
            output.select();
            document.execCommand('copy');

            copyBtn.classList.add('copied');
            copyBtn.querySelector('.copy-text').textContent = 'Kopiert!';
            setTimeout(() => {
                copyBtn.classList.remove('copied');
                copyBtn.querySelector('.copy-text').textContent = 'Kopieren';
            }, 1500);
        });
    });
</script>

HTML

<div class="code-block html-escaper">
    <div class="code-header">
        <span class="code-lang">HTML Escaper</span>
        <div class="code-actions">
            <button class="code-copy escape-btn">
                <span class="copy-icon">
                    <img src="/assets/icons/escape.svg" alt="Escape Code Icon" width="16" height="16">
                </span>
                <span class="copy-text">Escapen</span>
            </button>
            <button class="code-copy copy-btn">
                <span class="copy-icon">
                    <img src="/assets/icons/clipboard.svg" alt="Copy Icon" width="16" height="16">
                </span>
                <span class="copy-text">Kopieren</span>
            </button>
        </div>
    </div>

    <textarea class="code-input" placeholder="Füge hier deinen Code ein..."></textarea>
    <textarea class="code-output" placeholder="Hier erscheint der escaped Code..."
        readonly></textarea>
</div>

CSS

.code-block {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 1rem 0;
    overflow: hidden;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.code-lang {
    font-family: var(--font-code);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.code-actions {
    display: flex;
    gap: 0.5rem;
}

.code-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 150ms ease;
}

.code-copy:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.code-copy:active {
    transform: scale(0.95);
}

.code-copy.copied {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.copy-icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.copy-icon img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(89%) sepia(2%) saturate(158%) hue-rotate(182deg) brightness(85%) contrast(87%);
    transition: filter 150ms ease;
}

.code-copy:hover .copy-icon img,
.code-copy.copied .copy-icon img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.code-input,
.code-output {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mono);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 1rem;
    border: none;
    resize: vertical;
    min-height: 100px;
}

.code-output {
    border-top: 1px solid var(--border-color);
}

Was bedeutet "Escapen"?

Code Escaper

Script

HTML

CSS

Mehr aus JavaScript