JavaScript Advanced Tutorial (Lesson 2) Page 2/3

Substring and charAt have some similarities, the difference is that it can grab the entire substring from a word, not just letters, here is its format:

    var the_substring = the_string.substring(from, to);

"From" refers to the position of the first letter in the substring. "to" is a bit strange. It is one larger than the last position in the substring. Using this magical method, you can mark the start and end positions of the substring, subtract the "from" position by subtracting the "from" position to obtain the length of the substring:

    var the_string = "monkey";

    var clergy = the_string.substring(0,4);

    var tool = the_string.substring(3,6);

After running this code, the value of the variable clergy is "monk"; the value of the variable tool is "key".

Substrings are often used together with indexOf, dividing the string into several blocks. For example, you can extract its domain name from a given URL:

    var the_url = prompt("What's the URL?","");

    var lead_slashes = the_url.indexOf("//");

    var domain_start = lead_slashes + 2;

    var without_resource = the_url.substring(domain_start, the_url.length);

    var next_slash = without_resource.indexOf("/");

    var domain = without_resource.substring(0, next_slash);

The meaning of this code is: If you enter "/course/senior", the domain name is "" . If this method is a bit irritating to you
I'll tell you how to use the split method to simplify its execution process. But first let’s make some analysis.

The basic trick is to separate the content between the first slash and the second slash:

    var the_url = prompt("What's the URL?",""); 

This line of code asks the user for a URL. Assuming the user has entered

    "/course/senior"

    var lead_slashes = the_url.indexOf("//"); 
This line of code determines the position of the first double slash. In this example, the value of lead_slashes is 5, because the position of the double slash starts from 5.

You may think that the usual URL starts with http://, so the position of the double slash must start at 5. Why do you need to add the redundant code of indexOf? But the key to the problem is that you don't know whether users must fill in http: when filling in the URL. They may accidentally type an extra space. Perhaps the URL they typed is on an encrypted server, and the URL is "/" . When programming you must anticipate all possible problems. Therefore, we must use the indexOf method to determine the exact starting position of the double slash.

    var domain_start = lead_slashes + 2; 

This line of code is used to calculate the starting position of the first letter of the domain name. Since there is a double slash here, the starting position of the first letter of the domain name should be at the position where the double slash is located plus 2.

    var without_resource = the_url.substring(domain_start, the_string.length); 

This code extracts all characters at the beginning of the domain name. So after executing this line of code without_resource is "/course/senior"

    var next_slash = without_resource.indexOf("/"); 

This line of code calculates the position of the next slash in the string, and the content from the starting position of the string to the slash is the domain name. In this case, the position of the next slash is 13.

    var domain = without_resource.substring(0, next_slash); 

The last step is to extract everything between the starting position of the string and the next slash. In this example, the domain name is equivalent to "".

This is indeed very troublesome, and using the split method can make the process much easier.

You can use the split method to split a series of names with a limiter and then place them in an array. For example:

    var my_friends = "trixie,moxie,sven,guido,hermes";

    var friend_array = my_friends.split(",");

    for(loop=0;loop<friend_array.length;loop++)
    {
        (friend_array[loop] + " is my friend.<br>");
    }

This code divides the string my_friends into an array containing 5 elements. JavaScript can automatically create an array for you, so you don't need to use new Array().

After dividing the string into an array, we use a loop statement to write out each name. We can use the split method to simplify the domain name extraction mentioned above:

    var the_url = prompt("What's the URL?","");

    var first_split = the_url.split("//");

    var without_resource = first_split[1];

    var second_split = without_resource.split("/");

    var domain = second_split[0];

This code is much simplified and easier to understand. Let's analyze some of this code:

    var the_url = prompt("What's the URL?",""); 

Prompt the user to enter a URL, assuming that the user enters "/course/senior".
    var first_split = the_url.split("//"); 

Split the string entered by the user into two pieces: first_split[0] is "http:", first_split[1] is "/course/senior"

    var without_resource = first_split[1]; 
Extract the second element in the array, so now without_resource is "/course/senior"

    var second_split = without_resource.split("/"); 
Divide without_resource into 3 pieces:, course and senior. Now you can see what split is for?

    var domain = second_split[0]; 
Now we extract the first element in the new array and we can get the domain name.

Next we will learn the concept of related arrays, and then we will officially start learning magical cookies.