How to check a string starts/ends with a specific string in jQuery ?
Last Updated :
12 Jul, 2025
JavaScript provides a lot of string methods that check whether a string is a substring of another 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:
JavaScript startsWith() and endsWith() method: It checks whether a string starts or ends with the specific substring.
Syntax:
if (str.startsWith(startword) && str.endsWith(endword)) {
// case sensitive
console.log("Yes, The string " + str + " starts with "
+ startword + " and ends with " + endword);
}
JavaScript search() method: It checks whether a particular string is contained in another string and returns the starting index of that substring.
Syntax:
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);
}
JavaScript indexOf() method: As the name suggests, it finds the starting index of a substring in the string.
Syntax:
if (str.indexOf(startword)==0 &&
str.indexOf(endword)==stringlength-endwordlength) {
console.log("Yes, The string " + str + " starts with "
+ startword + " and ends with " + endword);
}
JavaScript substring() method: It returns a string present between start and end index.
Syntax:
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);
}
JavaScript substr() method: It is similar to substring() method but takes start index and length of substring as parameters.
Syntax:
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);
}
JavaScript slice() method: This method returns the slices of string between any two indices in a string.
Syntax:
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.
HTML
<!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>
let str = document.getElementById("text").innerText;
stringlength = str.length;
let startword = "";
let 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
let h2 = document.getElementById("startswith");
h2.innerHTML =
"Yes, The string " + str + " starts with "
+ startword + " and ends with " + endword;
}
else {
let 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) {
let h2 = document.getElementById("indexOf");
h2.innerHTML =
"Yes, The string " + str + " starts with "
+ startword + " and ends with " + endword;
}
else {
let 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
let h2 = document.getElementById("search");
h2.innerHTML = "Yes, The string " + str +
" starts with " + startword +
" and ends with " + endword;
}
else {
let 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) {
let h2 = document.getElementById("substring");
h2.innerHTML =
"Yes, The string " + str + " starts with "
+ startword + " and ends with " + endword;
}
else {
let 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) {
let h2 = document.getElementById("substr");
h2.innerHTML =
"Yes, The string " + str + " starts with "
+ startword + " and ends with " + endword;
}
else {
let 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) {
let h2 = document.getElementById("slice");
h2.innerHTML =
"Yes, The string " + str + " starts with " +
startword + " and ends with " + endword;
}
else {
let h2 = document.getElementById("slice");
h2.innerHTML =
"No, The string " + str +
" doesn't start and endwith the given words";
}
}
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing