split() w JavaScript - jak dzielić tekst bez błędów

Masz tekst złożony z kilku słów, tagów albo wartości oddzielonych przecinkami i potrzebujesz zamienić go na tablicę? W JavaScript służy do tego metoda split(), która rozdziela łańcuch znaków według wybranego separatora. Pokażę, jak działa, kiedy używać wyrażenia regularnego, jak kontrolować liczbę wyników oraz gdzie początkujący najczęściej wpadają w pułapki.

Jak działa split() i co zwraca

Podstawowa składnia jest prosta. Wywołuję metodę na tekście i przekazuję jej separator, czyli znak lub fragment, w miejscu którego łańcuch ma zostać podzielony.

const tekst = "HTML, CSS, JavaScript";
const technologie = tekst.split(",");

console.log(technologie);
// ["HTML", " CSS", " JavaScript"]

Metoda nie zmienia oryginalnego tekstu. Zwraca nową tablicę, a separator nie trafia do wyników. W powyższym przykładzie przecinki znikają, ale spacje pozostają, dlatego elementy od drugiego wpisu zaczynają się od białego znaku.

Jeżeli separator nie występuje w tekście, również otrzymasz tablicę z jednym elementem zawierającym cały łańcuch. To zachowanie jest logiczne, choć na początku może zaskoczyć, gdy kod zakłada, że zawsze powstanie kilka wyników.

Separatory, które sprawdzają się w codziennym kodzie

Przecinki, średniki i inne znaki

Najczęstszy przypadek to rozdzielanie wartości zapisanych w jednej linii. Jeśli dane mają stały format, wystarczy zwykły separator tekstowy.

const kolory = "czerwony;zielony;niebieski";
const listaKolorow = kolory.split(";");

console.log(listaKolorow);
// ["czerwony", "zielony", "niebieski"]

Przy danych pochodzących od użytkownika często usuwam nadmiarowe spacje za pomocą map() i trim(). Dzięki temu wynik jest gotowy do dalszego filtrowania albo wyświetlenia.

const wpis = "JavaScript, HTML, CSS";
const technologie = wpis
  .split(",")
  .map(element => element.trim());

console.log(technologie);
// ["JavaScript", "HTML", "CSS"]

Spacje i białe znaki

Podział po pojedynczej spacji działa tylko wtedy, gdy tekst ma dokładnie jeden odstęp między słowami. W prawdziwych danych mogą pojawić się tabulatory, przejścia do nowej linii albo kilka spacji z rzędu, dlatego lepiej użyć wyrażenia regularnego.

const zdanie = "JavaScript   jest bardzo praktyczny";
const slowa = zdanie.trim().split(/\s+/);

console.log(slowa);
// ["JavaScript", "jest", "bardzo", "praktyczny"]

Wyrażenie \s+ oznacza jeden lub więcej białych znaków. Zastosowanie trim() przed podziałem usuwa spacje z początku i końca, dzięki czemu nie powstają niepotrzebne puste elementy.

Wyrażenia regularne jako separator

Gdy separator może mieć kilka wariantów, wyrażenie regularne jest wygodniejsze niż ręczne wywoływanie metody kilka razy. Poniższy przykład rozdziela tekst po przecinku, średniku lub pionowej kresce.

const dane = "HTML, CSS; JavaScript|TypeScript";
const elementy = dane.split(/[,;|]/);

console.log(elementy);
// ["HTML", " CSS", " JavaScript", "TypeScript"]

Jeżeli chcę od razu pozbyć się spacji wokół wartości, mogę uwzględnić je w wyrażeniu albo oczyścić elementy przez trim(). Sam split() dzieli tekst, ale nie normalizuje automatycznie zawartości.

Dzielenie tekstu na linie

Tekst może pochodzić z pliku lub pola formularza, więc warto obsłużyć zarówno znak nowej linii używany w systemach uniksowych, jak i zapis spotykany w Windows.

const tekst = "Pierwsza linia\r\nDruga linia\nTrzecia linia";
const linie = tekst.split(/\r?\n/);

console.log(linie);
// ["Pierwsza linia", "Druga linia", "Trzecia linia"]

To drobny szczegół, który ma duże znaczenie przy pracy z plikami tekstowymi. W aplikacji działającej lokalnie łatwo przetestować tylko jeden format końca linii i później dostać błędne wyniki po wczytaniu danych z innego systemu.

Jak działa parametr limit

Drugi argument metody pozwala określić maksymalną liczbę elementów w zwróconej tablicy. Nie zmienia on sposobu szukania separatora, tylko sprawia, że JavaScript kończy tworzenie wyniku po osiągnięciu wskazanej liczby pozycji.

const sciezka = "projekty/javascript/split/przyklady";
const pierwszeElementy = sciezka.split("/", 2);

console.log(pierwszeElementy);
// ["projekty", "javascript"]

Limit równy 0 zwraca pustą tablicę. Jeżeli argumentu nie podasz, metoda zwróci wszystkie znalezione fragmenty.

const tekst = "A-B-C-D";

console.log(tekst.split("-", 0));
// []

console.log(tekst.split("-", 3));
// ["A", "B", "C"]

W praktyce limit przydaje się wtedy, gdy potrzebuję tylko początku ścieżki, pierwszych kilku słów albo dwóch najważniejszych części identyfikatora. Jeżeli chcę zachować resztę tekstu jako jeden fragment, samo ograniczenie liczby wyników nie zawsze wystarczy, ponieważ pozostała część zostanie pominięta.

Puste elementy i inne pułapki

Powtarzające się separatory

