Vezérlőpult
8. Szövegkezelés · Építőkövek

2. blokk · Építőkövek · 8. fejezet

Szövegkezelés

Egy szerver adatainak nagy része szöveg: URL-ek, fájlnevek, e-mail-címek, keresőkifejezések, a felhasználó által beírt bármi. A JavaScript gazdag eszköztárat ad a szövegek vizsgálatára és átalakítására: keresés, kivágás, csere, darabolás, kitöltés. Ebben a fejezetben végigvesszük a leggyakoribb string-metódusokat — és a legfontosabb szabályt: a szöveg nem változik meg, minden metódus újat ad vissza.

Élő gyakorló12 feladat automatikus ellenőrzéssel≈ 1 óra

Tanulási célok

1Hossz, indexelés, bejárás

A szöveg (string) karakterek sorozata idézőjelek ("…"), aposztrófok ('…') vagy backtick (`…`) között. A szövegeken — a tömbökhöz hasonlóan — metódusok hívhatók a pont után. A .length a karakterek számát adja, az egyes karaktereket pedig 0-tól induló indexszel érjük el:

let szo = "alma";
console.log(szo.length);              // 4
console.log(szo[0]);                 // "a" — az első karakter
console.log(szo.charAt(1));          // "l" — ugyanaz, metódussal
console.log(szo[szo.length - 1]);    // "a" — az utolsó karakter
console.log(szo[10]);                // undefined — nincs ilyen index

Ha minden karakterre kell valamit tenni, a 4. fejezetből ismert for…of a legkényelmesebb — nem kell indexet számolni:

let szo = "körte";
let db = 0;
for (let betu of szo) {
  if ("aeiouáéíóöőúüű".includes(betu)) {   // magánhangzó?
    db++;
  }
}
console.log(db);   // 2
ℹ️ SZÖVEG ÉS TÖMB — ROKONOK

A length, az indexelés, a for…of, az indexOf, az includes és a slice a tömbön és a szövegen ugyanúgy működik. Ami különbözik: a szöveg elemeit nem írhatod át (szo[0] = "A" nem csinál semmit), és nincs push/pop.

2Kis- és nagybetű

let nev = "Anna Kovács";
console.log(nev.toUpperCase());   // "ANNA KOVÁCS"
console.log(nev.toLowerCase());   // "anna kovács"

Az ékezetes betűkkel is jól bánnak. A leggyakoribb használat: kis/nagybetűre nem érzékeny összehasonlítás — mindkét szöveget ugyanarra az esetre hozzuk, és úgy vetjük össze:

let kereses = "EGÉR";
let termek = "Vezeték nélküli egér";
console.log(termek.toLowerCase().includes(kereses.toLowerCase()));   // true

3Keresés a szövegben

MetódusMit ad visszaPélda
includes(x)true/false — tartalmazza-e"alma".includes("lm")true
startsWith(x)ezzel kezdődik-e"alma".startsWith("al")true
endsWith(x)erre végződik-e"kep.png".endsWith(".png")true
indexOf(x)az első előfordulás indexe, vagy -1"alma".indexOf("a")0
lastIndexOf(x)az utolsó előfordulás indexe, vagy -1"alma".lastIndexOf("a")3
let fajl = "jelentes.2026.pdf";
console.log(fajl.indexOf("."));          // 8  — az első pont
console.log(fajl.lastIndexOf("."));      // 13 — az utolsó pont (a kiterjesztés előtt)
console.log(fajl.indexOf("docx"));       // -1 — nincs benne
console.log(fajl.endsWith(".pdf"));      // true
✅ includes VAGY indexOf?

Ha csak azt kérdezed, benne van-e, az includes olvashatóbb. Az indexOf akkor kell, ha hol van — pl. hogy utána a slice-nak megadd a pozíciót. Mindegyik kis/nagybetű-érzékeny.

4Részlet kivágása: slice és substring

A slice(kezdet, vég) egy részletet ad vissza: a kezdő index beletartozik, a vég már nem. A vég elhagyható (a szöveg végéig), és negatív index a végéről számol:

let szo = "JavaScript";
console.log(szo.slice(0, 4));    // "Java"   (0,1,2,3 indexű karakterek)
console.log(szo.slice(4));       // "Script" (a 4. indextől a végéig)
console.log(szo.slice(-6));      // "Script" (az utolsó 6 karakter)
console.log(szo.slice(2, -2));   // "vaScri"

Az indexOf + slice páros a klasszikus „vágd le a … utáni részt" feladat megoldása:

let fajl = "jelentes.2026.pdf";
let pont = fajl.lastIndexOf(".");
console.log(fajl.slice(pont + 1));   // "pdf" — a kiterjesztés
console.log(fajl.slice(0, pont));    // "jelentes.2026" — a név

A substring(kezdet, vég) majdnem ugyanaz, két különbséggel: a negatív számot 0-nak veszi, és ha a kezdet nagyobb a végnél, megcseréli őket. A gyakorlatban a slice bőven elég — azt használd.

5Csere és tisztítás

A replace csak az első előfordulást cseréli, a replaceAll mindet:

let mondat = "alma, alma, körte";
console.log(mondat.replace("alma", "banán"));      // "banán, alma, körte"
console.log(mondat.replaceAll("alma", "banán"));   // "banán, banán, körte"
console.log(mondat.replaceAll(" ", ""));           // "alma,alma,körte" — törlés = csere üresre

A trim() a szöveg két végéről vágja le a szóközöket (és a sortöréseket); a trimStart() csak az elejéről, a trimEnd() csak a végéről:

let bemenet = "   Anna@Példa.hu  ";
console.log(bemenet.trim());        // "Anna@Példa.hu"
console.log(bemenet.trimStart());   // "Anna@Példa.hu  "
console.log(bemenet.trimEnd());     // "   Anna@Példa.hu"

// a tipikus tisztító lánc: vágás + kisbetűsítés
let email = bemenet.trim().toLowerCase();
console.log(email);                 // "anna@példa.hu"
⚙️ HOL JÖN ELŐ NODE-BAN?

Egy Express API-ban minden, ami kintről jön, szöveg: az URL darabjai (/termekek/egerpad), a lekérdezés (?kereses=Egér ), az űrlapmezők, a fájlnevek. Feldolgozás előtt tisztítani kell: req.query.kereses.trim().toLowerCase(), aztán includes-szal keresünk a terméknevekben; egy fájlnévről endsWith(".png")-vel döntjük el, kép-e; az e-mailt includes("@")-val ellenőrizzük durván. Ezek a metódusok naponta többször kellenek szerveroldalon.

6Szöveg ↔ tömb: split és join

A split(elválasztó) egy szöveget tömbbé darabol az elválasztó mentén; a tömb join(összekötő) metódusa (6. fejezet) pedig visszafűzi szöveggé:

let csv = "alma,körte,szilva";
let lista = csv.split(",");          // ["alma", "körte", "szilva"] — tömb!
console.log(lista.length);            // 3
console.log(lista[1]);                // "körte"

console.log(lista.join(" - "));       // "alma - körte - szilva"
console.log(lista.join(""));          // "almakörteszilva"

console.log("alma".split(""));        // ["a", "l", "m", "a"] — karakterekre bontás
console.log("egy kis alma".split(" ")); // ["egy", "kis", "alma"] — szavakra bontás

Ez a páros nyit ajtót a tömb-eszköztárnak: a szöveget tömbbé alakítod, ott rendezel, szűrsz, megfordítasz — majd join-nal visszaalakítod. Például megfordítani egy szöveget három lépésben:

let szo = "alma";
let forditott = szo.split("").reverse().join("");   // a reverse() a tömböt fordítja meg
console.log(forditott);   // "amla"
⚠️ TÖBB SZÓKÖZ = ÜRES DARABOK

A "a b".split(" ") eredménye ["a", "", "b"] — a két szóköz közé üres szöveg kerül. Szószámlálásnál ezért előbb trim(), aztán a darabok közül csak a nem üreseket számold.

7Formázás: repeat, padStart, padEnd

A repeat(n) a szöveget n-szer ismétli. A padStart(hossz, kitöltő) és a padEnd(hossz, kitöltő) addig tölti ki a szöveget elöl vagy hátul, amíg el nem éri a kívánt hosszt — ez a klasszikus „vezető nulla" és a táblázatos igazítás eszköze:

console.log("=".repeat(20));                   // "===================="
console.log("ab".repeat(3));                   // "ababab"

let ora = 9, perc = 5;
let ido = String(ora).padStart(2, "0") + ":" + String(perc).padStart(2, "0");
console.log(ido);                              // "09:05"

console.log("Egér".padEnd(12, ".") + "6990 Ft");     // "Egér........6990 Ft"
console.log("Monitor".padEnd(12, ".") + "45990 Ft"); // "Monitor.....45990 Ft"
✅ SZÁMBÓL ELŐBB SZÖVEG

A padStart szöveg-metódus — számon nem működik. Alakítsd át előbb: String(9) vagy (9).toString() vagy "" + 9. Ha a szöveg már hosszabb a kért hossznál, változatlan marad.

8A szöveg nem változik — és más apróságok

Megváltoztathatatlanság

A legfontosabb szabály: a string-metódusok sosem módosítják az eredeti szöveget, hanem új szöveget adnak vissza. Az eredményt el kell tárolni (vagy rögtön felhasználni):

let nev = "anna";
nev.toUpperCase();             // ez NEM változtatja meg a nev-et!
console.log(nev);              // "anna" — maradt kisbetűs

nev = nev.toUpperCase();       // az eredményt vissza kell írni a változóba
console.log(nev);              // "ANNA"
⛔ A LEGGYAKORIBB HIBA

Sokan azt hiszik, a bemenet.trim() „megtisztítja" a bemenet változót. Nem! A sor önmagában nem csinál semmit. Helyesen: bemenet = bemenet.trim(); — vagy egy új változó: const tiszta = bemenet.trim();.

Escape-szekvenciák és többsoros szöveg

