Learning How to Get jQuery Substrings

jqueryvsjavascriptA substring is a string that can be found in another string. It can come before (prefix), after (suffix) or within (infix) the string. To get substrings in jQuery, you only need to use two functions: substr() and substring().

Overview of jQuery

jQuery is a concise and fast library in the JavaScript framework which aims to follow the concept of “less code, more action”. It shortens HTML functions like document traversing, animating, event handling and Ajax interactions to allow rapid web development. It is used by more than 80% of the 10,000 most-visited sites, which makes it the most popular JavaScript library in use to date.

New to jQuery? Learn more with a Udemy class.

What are substrings and what are they for?

They are strings that occur in another string. The set that contains the substring is called a superstring. For example:

String: “Hello world!”

Some of the substrings that can be found in the given string are: “ell”, “worl” and “lo”. This makes the whole of “Hello world!” the superstring of the substring “ell”.

Substrings may be used in many ways. For example, if you need to parse an email address “samplemail@samplehost.com“ and get only the user’s ID or name, you will need to remove the “@samplehost.com” substring from the whole set to get “samplemail”. Aside from this, it can also be used in creating encryption algorithms for security purposes.

How to obtain a substring in jQuery

There really isn’t anything special that you need to do to obtain substrings using jQuery. You can choose from two JavaScript functions which are substring() and substr(). What’s the difference? We’ll discuss it below.

Since a string is simply an array of characters, getting its substrings can be done by using the array’s indices and length. The difference between the two is the parameters they accept and use to acquire the substrings you need. One takes a starting index and an end index and the other takes a starting index and a desired length.

substring()

To use this function, you must follow the syntax: substring(from, to).

  • from – This is a required parameter. It denotes the index from where the substring should start.
  • to – This is an optional parameter. It marks the index where the substring should end. If no value is passed, the substring will be taken from the start index up to the end of the superstring.

Example with from and to:

var str = "Hello world!";

var res = str.substring(1,4)

Not familiar with jQuery tools? Learn how to use Jquery tool here

str is the variable holding the string value “Hello world!” and res is the variable we assigned the substring we obtained using the code str.substr(1,4). By entering 1 as the first parameter, you are declaring that the substring you’re getting will start from index 1. Indices start from 0 therefore index 1 is the character “e”. As for the second parameter, which is 4, you have specified that the substring ends in index 4 which is the character “o”. Obtaining all the characters from index 1 thru 4, you get the substring “ello”. So if you print the value of res on-screen, you will get “ello”.

Example with from only:

var str = "Hello world!";

var res = str.substring(4)

If you use this instead and only pass one parameter, the compiler will assume that the end of the substring is the same as the end of the superstring. In other words, everything else. Extracting the characters from index 4 up to the end, the value of res would be “o world!”

substr()

Instead of using start and end indices, this one uses length to determine up to what point in the string you want your substring to be. The syntax for this function is: substr(start, length).

  • start – This is a required parameter. It denotes the index from where the substring should start.
  • length – This is an optional parameter. It denotes the length of your desired substring. Based from it, the compiler will count how many indices from the start index to include in the substring. If no value is passed, all the rest of the string will be included.

Example with start and length:

var str = "jQuery example";

var res = str.substr(2,8)

str is the variable holding the value of the string “jQuery example” and res is the container for the value we get from using the code str.substr(2,8). With the first parameter being 2, you are telling the compiler to start the substring from index 2. And giving it the second parameter, which is 8, as the length, you are saying that the end of the substring is 8 indices to the right, including the starting point.

 j  Q  u  e  r  y     e  x  a  m  p  l   e

0   1   2   3  4  5   6  7  8   9  10  11 12 13

The character in index 2 is “u” and the desired length of the substring being 8, counting 8 characters to the right including the starting point will give you the index 9 as the end point (the space is also included).  Therefore, the value of res is “uery exa” which has 8 characters.

Learn jQuery: An In-depth Course For Beginners

Example with start only:

var str = “jQuery example”;

var res = str.substr(7)

The substr() function with only one parameter basically works the same as the substring() with only one parameter as well. You give it a starting point, and it extracts the rest of the string. So if you start from index 7, obtaining the rest of the characters would give you the substring “example”.

Now that you have an idea on both ways to extract substrings in jQuery, you can now use them whichever way you’d like. You know the only difference between the two, which is their parameters, so it is up to you which one you’d like to use.