Zuerst brauchen wir ein paar Variablen. Eine für’s gesamte Keypad, eine um den aktuellen Klein-/Großschreibmodus festzuhalten und eine um uns den letzten gedrückten Button zu merken.

Dann loopen wir durch den Input-String.

Wir suchen das jeweils aktuelle Zeichen in unserem Keypad, darum gehen wir mit einem weiteren Loop durch jeden Button im Keypad.

Und prüfen, ob unser aktuelles Zeichen auf dem aktuellen Button ist.

Wenn ja, speichern wir uns den Index, den das Zeichen auf dem Button hat.

Wenn der aktuelle Button der gleiche ist, wie der letzte, fügen wir schon mal ein Leerzeichen zum aktuellen Button-Zwischenergebnis hinzu.

Wenn sich das aktuelle Zeichen in der oberen Reihe des Buttons befindet (also z.B. eine Zahl ist), setzen wir den letzten Button zurück und fügen den aktuellen Button, gefolgt von einem - zum aktuellen Button-Zwischenergebnis hinzu. In diesem Fall können wir das Zwischenergebnis speichern und zum nächsten Element springen.

Wenn das aktuelle Zeichen ein Kleinbuchstabe ist UND wir uns im Großbuchstaben-Modus befinden ODER ein Großbuchstabe ist UND wir uns NICHT im Großbuchstabenmodus befinden, switchen wir den Großbuchstabenmodus ins Gegenteil und fügen ein # zum aktuellen Button-Zwischenergebnis hinzu.

Am Ende des inneren Loops hängen wir noch den Button so oft ans aktuelle Button-Zwischenergebnis an, wie der Index des aktuellen Zeichens auf dem Button (also bei einem h, mit Index 2 auf dem Button 4: 2x4 → 44).

Nicht vergessen den letzten Button für die nächste Runde auf den aktuellen zu setzen.

Nach dem inneren Loop speichern wir das aktuelle Button-Zwischenergebnis.

Nach dem äußeren Loop geben wir das Endergebnis als String zurück.

Puh, ganz schön komplex... Aber ich hab dich gewarnt!

function isLowerCaseLetter(char: string): boolean {
  return /[a-z]/.test(char);
}

function isUpperCaseLetter(char: string): boolean {
  return /[A-Z]/.test(char);
}

Dann geht’s los mit der Hauptfunktion!

export function sendMessage(message: string): string {

const keypad = [
  "1.,?!",
  "2abc",
  "3def",
  "4ghi",
  "5jkl",
  "6mno",
  "7pqrs",
  "8tuv",
  "9wxyz",
  "*'-+=",
  "0 ",
  "#",
];

let isUpperCaseMode = false;
let lastButton = "";

  return [...message]
    .map((char) => {
      let currResult = "";

Dafür wandeln wir den String als Erstes in ein Array um. Da wir für jedes Zeichen im Input-String etwas zurück haben wollen, bietet sich hier ein .map() an.

Und da das Array, das wir danach erhalten (fast) schon unserem Endergebnis entspricht, können wir unser return-Statement schon hier platzieren.

Außerdem brauchen wir noch eine Variable um unsere Zwischenergebnisse für das jeweils aktuelle Zeichen zu speichern.

      for (const button of keypad) {

Hier entscheide ich mich für einen for...of-Loop, damit wir ihn ggf. vorzeitig beenden können.

        if (button.includes(char.toLowerCase())) {

const currButton = button[0];
const keyIndex = button.indexOf(char.toLowerCase());
const isTopRow = !keyIndex;

Außerdem erstelle ich mir ein paar weitere (optionale) Variablen zur besseren Lesbarkeit.

Sollte der keyIndex 0 sein, ist unser gesuchtes Zeichen das erste auf dem Button. Also das Zeichen in der oberen Reihe. Da 0 falsy ist, gibt !keyIndex true zurück. In allen anderen Fällen false.

if (currButton === lastButton) currResult += " ";

Wenn ja, fügen wir das Leerzeichen zu unserem aktuellen Zwischenergebnis hinzu.

if (isTopRow) {
  lastButton = "";
  return currResult + currButton + "-";
}

Wenn ja, können wir den inneren Loop beenden und für das aktuelle Zeichen im Input-String unser bisheriges Zwischenergebnis plus den aktuellen Button und ein - zurückgeben.

Da es laut Regel für das Halten eines Buttons der letzte Button keine Rolle spielt, setzen wir ihn vorher noch zurück.

          if (
            (isLowerCaseLetter(char) && isUpperCaseMode) ||
            (isUpperCaseLetter(char) && !isUpperCaseMode)
          ) {

            isUpperCaseMode = !isUpperCaseMode;
            currResult = "#";
          }

Außerdem ersetzen wir dann unser bisheriges Zwischenergebnis mit einem #.

currResult += currButton.repeat(keyIndex);

Die Anzahl der Wiederholungen ergibt sich aus der Position, also dem Index, auf dem Button.

          lastButton = currButton;
        }
      }

      return currResult;
    })

    .join("");
}

Zurückgegeben haben wir das Ganze schon oben mit dem return-Statement vor dem .map()-Loop.

Wie gesagt, dat Ding war ziemlich komplex und eher etwas anspruchsvoller als ein Level 6. Aber: Nur die Harten komm’ in’ Garten!

Fragen?