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:
- startsWith() and endsWith() method
- search() method
- indexOf() method
- substring() method
- substr() method
- slice() method
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></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:
