Learn String Manipulation Using jQuery String Functions

jqueryThe JavaScript language recognizes a string as a built-in object and provides a rich set of functions on the string object for storing and manipulation of text. These functions can also be used from within jQuery. Hence, the string functions are referred to as jQuery string functions.

Take a course at Udemy.com and learn jQuery programming from the beginning.

Character Positional Operations

These are string functions that operate at the level of characters positioned within a string. The charAt() method, for example, returns the character at the specified index of a string. In a similar fashion, the charCodeAt() method returns the Unicode of the character at the specified index of a string. The index of the first character is 0; the second character’s index is 1, and so on.

Example:

var str = "HELLO WORLD";

var res1 = str.charAt(1);

var res2 = str.charCodeAt(0);

The value of res1 is “E” and the value of res2 is 72.

Search within a String

There are many techniques for searching specific sub-strings within a string.

The indexOf() method returns the position of the first occurrence of a specified value in a string. Similarly, the lastIndexOf() method returns the position of the last occurrence of a specified value in a string. Both these methods are case sensitive and returns -1 if the value to search fails.

Example:

var str = "Hello to you world, welcome to the universe.";

var p1 = str.indexOf("you");

var p2 = str.lastIndexOf("to");

The value of p1 is 10 and the value of p2 is 29.

The match() method searches a string for a match against a regular expression, and returns the matches as an Array object.

Example:

var str = "We were in a TRAIN, that was passing through the plains while outside it was raining";

var res = str.match(/ain/gi);

The example mentioned above performs a global, case-insensitive search for “ain” and returns the value: [AIN,ain,ain] contained within the res variable.

The replace() method searches a string for a specified value or expression and inserts a new string (specified in the arguments of the method call) in place of the specified search target. The result is stored in a new variable; the target string is not modified by this method.

Example:

var str = "Canada is a cold country";

var res = str.replace("Canada", "Siberia");

After these operations, the value of res is: “Siberia is a cold country”.

The search() method searches a string for a specified value or regular expression and returns the position of the match. The search() method returns -1 if the search fails. The preceding example about Siberia being a cold country will be used for the following example:

var n = str.search("cold");

The result of n will be: 12.

Learn jQuery from scratch through a course at Udemy.com

Splitting and Joining of Strings

The split() method is used to divide a string into an array of substrings, and returns a new array. The original string is not affected by this method.

Example:

var str = "How are you doing today?";

var res1 = str.split("o");

var res2 = str.split(" ", 3);

The value of res1 will be an array with the elements: [H,w, are, y,u d,ing, t,day,?]. For res2, the number of elements that are present in the array is limited by the second parameter to the split() method. The value of res2 is therefore an array with the elements: [How,are,you].

The concat() method has the opposite effect of the split() method and is used to join two or more strings. This method does not change the existing strings, but returns a new string containing the text of the joined strings.

Example:

var str2 = "Hello I am jQuery ";

var str3 = "world";

var res = str2.concat(str3);

The result of res will be “Hello I am jQuery world”!

Sub-String Extraction

The slice() method extract parts of a string and returns the extracted parts to a new string. The method takes two parameters that represent the start and end positions within the original string and anything in- between is sent to a new string.

Example:

var str = "Hello world!";

var res = str.slice(1,5);

The result of res will be: ello. The character at the end position does not form a part of the string.

The substr() method extracts parts of a string. The extraction begins with the character at the specified index (substr()’s first parameter) and then returns the specified number of characters (the second parameter of substr()). The method takes two parameters: the first one is the position of the sub-string within the original string from which to begin storing. The second parameter is an integer value signifying how many characters to extract. Using “Hello world!” again, the following example will demonstrate the substr() method.

var res = str.substr(1, 4)

The value of res is: ello.

The substring() method is the same as the slice() method with an additional caveat; if the start position is greater than the end position, this method will swap the two arguments, meaning str.substring(1,5)  will equal str.substring(5,1).

For another “Hello world!” example:

var res1 = str.substring(1,5);

var res2 = str.substring(5,1);

The result of both res1 and res2 will be: ello.

Learn the fundamentals of jQuery through a course at Udemy.com

Change the Case of a String

The toUpperCase() method converts a string to uppercase letters. Lowercase letters are applied to a string through the toLowerCase() method. The original string is not affected by either of these methods because the result is loaded into a different variable.

Example:

var str = "Hello World!";

var res1 = str.toUpperCase();

var res2 = str.toLowerCase();

The value of res1 is “HELLO WORLD!” and the value of res2 is “hello world!”

The toLocaleUpperCase() method converts a string to uppercase letters, according to the host’s current locale. The opposite is achieved through the toLocaleLowerCase() method that converts a string to lowercase letters, according to the host’s current locale.

In general, these methods return the same results as the toUpperCase() and the toLowerCase() methods, respectively. However, for some locales where language conflicts with regular Unicode case mappings (such in Turkey, i.e. Turkish) the results may vary.

Other Methods

The trim() method removes whitespace from both sides of a string.

Example:

var str = "       Hello World!        ";

var str2 = str.trim();

The value of str2 will be: “Hello World!”

Lastly, jQuery introduces a concept called htmlString. htmlString is a string that is used to represent one or more DOM elements. Typically, the htmlString is inserted into a document. When the htmlString is passed as an argument of the jQuery() function, the string is identified as HTML if it starts with “<tag … >)” and is parsed as such until the final “>” character.

Example:

$("<b>hello</b>").appendTo("body");

The preceding statement is equivalent to the DOM structure derived from:

Conclusion

As explained above, JavaScript offers a rich set of functions for performing really useful string manipulations at your disposal. You can combine the same with the power of jQuery to address really complex business scenarios that can be executed on the client-side as well.