Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to check a string starts/ends with a specific string in jQuery ?

  • Last Updated : 21 Jul, 2021

JavaScript provides a lot of string methods that check whether a string is a substring of other string. So, jQuery wouldn’t be necessary at all to perform this task. However, we will cover all the different ways of checking whether a string starts or ends with a string: 

Let’s consider a string str = “Welcome to GEEKS FOR GEEKS!!!”. Now we have to find whether the string str starts with startword = “Welcome” and ends with endword = “!!!”.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Approaches: 
startsWith() and endsWith() method: It checks whether a string starts or ends with the specific substring.

Example:  



Javascript




if (str.startsWith(startword) && str.endsWith(endword)) {
 
    // case sensitive
    console.log("Yes, The string " + str + " starts with "
            + startword + " and ends with " + endword);
}

search() method: It checks whether a particular string is contained in another string and returns the starting index of that substring.

Example:  

Javascript




if (str.search(startword)==0 &&
    str.search(endword)==stringlength-endwordlength ) {
 
    // case sensitive
    console.log("Yes, The string " + str + " starts with "
            + startword + " and ends with " + endword);
}

indexOf() method: As the name suggests, it finds the starting index of a substring in the string.

Example: 

Javascript




if (str.indexOf(startword)==0 &&
    str.indexOf(endword)==stringlength-endwordlength) {
             
    console.log("Yes, The string " + str + " starts with "
            + startword + " and ends with " + endword);
}

substring() method: It returns a string present between start and end index.

Example:  

Javascript




if(str.substring(0, startwordlength)==startword
        && str.substring(stringlength-endwordlength,
        stringlength)==endword) {
         
    console.log("Yes, The string " + str + " starts with "
            + startword + " and ends with " + endword);
}

substr() method: It is similar to substring() method but takes start index and length of substring as parameters.

Example: 

Javascript




if(str.substr(0, startwordlength)==startword
        && str.substr(stringlength-endwordlength,
        endwordlength)==endword) {
 
    console.log("Yes, The string " + str + " starts with "
            + startword + " and ends with " + endword);
}

slice() method: This method returns the slices of string between any two indices in a string.

Example:  

Javascript




if(str.slice(0, startwordlength)==startword
        && str.slice(stringlength-endwordlength,
        stringlength)==endword) {
 
    console.log("Yes, The string " + str + " starts with "
            + startword + " and ends with " + endword);
}

Let’s take an example of text in h1 element and check whether it starts and ends with the given substring. 

Javascript




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to know that a string starts/ends
        with a specific string in jQuery?
    </title>
 
    </script>
</head>
 
<body>
    <h1 id="text">
        Welcome To GEEKS FOR GEEKS!!!
    </h1>
 
    <h2>
        Check whether a word is present
        in the above sentence
    </h2>
 
    <input type="text" id="startkey">
    <input type="text" id="endkey">
    <button onclick="MyFunction()"> Check </button>
 
    <h2> startsWith() and endsWith() method </h2>
    <h2 id="startswith"> </h2>
 
    <h2> indexOf() method </h2>
    <h2 id="indexOf"></h2>
 
    <h2> search() method </h2>
    <h2 id="search"></h2>
 
    <h2> substring() method </h2>
    <h2 id="substring"></h2>
 
    <h2> substr() method </h2>
    <h2 id="substr"> </h2>
 
    <h2> slice() method </h2>
    <h2 id="slice"></h2>
 
 
    <script>
        var str = document.getElementById("text").innerText;
        stringlength = str.length;
        var startword = "";
        var endword = "";
        function MyFunction() {
            startword = document.getElementById("startkey").value;
            endword = document.getElementById("endkey").value;
            console.log(startword);
            console.log(endword)
            startwordlength = startword.length;
            endwordlength = endword.length;
 
            if (str.startsWith(startword) && str.endsWith(endword)) {
                // case sensitive
                var h2 = document.getElementById("startswith");
                h2.innerHTML =
                    "Yes, The string " + str + " starts with "
                    + startword + " and ends with " + endword;
            }
            else {
                var h2 = document.getElementById("startswith");
                h2.innerHTML =
                    "No, The string " + str +
                    " doesn't start and endwith the given words";
            }
            //Js
            if (str.indexOf(startword) == 0 && str.indexOf(
                endword) == stringlength - endwordlength) {
                var h2 = document.getElementById("indexOf");
                h2.innerHTML =
                    "Yes, The string " + str + " starts with "
                    + startword + " and ends with " + endword;
            }
            else {
                var h2 = document.getElementById("indexOf");
                h2.innerHTML =
                    "No, The string " + str +
                    " doesn't start and endwith the given words";
            }
            //Js
            if (str.search(
                startword) == 0 && str.search(endword)
                    == stringlength - endwordlength) {
 
                // case sensitive
                var h2 = document.getElementById("search");
                h2.innerHTML = "Yes, The string " + str +
                        " starts with " + startword +
                        " and ends with " + endword;
            }
            else {
                var h2 = document.getElementById("search");
                h2.innerHTML = "No, The string " + str +
                    " doesn't start and endwith the given words";
            }
            //Js
            if (str.substring(
                0, startwordlength) == startword && str.substring(
                    stringlength - endwordlength, stringlength) == endword) {
                var h2 = document.getElementById("substring");
                h2.innerHTML =
                    "Yes, The string " + str + " starts with "
                    + startword + " and ends with " + endword;
            }
            else {
                var h2 = document.getElementById("substring");
                h2.innerHTML =
                    "No, The string " + str +
                    " doesn't start and endwith the given words";
            }
 
            if (str.substr(
                0, startwordlength) == startword && str.substr(
                    stringlength - endwordlength, endwordlength) == endword) {
                var h2 = document.getElementById("substr");
                h2.innerHTML =
                    "Yes, The string " + str + " starts with "
                    + startword + " and ends with " + endword;
            }
            else {
                var h2 = document.getElementById("substr");
                h2.innerHTML =
                    "No, The string " + str +
                    " doesn't start and endwith the given words";
            }
            if (str.slice(
                0, startwordlength) == startword && str.slice(
                    stringlength - endwordlength, stringlength) == endword) {
                var h2 = document.getElementById("slice");
                h2.innerHTML =
                    "Yes, The string " + str + " starts with " +
                    startword + " and ends with " + endword;
            }
            else {
                var h2 = document.getElementById("slice");
                h2.innerHTML =
                    "No, The string " + str +
                    " doesn't start and endwith the given words";
            }
        }
    </script>
</body>
 
</html>

Output: 


 




My Personal Notes arrow_drop_up
Recommended Articles
Page :