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

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 = "!!!".

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

Example:

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:

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:

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:

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.

Eample:

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:

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.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to know that a string starts/ends 
        with a specific string in jQuery? 
    </title> 
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </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

Recommended Posts: