String Encode and Decode - JS Solution

Editorial

Editorial solutions and visualizations are prepared with care, but we do not guarantee 100% accuracy or completeness. Please use your own judgment to verify results. Visucodize is not responsible for decisions made based on this content.

const LEFT = 'left', LEFT_COLOR = 'gold';
const RIGHT = 'right', RIGHT_COLOR = 'blue';
const STR_MATCH = 'str_match', STR_MATCH_COLOR = 'green';
const LEN_MATCH = 'len_match', LEN_MATCH_COLOR = 'orange';

function visMainFunction(inputStrings) {
    initClassProperties();
    explanationAndColorSchemaNotifications();
    const inputVis = new VisArray(...inputStrings).options({ label: 'Input Strings' });

    // Encoding Step
    const encodedString = encode(inputStrings);
    notification(`
        ✅ <b>Encoded the List of Strings:</b><br>
        🧩 Each string is represented as <b>length#string</b> and concatenated one after another.<br>
        The <b>length</b> represents the number of characters in the string and the <b>#</b> separator ensures we can later extract the correct length.
        For example, <code>["hello", "world"]</code> becomes <code>"5#hello5#world"</code>.<br>
        This structure guarantees we can always identify where each string begins and ends during decoding.<br>
        📜 <b>Final Encoded String:</b> "${encodedString}"
    `);

    // Decoding Step
    notification(`📌 <b>Step 2: Decoding Back</b><br>
        We will now take the single encoded string and rebuild the original list.`);
    const decodedStrings = decode(encodedString);
    notification(`✅ <b>Decoded Strings:</b> ${JSON.stringify(decodedStrings)}`);

    return decodedStrings;
}

/**
 * Encodes a list of strings to a single string.
 * @param {string[]} strs
 * @returns {string}
 */
function encode(strs) {
    return strs.map(str => str.length + '#' + str).join('');
}

/**
 * Decodes a single string to a list of strings.
 * @param {string} str
 * @returns {string[]}
 */
function decode(str) {
    startBatch();
    const visStr = new VisArray(...str).options({ label: 'Encoded Str' });
    notification(`🔍 <b>Decoding the encoded string:</b> "${str}"`);
    
    let decodedStrings = new VisArray();
    let left = 0;
    let right = 0;
    
    makeVisVariable(left).registerAsIndexPointer(visStr, LEFT);
    makeVisVariable(right).registerAsIndexPointer(visStr, RIGHT);
    endBatch();

    while (left < str.length) {
        startPartialBatch();

        // Move `right` to find the `#` separator
        right = left;
        notification(`
            📌 First, we move ${makeColoredSpan("right", RIGHT_COLOR)} forward, starting from ${makeColoredSpan("left", LEFT_COLOR)}, until we find the <b>#</b> separator.<br>
            Everything between ${makeColoredSpan("left", LEFT_COLOR)} and that <b>#</b> is the length, written as text.
        `);
        while (str[right] !== '#') {
            right += 1;
        }

        // Extract the length
        const length = parseInt(str.slice(left, right), 10);
        highlightMatch(visStr, left, right-1, LEN_MATCH);
        notification(`
            🔎 We just identified the length of the next string: <b>${makeColoredSpan(length, LEN_MATCH_COLOR)}</b>.<br>
            The section highlighted in ${makeColoredSpan(LEN_MATCH_COLOR, LEN_MATCH_COLOR)} shows the characters from ${makeColoredSpan("left", LEFT_COLOR)}
            up to (but not including) ${makeColoredSpan("right", RIGHT_COLOR)}, interpreted as a number.
        `);

        // Extract the string using the computed length
        const nextStringStart = right + 1 + length;
        const decodedStr = str.slice(right+1, nextStringStart);
        highlightMatch(visStr, right+1, nextStringStart-1, STR_MATCH);
        notification(
            `✅ Now we take exactly <b>${length}</b> characters right after the <b>#</b><br>. Those characters highlighted in (${makeColoredSpan(STR_MATCH_COLOR, STR_MATCH_COLOR)}) 
            form the actual decoded string: <code>"${decodedStr}"</code>.`
        );

        decodedStrings.push(decodedStr);
        clearHighlights(visStr, left, nextStringStart-1);

        left = nextStringStart;
        notification(
            `➡️ We now advance ${makeColoredSpan("left", LEFT_COLOR)} to the position right after this decoded string. <br> This is where the next encoded pair 
            (<b>length#string</b>) will start.`
        );

        endBatch();
    }

    notification(`🏁 <b>Decoding complete.</b> We have rebuilt all original strings in order.`);
    return decodedStrings;
}

function initClassProperties() {
    setClassProperties(LEFT, {
        backgroundColor: LEFT_COLOR
    });

    setClassProperties(RIGHT, {
        borderColor: RIGHT_COLOR
    });

    setClassProperties(STR_MATCH, {
        backgroundColor: STR_MATCH_COLOR
    });

    setClassProperties(LEN_MATCH, {
        backgroundColor: LEN_MATCH_COLOR
    });
}