Każdy separator oznacza miejsce podziału, nawet jeśli między dwoma separatorami nie ma żadnego znaku. Z tego powodu powtarzające się przecinki tworzą pusty element.

const dane = "jabłko,,gruszka,";
const wynik = dane.split(",");

console.log(wynik);
// ["jabłko", "", "gruszka", ""]

To zachowanie jest przydatne, gdy puste pole ma znaczenie, na przykład w prostym formacie pozycyjnym. Jeśli puste wartości są tylko śmieciowymi danymi, trzeba je świadomie usunąć, na przykład przez filter(Boolean).

const oczyszczone = dane
  .split(",")
  .map(element => element.trim())
  .filter(Boolean);

console.log(oczyszczone);
// ["jabłko", "gruszka"]

Pusty tekst i separator

Dla pustego tekstu wynik zależy od separatora. To jeden z przypadków, które dobrze sprawdzić przed napisaniem warunku w aplikacji.

console.log("".split(","));
// [""]

console.log("".split(""));
// []

Jeżeli funkcja ma zwracać pustą listę słów dla pustego wejścia, nie polegam wyłącznie na split(). Najpierw sprawdzam dane wejściowe i dopiero potem wykonuję podział.

function podzielNaSlowa(tekst) {
  const oczyszczony = tekst.trim();

  return oczyszczony === ""
    ? []
    : oczyszczony.split(/\s+/);
}

Znaki Unicode

Wywołanie split("") dzieli tekst na jednostki UTF-16, a nie zawsze na pełne znaki widoczne dla człowieka. Przy zwykłych literach nie ma to znaczenia, ale emoji i niektóre symbole mogą zostać rozbite nieintuicyjnie.

const emoji = "😀";
console.log(emoji.split("").length);
// 2

Jeśli potrzebuję przejść po znakach kodu Unicode, częściej wybieram operator spread albo Array.from(). Nawet te rozwiązania nie rozwiązują wszystkich problemów związanych z łączonymi znakami, ale dla typowych emoji są właściwszym wyborem.

console.log([...emoji]);
// ["😀"]

console.log(Array.from(emoji));
// ["😀"]

Przeczytaj również: Math.floor() w JavaScript - Zaokrąglanie liczb bez błędów?

To nie jest pełny parser CSV

Podział po przecinku wystarczy dla prostych danych, ale nie dla prawdziwego CSV, w którym wartość może zawierać przecinek zamknięty w cudzysłowie.

const wiersz = 'Kowalski, Jan,"Warszawa, centrum"';
console.log(wiersz.split(","));
// Błędny podział wartości

W tym przypadku przecinek wewnątrz cudzysłowu nie powinien rozdzielać kolumny. Gdy dane mają taki format, korzystam z biblioteki przeznaczonej do obsługi CSV albo z parsera, który rozumie reguły cytowania. Rozbudowywanie jednego wyrażenia regularnego zwykle tylko komplikuje kod i nadal nie obsługuje wszystkich przypadków.

Split() czy inne narzędzie do pracy z tekstem

Metoda jest świetna, gdy znam miejsce podziału. Nie rozwiązuje jednak każdego problemu z tekstem. Dobieram narzędzie do celu, bo użycie split() tylko dlatego, że jest pod ręką, często prowadzi do mniej czytelnego kodu.

Przykładowo, do wyciągnięcia rozszerzenia pliku można użyć podziału po kropce, ale trzeba pamiętać o nazwach zawierających kilka kropek. Do adresów internetowych lepiej wykorzystać URL, a do parametrów zapytania URLSearchParams. Dedykowane narzędzia zwykle lepiej obsługują wyjątki i kodowanie niż ręczne dzielenie tekstu.

Jak pisać pewny kod z metodą split()

Przed użyciem metody ustalam trzy rzeczy. Po pierwsze, czy separator zawsze wygląda tak samo. Po drugie, czy puste elementy mają znaczenie. Po trzecie, czy dane są zwykłym tekstem, czy formatem z własnymi regułami, takim jak CSV albo adres URL.

• Użyj prostego separatora, gdy format danych jest stały.
• Zastosuj wyrażenie regularne przy różnych rodzajach białych znaków.
• Dodaj trim(), gdy wartości mogą mieć spacje na brzegach.
• Użyj filter(), jeśli puste elementy nie powinny trafić do wyniku.
• Nie stosuj split("") do tekstu z emoji, jeśli potrzebujesz pełnych znaków.
• Sięgnij po dedykowany parser, gdy dane mają bardziej złożoną składnię.

Sam najczęściej zaczynam od najprostszego rozwiązania, a dopiero potem dokładam czyszczenie danych. Taki kod łatwiej przeczytać i przetestować, a jednocześnie szybko widać, co jest separatorem i jaki wynik ma powstać.

Mały test przed użyciem split() w aplikacji

Najlepszym zabezpieczeniem jest kilka krótkich testów obejmujących normalny tekst, pustą wartość, brak separatora oraz powtarzające się separatory. W przypadku danych od użytkownika dodałbym również spacje na początku i końcu oraz nietypowe znaki.

const przypadki = [
  "JavaScript,HTML,CSS",
  "",
  "JavaScript",
  "JavaScript,,CSS",
  " JavaScript, CSS "
];

for (const przypadek of przypadki) {
  const wynik = przypadek
    .split(",")
    .map(element => element.trim());

  console.log(wynik);
}

Takie sprawdzenie zajmuje chwilę, a często od razu pokazuje, czy potrzebujesz trim(), filtrowania pustych elementów albo innego narzędzia. Właśnie na tych pozornie drobnych decyzjach opiera się niezawodne przetwarzanie tekstu w JavaScript.