A \ (backslash) után álló karakter különleges jelentést kap: \n sortörés, \t tabulátor, \" idézőjel az idézőjeles szövegben, \\ maga a backslash:

console.log("Első sor\nMásodik sor");          // két sorba írja
console.log("Név:\tAnna");                     // tabulátorral
console.log("Azt mondta: \"szia\"");           // Azt mondta: "szia"
console.log("C:\\Users\\anna");                // C:\Users\anna

// template literál: többsoros, behelyettesítéssel — nem kell \n
let nev = "Anna", db = 3;
let uzenet = `Kedves ${nev}!
A kosaradban ${db} termék van.
Üdv: a webshop`;
console.log(uzenet);

Szövegek összehasonlítása

Az === pontos egyezést néz (kis/nagybetű is számít). A < és > karakterkód szerint hasonlít — ez az angol ábécénél „ábécérend", de a nagybetűk a kisbetűk elé, az ékezetesek pedig minden ékezet nélküli után kerülnek. Magyar szövegek rendezéséhez a localeCompare való:

console.log("alma" < "körte");      // true  — a < k
console.log("Zoli" < "anna");       // true  — a nagy Z kódja kisebb a kis a-nál!
console.log("árvíz" < "zebra");     // false — az á kódja nagyobb a z-nél

// localeCompare: -1 ha előbb van, 1 ha később, 0 ha egyezik — a magyar szabályok szerint
console.log("árvíz".localeCompare("zebra", "hu"));   // -1 — az á az a-hoz tartozik, a z előtt
console.log("alma".localeCompare("alma", "hu"));     // 0

Szám ↔ szöveg (ismétlés)

Az URL-ből és az űrlapról érkező számok is szövegek. A 2. fejezetből ismerős átalakítók:

console.log(Number("42"));         // 42
console.log(Number("  42 "));      // 42 — a szóközöket elnézi
console.log(Number("42 Ft"));      // NaN — nem szám
console.log(parseInt("42 Ft"));    // 42 — az elejéről kiolvassa, amennyit tud
console.log(String(42) + 1);        // "421" — szöveg + szám = összefűzés!

9Élő kód — próbáld ki!

Kísérletezz a string-metódusokkal! Írd át a szövegeket, próbálj ki negatív indexet a slice-ban, fűzz több metódust egymás után. A kimenet úgy jelenik meg, ahogy Node-ban a console.log mutatná.

JavaScript-gyakorló

Válassz mintát vagy írj sajátot — majd Futtatás (Ctrl+Enter) ↓

A kimenet itt jelenik meg…

10Feladatok

Szövegfeldolgozó függvények — csak az eddig tanultakkal (ciklus, elágazás, tömb-alapok, string-metódusok). Minden feladatban egy adott nevű függvényt írsz; az Ellenőrzés több bemenettel meghívja, és a visszatérési értéket hasonlítja a várttal. Figyelj a szélső esetekre: üres szöveg, egy karakter, több szóköz.

Gyakorló feladatok

⭐ alap · ⭐⭐ haladó · ⭐⭐⭐ kihívás — a haladásod ebben a böngészőben megmarad.

Kész: 0 / 0
✅ HOGYAN ÁLLJ NEKI EGY SZÖVEGES FELADATNAK?

1) Döntsd el, karakterenként (for…of) vagy szavanként (split(" ")) kell-e dolgozni. 2) Kell-e előbb „normalizálni" — trim, toLowerCase? 3) Ha új szöveget építesz, indulj üres szövegből és +=-zel fűzd; ha tömböd van, join-nal zárd. 4) Ne felejtsd: az eredményt vissza kell adni (return)!

11Összegzés

  1. length a karakterszám; a karakterek s[i] vagy charAt(i) indexszel érhetők el (0-tól), az utolsó s[s.length - 1]; for…of végigjár.
  2. Kis/nagybetű: toUpperCase, toLowerCase — érzéketlen összehasonlításhoz mindkét oldalt hozd ugyanarra.
  3. Keresés: includes, startsWith, endsWith (logikai); indexOf, lastIndexOf (index vagy -1).
  4. Kivágás: slice(kezdet, vég) — a vég nem tartozik bele, negatív index a végéről számol.
  5. Csere és tisztítás: replace (első), replaceAll (mind), trim / trimStart / trimEnd.
  6. Szöveg ↔ tömb: split darabol, join összefűz; split("") karakterekre bont.
  7. Formázás: repeat, padStart/padEnd (előbb String()-gé alakíts!).
  8. A szöveg megváltoztathatatlan: minden metódus új szöveget ad, az eredményt tárold el. Escape: \n \t \" \\; többsoros szöveghez template literál. Magyar rendezéshez localeCompare.
➡️ KÖVETKEZŐ LÉPÉS

Ezzel megvannak az építőkövek: függvények, tömbök, objektumok, szövegek. A 3. blokk a modern JavaScriptről szól — a következő fejezetben azokat az ES6+ szintaktikai elemeket tanuljuk meg (destrukturálás, spread, ?., ??), amelyekkel minden Express-kód tele van, és amelyek nélkül egy mai kódbázist olvasni sem lehet.