JavaScript

How To Index, Split, and Manipulate Strings in JavaScript

In JavaScript, a string can be a single character or a collection of multiple characters and these characters can be either numbers or letters, or symbols. Each character is accessible by its index number. This article will address how to index a string, and how to split a string in JavaScript. Moreover, we will learn some string manipulation techniques as well.

Indexing of a String in JavaScript

The index number of any string starts from 0, and each character corresponds to an index number which means the first character of any string corresponds at index 0, the second character will correspond to the 1st index and the last character let’s say the ‘nth’ character will correspond at the ‘n-1’ index number.

For instance, consider the below-given string to understand how a character is indexed in JavaScript:

Here, at index 0 we have a character “T”, at index 1 we have “H”, a blank space at index number 4, and at final index “20”, we have “Y”, which means it doesn’t matter whether it’s a blank space or an alphabet each character corresponds to an index.

How to Check the Index of a Character in JavaScript

We can utilize a method “indexOf()” to check the index number of a character. The indexOf() method returns the first occurrence of a character that appears multiple times:

let string = "THIS IS NEW YORK CITY";

console.log("The index of 'C' is " , string.indexOf("C"));

The output will return the index where ‘C’ is placed:

How to Access a Character in JavaScript

In JavaScript we can access any character with the help of square brackets “[ ]” or “charAt()” method:

let string = "THIS IS NEW YORK CITY";

console.log("Searched character is ", "THIS IS NEW YORK CITY"[6]);

console.log("Searched character is ", "THIS IS NEW YORK CITY".charAt(6));

In this example we access a character that is placed at index 6 using both methods:

In the output we will show a character ‘S’ which is located at index 6:

How to Split a String in JavaScript

JavaScript offers a very helpful “split()” method to break a string. Consider an example to understand the working of the “split()” method, in this example, we will break a string by a “space”:

let string = "THIS IS NEW YORK CITY";

console.log("Break the string from whitespaces ", string.split(" "));

The whole string will be split from whitespaces:

As a result, we will get an array of 5 elements:

Now, we can access each element of the array with its index.

How to Convert a String in LowerCase in JavaScript

JavaScript provides a built-in method to convert the whole string into lower case letters:

let string = "THIS IS NEW YORK CITY";

console.log("Convert the string into Lower Case : ", string.toLowerCase());

In this code, we utilize “toLowerCase()” method which will convert each character of the string into a lower case. The resultant output will be:

How to Convert a String in UpperCase in JavaScript

In JavaScript, a built-in method “toUpperCase()” is utilized to convert the string characters into Upper Case:

let string = "this is new york city";

console.log("Convert the string into Upper Case : ", string.toUpperCase());

The above-given code will provide the following output:

How to Replace a Substring in JavaScript

We can replace a substring of any string using “replace()” method:

let string = "this is new york city";

console.log("Convert the string into Upper Case : ", string.replace("this is" , "welcome to"));

In this code, we want to replace “this is” with “welcome to”, the output of the above-given code will be:

How to concatenate two strings in JavaScript

In JavaScript, we can combine multiple strings with the concat() method:

let string1 = "this is new york city..";

let string2 = " yes it is!!";

console.log("Combine string1 and string2 : ", string1.concat(string2));

We have two strings string1 and string2 we can combine these two using the “concat()” method as:

The output will display a concatenated string:

Conclusion:

Strings are a very well-known and commonly used data type in any computer language, and there are numerous functionalities that we can perform on them. This article provides a precise understanding of how to index, split, and manipulate the strings in JavaScript. We discussed the major methods to manipulate the string and to better understand all these methods we considered some examples and implemented them in JavaScript.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.