function highlightMatch(arr, start, end, highlightClass=STR_MATCH) {
    startBatch();
    for (let index = start; index <= end; index++) {
        arr.makeVisManagerForIndex(index).addClass(highlightClass);
    }
    endBatch();
}

function clearHighlights(arr, start, end) {
    startBatch();
    for (let index = start; index <= end; index++) {
        arr.makeVisManagerForIndex(index).removeAllClasses();
    }
    endBatch();
}

function explanationAndColorSchemaNotifications() {
    explanationNotification();
    notification(`
    🎨 <b>Color Schema</b><br>
        ${makeColoredSpan(LEFT_COLOR + ' background', LEFT_COLOR)} — <b>left</b> pointer: marks the start of the current segment being processed.<br>
        ${makeColoredSpan(RIGHT_COLOR + ' border', RIGHT_COLOR)} — <b>right</b> pointer: moves forward to locate the <b>#</b> separator.<br>
        ${makeColoredSpan(STR_MATCH_COLOR + ' background', STR_MATCH_COLOR)} — <b>Extracted String</b>: characters that belong to the actual decoded string.<br>
        ${makeColoredSpan(LEN_MATCH_COLOR + ' background', LEN_MATCH_COLOR)} — <b>Extracted Length</b>: digits representing the length of the next string before the <b>#</b>.<br><br>
    `);
}

Approach

We want to turn a list of strings (for example ["hello", "world"]) into a single string that we can later decode back into the exact same list. To do this reliably, we need a way to know where each original string starts and ends — even when the string itself contains digits, symbols, or repeated characters.

Encoding Strategy

We encode each string as <length>#<string>, where:

length is the number of characters in the current original string being decoded (written in decimal, since we’re working with text). It tells us exactly how many characters belong to this specific original string within the encoded data.
The original string might even contain #, but decoding still works safely.
This is because, within the portion of the encoded string that represents the current string, the first # we encounter is guaranteed to be the separator — only the length appears before it in the segment encoding that string. Any # characters belonging to the original string itself come after this separator and are treated as part of the actual string content.
string is the original string itself.

Then we just concatenate these chunks one after another with no extra delimiter.

Example:
"hello" → 5#hello
"world" → 5#world
Final encoded result: 5#hello5#world

Why This Encoding Is Safe

The key is that # gives us a clear boundary between "this part is the length" and "this part is the actual content." When decoding, we can scan forward until we see #, and everything before it is guaranteed to be just the number (the length). After that, we know exactly how many characters to read for the string.

This solves common edge cases:

The original string might start with digits (like "12345").
The original string might even contain #.
The original string might be long (2-digit, 3-digit, 10-digit length, etc.).

All of these cases are still unambiguous, because we do not guess where the string ends — we trust the length we just parsed. The # only ends the length portion, not the string.

Decoding Strategy

We walk through the encoded string using two moving indices: one called left and one called right.

Initialize left at the start of the encoded string.
Set right to the same position as left, then move it forward until you find #.
The substring from left up to (but not including) right represents the length as text. For example, "12" means the next string has length 12.
Convert that length text into a number L.
Read exactly L characters immediately after the #; this substring is the decoded string.
Move left so it points to the position immediately after the decoded string — this marks the beginning of the next encoded chunk to process.

Continue this process until left reaches the end of the encoded string. At that point, all original strings have been successfully rebuilt in their original order.

Why This Works

This method is:

Deterministic: There is never any ambiguity about where one string ends and the next begins.
General: It supports any string content — including digits, punctuation, #, Unicode — and scales naturally to long strings, since lengths can have multiple digits (e.g. "42#...", "105#...").
Efficient: Both encoding and decoding run in linear time O(N) where N is the total number of characters across all strings. We only scan what we actually need.

Intuition Recap

We’re basically turning the list of strings into a self-describing stream: each piece says “I am this long, here is my body.” Because we always read the declared length instead of “guessing boundaries,” decoding can reconstruct the original list exactly, with no information loss.

Time Complexity

O(N), where N is the total number of characters in all strings combined.
Each character in the encoded string is processed once during encoding and once during decoding. The length of the encoded string remains O(N) since the added separators and length digits grow only with the number of strings.

Space Complexity

O(N), where N is the total number of characters in all strings combined.
The encoded string and the reconstructed list together occupy space proportional to N. The extra separators and length digits add only a small overhead per string, so the total encoded size remains O(N).

Input-1

String Encode and Decode - JS Solution

Solution code

Solution explanation

Solution explanation

Approach

Encoding Strategy

Why This Encoding Is Safe

Decoding Strategy

Why This Works

Intuition Recap

Time Complexity

Space Complexity