String Utilities
Common string manipulation functions that every developer needs but always has to look up. Copy-paste ready JavaScript/TypeScript snippets.
capitalize
Capitalize the first letter of a string.
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
capitalize("hello world"); // "Hello world"
capitalize("javaScript"); // "JavaScript"
capitalizeWords
Capitalize the first letter of every word.
const capitalizeWords = (str) =>
str.replace(/\b\w/g, (char) => char.toUpperCase());
capitalizeWords("hello world"); // "Hello World"
capitalizeWords("the quick brown fox"); // "The Quick Brown Fox"
camelCase
Convert a string to camelCase.
const camelCase = (str) =>
str
.toLowerCase()
.replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase());
camelCase("hello world"); // "helloWorld"
camelCase("background-color"); // "backgroundColor"
camelCase("user_first_name"); // "userFirstName"
kebabCase
Convert a string to kebab-case.
const kebabCase = (str) =>
str
.match(/[A-Z]{2,}(?=[A-Z][a-z]+\d*|\b)|[A-Z]?[a-z]+\d*|[A-Z]|\d+/g)
.join("-")
.toLowerCase();
kebabCase("helloWorld"); // "hello-world"
kebabCase("backgroundColor"); // "background-color"
kebabCase("HTMLParser"); // "html-parser"
snakeCase
Convert a string to snake_case.
const snakeCase = (str) =>
str
.match(/[A-Z]{2,}(?=[A-Z][a-z]+\d*|\b)|[A-Z]?[a-z]+\d*|[A-Z]|\d+/g)
.join("_")
.toLowerCase();
snakeCase("helloWorld"); // "hello_world"
snakeCase("backgroundColor"); // "background_color"
snakeCase("userFirstName"); // "user_first_name"
slugify
Convert a string to a URL-friendly slug.
const slugify = (str) =>
str
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, "")
.replace(/[\s_-]+/g, "-")
.replace(/^-+|-+$/g, "");
slugify("Hello World!"); // "hello-world"
slugify(" The Quick Brown Fox") // "the-quick-brown-fox"
slugify("React & TypeScript"); // "react-typescript"
truncate
Truncate a string to a given length and add an ellipsis.
const truncate = (str, maxLength, suffix = "...") =>
str.length > maxLength ? str.slice(0, maxLength - suffix.length) + suffix : str;
truncate("Hello, World!", 8); // "Hello..."
truncate("Short", 10); // "Short"
truncate("Hello, World!", 8, " →"); // "Hello →"
reverse
Reverse a string.
const reverse = (str) => str.split("").reverse().join("");
reverse("hello"); // "olleh"
reverse("abcde"); // "edcba"
isPalindrome
Check if a string is a palindrome (ignores case and non-alphanumeric).
const isPalindrome = (str) => {
const clean = str.toLowerCase().replace(/[^a-z0-9]/g, "");
return clean === clean.split("").reverse().join("");
};
isPalindrome("racecar"); // true
isPalindrome("A man a plan a canal Panama"); // true
isPalindrome("hello"); // false
countWords
Count the number of words in a string.
const countWords = (str) => str.trim().split(/\s+/).filter(Boolean).length;
countWords("Hello World"); // 2
countWords(" The quick brown fox") // 4
countWords(""); // 0
stripHtml
Remove all HTML tags from a string.
const stripHtml = (str) => str.replace(/<[^>]*>/g, "");
stripHtml("<h1>Hello</h1> <p>World</p>"); // "Hello World"
stripHtml("<b>Bold</b> text"); // "Bold text"
padStart / padEnd
Pad a string to a given length (native JS but often forgotten).
// Pad a number with leading zeros
String(7).padStart(3, "0"); // "007"
String(42).padStart(5, "0"); // "00042"
// Pad with custom character
"hi".padEnd(5, "."); // "hi..."
"hi".padStart(5, "-"); // "---hi"
repeat
Repeat a string n times.
const repeat = (str, n) => str.repeat(n);
repeat("ab", 3); // "ababab"
repeat("ha", 4); // "hahahaha"
escapeHtml
Escape special HTML characters to prevent XSS.
const escapeHtml = (str) =>
str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
escapeHtml('<script>alert("xss")</script>');
// "<script>alert("xss")</script>"
countOccurrences
Count how many times a substring appears in a string.
const countOccurrences = (str, sub) =>
str.split(sub).length - 1;
countOccurrences("hello world hello", "hello"); // 2
countOccurrences("aaaa", "aa"); // 2
Summary
| Function | Input | Output |
|---|---|---|
capitalize | "hello" | "Hello" |
capitalizeWords | "hello world" | "Hello World" |
camelCase | "hello-world" | "helloWorld" |
kebabCase | "helloWorld" | "hello-world" |
snakeCase | "helloWorld" | "hello_world" |
slugify | "Hello World!" | "hello-world" |
truncate | "Hello World", 8 | "Hello..." |
reverse | "hello" | "olleh" |
isPalindrome | "racecar" | true |
countWords | "hello world" | 2 |
stripHtml | "<b>hi</b>" | "hi" |
escapeHtml | '<script>' | '<script>' |