Strings and Text — Cutting, Finding and Replacing Characters

1.A string is a row of characters

As we saw in Lesson 2, a string is a value wrapped in quotes. Double quotes "apple" and single quotes 'apple' make exactly the same string, and a template string (template literal), wrapped in backticks, is used when you want to drop a variable's value into the text. Check what a template string looks like in the code below. Whichever quotes you use, sticking to one style within a program makes it easier to read.

Because a string is a row of characters in order, you can take out one character at a time by its number (index), just like the arrays in Lesson 6. The first character is number 0, and s.length is the length counted in characters. So the last character is s[s.length - 1], and nowadays you can also count from the end with s.at(-1). Asking for a number that does not exist gives undefined, not an error — again just like arrays.

There is one big difference from arrays. Once a string is created, the characters inside it cannot be changed. If you try to fix one character with s[0] = "z", code running in strict mode — as this playground does — throws a TypeError. That is why every method in this lesson leaves the original string alone and returns a 'new string'. To use the result, you must store it in a variable.

const name = "Alex";
const fruit = 'apple';
const msg = `Hi ${name}, ${fruit} x3`;
console.log(msg);
console.log(msg.length);
console.log(msg[0], msg.at(-1), msg[99]);

Hi Alex, apple x3
17
H 3 undefined

let s = "  hello  ";
s.trim();
console.log("[" + s + "]");
s = s.trim();
console.log("[" + s + "]");

[  hello  ]
[hello]

2.The character-count trap — accents and emoji

length is not 'the number of characters you see'. It is the number of units JavaScript uses to store the string (UTF-16 code units). Luckily, plain English letters, digits, spaces and punctuation are one unit each, and so are common accented letters such as é, so "café".length is 4 and "hello".length is 5, just as they look. Most everyday Chinese, Japanese and Korean characters are also one unit each.

Emoji are different. Many emoji are stored as two units, so "😀".length is 2. Emoji built by joining several pieces into one picture, like a hand with a skin tone, can come out as 4 or more. If you spread a string with [...s], it is split into code points, so a single 😀 counts as 1, but a joined emoji still counts as however many pieces it has. To count exactly by the shapes you see on screen, you need a separate tool such as Intl.Segmenter.

Accented letters are not always safe either. The same é can arrive in a decomposed form (NFD): a plain e followed by a separate combining accent mark. Then its length is 2. File names copied from some programs or systems come in this form, so two words that look identical can give false with ===. Korean text has the same issue: one syllable can be stored as three separate pieces. In these cases, bring both sides to one form with s.normalize("NFC") before comparing.

One more thing: character count and byte count are different. In UTF-8, the encoding most files and networks use, an English letter is 1 byte, é is 2 bytes, most Chinese, Japanese and Korean characters are 3 bytes and many emoji are 4 bytes. If an input field is limited in bytes, say 'up to 90 bytes', you must not count with length. In short: for ordinary text, counting with length is fine, but once emoji, decomposed letters or byte limits are involved, decide first what exactly you are counting.

console.log("café".length, "hello".length);
console.log("😀".length, [..."😀"].length);
console.log("👍🏽".length, [..."👍🏽"].length);

4 5
2 1
4 2

const a = "é";
const b = a.normalize("NFD");
console.log(a.length, b.length);
console.log(a === b);
console.log(a === b.normalize("NFC"));
const bytes = new TextEncoder().encode("café");
console.log(bytes.length);

1 2
false
true
5

3.Cutting and finding — `slice`, `indexOf`, `includes`

s.slice(start, end) cuts from the start number up to 'just before' the end number and returns it as a new string. Leave out the end and it cuts to the last character; give a negative number and it counts from the end. So s.slice(0, 3) is the first three characters and s.slice(-4) is the last four. The rule that the end number is not included is the same feeling as writing i < n in the loops of Lesson 4, and it means the length is simply 'end − start'.

For finding, three methods do most of the work. s.indexOf("text") returns the position where the text first appears, or -1 if it is not there. If you don't need the position and only want to know whether it is there, s.includes("text") returns true/false, which drops straight into the conditions of Lesson 3. startsWith and endsWith check whether the string begins or ends with that text — for example, whether a file name ends with ".csv".

Using the result of indexOf directly as a condition is a trap. If the text is at the very start, the result is 0, and as we saw in Lesson 3, 0 is falsy, so if (s.indexOf("x")) is false exactly when it is at the front. When you only want to know whether it is there, use includes; if you use indexOf, compare with !== -1. These methods are also case-sensitive, so "Apple".includes("apple") is false. To ignore case, convert both sides with toLowerCase() before searching.

const phone = "010-1234-5678";
console.log(phone.slice(0, 3));
console.log(phone.slice(-4));
console.log(phone.slice(4, 8));

010
5678
1234

const file = "2026_sales.csv";
console.log(file.indexOf("_"));
console.log(file.indexOf("x"));
console.log(file.includes("sales"));
console.log(file.endsWith(".csv"));
console.log("Apple".includes("apple"));
const t = "Apple".toLowerCase();
console.log(t.includes("apple"));

4
-1
true
true
false
true

const email = "[email protected]";
const at = email.indexOf("@");
if (at === -1) {
  console.log("Not an email address");
} else {
  console.log(email.slice(0, at));
}

alex

4.Split, join and tidy — `split`, `join`, `trim`

Half of text processing is split and join. s.split(",") cuts the string at each comma and returns an array, and arr.join("-") does the opposite, joining an array into one string. Once a string becomes an array, you can use everything from Lesson 6 — length, map, filter — so 'split → work on the array → join again' becomes the basic flow. The automation examples in Lesson 9 are built on this flow too.

split has some edges worth knowing. Splitting the empty string "" gives not an empty array but an array holding one empty string, [ '' ]. Two commas in a row leave an empty string between them. So if you count words with split(" ").length, an empty input counts as 1 and places with doubled spaces inflate the count. That is why you should always test edge cases as well.

trim() removes spaces, tabs and line breaks from both ends (spaces in the middle stay). Values typed by people often arrive with extra spaces at the ends, so it is a good habit to pass them through trim() before comparing or saving. toUpperCase() and toLowerCase() change the case of letters; characters that have no case, such as digits, punctuation or Chinese characters, stay as they are. padStart(3, "0") fills the front with "0" until the length is 3, turning "7" into "007". It is handy for showing numbers or times with a fixed number of digits.

const line = "Alex,apple,3";
const cols = line.split(",");
console.log(cols);
console.log(cols.length, cols[1]);
console.log(cols.join(" / "));

[ 'Alex', 'apple', '3' ]
3 apple
Alex / apple / 3

console.log("".split(","));
console.log("a,,b".split(","));
console.log("  Hi  ".trim().toUpperCase());
console.log("7".padStart(3, "0"));
console.log("no.42 ok".toUpperCase());

[ '' ]
[ 'a', '', 'b' ]
HI
007
NO.42 OK

• split("") (splitting on the empty string) cuts the string into single units. Emoji can break into pieces, so when you split into characters, [...s] is safer.
• split, trim and toUpperCase all return new values. The original string stays the same.
• To split into lines, use split("\n"). Files made on Windows may have one extra invisible character at the end of each line, so it is safer to trim() each line after splitting.

5.Replacing — `replace` and `replaceAll`

s.replace("find", "new") replaces only the first match. To replace every match, use replaceAll. This difference often leads to 'why did only the first one change?', so whenever you write replacing code, test it with an input where the same text appears two or more times. Both methods leave the original string untouched and return a new, changed string.

Replacing also works as 'deleting'. If the replacement is the empty string "", the matched parts disappear. For example, "010-1234-5678".replaceAll("-", "") is "01012345678". Going the other way, to add hyphens to a digits-only phone number, it is cleaner to cut it with slice and put it together with join. Whatever you do, the original stays as it is and a new value is made, so it is easy to put the before and after side by side and compare.

const s = "apple-pear-apple";
console.log(s.replace("apple", "plum"));
console.log(s.replaceAll("apple", "plum"));
console.log(s);

plum-pear-apple
plum-pear-plum
apple-pear-apple

const raw = "010-1234-5678";
const digits = raw.replaceAll("-", "");
console.log(digits);
const parts = [
  digits.slice(0, 3),
  digits.slice(3, 7),
  digits.slice(7),
];
console.log(parts.join("-"));

01012345678
010-1234-5678

6.A taste of regular expressions — finding by shape

So far we have searched for 'exactly this text'. When you want to search by shape — 'a run of digits', 'a place where several spaces follow each other' — you use a regular expression (regex). In JavaScript you write the pattern between two / characters, and a g after it means 'all matches, not just the first'. Regular expressions are a small language of their own, so here we only look at a few common pieces, enough to read them.

\d is one digit, \s is one whitespace character (space, tab or line break), and a + after something means 'one or more in a row'. So /\d+/g means 'every run of digits' and /\s+/g means 'every run of whitespace'. match returns the found pieces as an array — and note that when nothing is found it returns null, not an empty array. test only tells you whether something was found, as true/false.

Regular expressions are powerful but hard to read, and a small mistake makes them match the wrong places or miss the right ones. There are two rules of thumb. First, if includes, split or replaceAll can do the job, use them, and reach for a regex only when you really need one. Second, whether a regex came from an AI or you wrote it yourself, check it in a regex tester with several examples that should match and several that should not before you use it.

const memo = "ordered 3, returned 12";
console.log(memo.match(/\d+/g));
console.log("no digits".match(/\d+/g));
console.log(/\d/.test(memo));

[ '3', '12' ]
null
true

const messy = "  apple   pear  plum ";
const clean = messy.trim().replace(/\s+/g, " ");
console.log("[" + clean + "]");
const masked = "010-1234-5678".replace(/\d/g, "*");
console.log(masked);

[apple pear plum]
***-****-****