Essential JavaScript String Manipulation Techniques
Locating and Retrieving Characters
To find the position of a specific sequence within a string, indexOf() and lastIndexOf() are utilized. Both return the numeric index of the first match found. indexOf() scans forward from the start, while lastIndexOf() scans backward. They accept an optional starting index; if omitted, the search begins at position zero or the end of the string, respectively. If the substring is absent, both methods return -1.
For direct character access, charAt() retrieves the single character at a specified index, whereas charCodeAt() returns the corresponding UTF-16 code unit value.
const message = "frontend_development";
const searchChar = "_";
console.log(message.indexOf(searchChar)); // Outputs: 8
console.log(message.lastIndexOf("e")); // Outputs: 18
console.log(message.charAt(4)); // Outputs: "e"
console.log(message.charCodeAt(4)); // Outputs: 101
Extracting Substrings
Three primary methods handle substring extraction: slice(), substring(), and substr(). While substr() is considered legacy, slice() and substring() remain standard.
Both slice(start, end) and substring(start, end) return the characters between start and end (excluding end). The key distinction lies in negative index handling:
slice()treats negative values as offsets from the end of the string.substring()converts negative arguments to0and automatically swaps the arguments ifstartis greater thanend.
const dataset = "alpha-beta-gamma";
// Standard extraction
console.log(dataset.slice(6, 10)); // "beta"
console.log(dataset.substring(6, 10)); // "beta"
// Negative indices
console.log(dataset.slice(-5, -1)); // "amma" (-5 => index 12, -1 => index 16)
console.log(dataset.substring(-5, 8)); // "alpha-be" (negative becomes 0, swaps to (0, 8))
The substr(start, length) method specifies a starting position and the number of characters to extract. A negative start value is treated as an offset from the end.
const identifier = "v2.4.1-release";
console.log(identifier.substr(-7, 6)); // "release"
Dividing and Replacing Text
To convert a string into an array, split(separator) breaks the original text at each occurrence of the specified delimiter. Passing an empty string isolates every individual character.
const rawData = "itemA,itemB,itemC,itemD";
const parts = rawData.split(",");
console.log(parts); // ["itemA", "itemB", "itemC", "itemD"]
console.log("JS".split("")); // ["J", "S"]
The replace(target, replacement) method generates a new string where the first matched target sequence is substituted with replacement.
const logEntry = "Error 503: Service Unavailable";
const sanitized = logEntry.replace("503", "404");
console.log(sanitized); // "Error 404: Service Unavailable"
Adjusting Text Case
Converting character casing is straightforward with built-in methods. toUpperCase() transforms all alphabetic characters to uppercase, while toLowerCase() does the opposite.
const userInput = "Admin_Panel";
console.log(userInput.toUpperCase()); // "ADMIN_PANEL"
console.log(userInput.toLowerCase()); // "admin_panel"