Теги: javascript, символ, поиск, методы, строка, индекс, проверка, строковые функции, слово, indexof
Для поиска слова, символа или любой другой подстроки в строке в языке программирования JavaScript используют хорошо известный метод indexOf. В результате проверки метод возвращает позицию первого совпадения, если же совпадение по введённому вами символу найдено не будет, будет возвращено -1.
Искомое слово или символ указываются первым параметром. Что касается второго параметра, то он необязателен. Зато с его помощью мы можем передать номер (индекс) символа или буквы, с которого надо начинать поиск. Важный момент: метод indexOf() чувствителен к регистру вводимых вами букв, слов и символов.
Синтаксис метода предельно прост:
строка.indexOf(первый параметр указывает, что ищем, [второй параметр определяет, откуда начинаем поиск]);Приведем примеры поиска слова в строке JavaScript
В примере ниже у нас есть строка ‘Я учусь в OTUS’, причём мы ищем в строке слово ‘учусь’. Метод вернёт нам индекс 2, т. к. именно с этой позиции начинается слово ‘учусь’ в строке. Тут стоит вспомнить, что индексация (подсчёт позиции) начинается с нуля, а не с единицы.
let str = 'Я учусь в OTUS; console.log(str.indexOf('учусь'));В результате получим следующий вывод:
В очередном примере в строке ‘Я учу Java и учу JavaScript в OTUS’ давайте найдём слово ‘учу’, но не первое его вхождение в строку, а второе. Следовательно, начнём поиск с 5-й позиции, указав это вторым параметром.
let str = 'Я учу Java и учу JavaScript в OTUS'; console.log(str.indexOf('учу', 5));Проверка приведёт к возвращению числа 13, т. к. именно с этой позиции начинается второе слово «учу» в нашей строке.
Давайте приведем ещё парочку примеров. В коде ниже, исследуемый нами метод поиска вернёт -1, ведь подстроки ‘Go’ в нашей строке попросту нет:
let str = 'Я учусь в OTUS'; console.log(str.indexOf('Go'));В принципе, как видите, ничего сложного. Нам вернётся -1 и в случае, если мы будем искать одинаковые слова с разным регистром (OTUS не равно OtuS):
let str = 'Я учусь в OTUS; console.log(str.indexOf(' OtuS'));Вернётся -1 и в последнем примере, ведь после позиции, которую мы выбрали вторым параметром для поиска, совпадения найдены не будут:
let str = 'Я учусь в OTUS'; console.log(str.indexOf('учусь', 7));Проверка приведёт к следующему результату:
Вот и всё, что можно сказать про простейший поиск слов и символов в строке JavaScript. Напоследок стоит упомянуть метод lastIndexOf(), тоже осуществляющий поиск символа, слова или любой подстроки в строке. Разница заключается лишь в том, что этот метод начинает искать с конца строки, а не с начала — в остальном он работает аналогично.
Больше операций по поиску в строке JavaScript, включая дополнительные операции по работе с подстрокой, вы найдёте здесь.
Интересует профессиональный курс по JavaScript-разработке? Переходите по ссылке ниже:
I have a shopping cart that displays product options in a dropdown menu and if they select “yes”, I want to make some other fields on the page visible.
The problem is that the shopping cart also includes the price modifier in the text, which can be different for each product. The following code works:
$(document).ready(function() {
$('select[id="Engraving"]').change(function() {
var str = $('select[id="Engraving"] option:selected').text();
if (str == "Yes (+ $6.95)") {
$('.engraving').show();
} else {
$('.engraving').hide();
}
});
});
However I would rather use something like this, which doesn’t work:
$(document).ready(function() {
$('select[id="Engraving"]').change(function() {
var str = $('select[id="Engraving"] option:selected').text();
if (str *= "Yes") {
$('.engraving').show();
} else {
$('.engraving').hide();
}
});
});
I only want to perform the action if the selected option contains the word “Yes”, and would ignore the price modifier.
cнŝdk
31.2k7 gold badges56 silver badges77 bronze badges
asked Aug 13, 2010 at 21:25
3
Like this:
if (str.indexOf("Yes") >= 0)
…or you can use the tilde operator:
if (~str.indexOf("Yes"))
This works because indexOf()
returns -1
if the string wasn’t found at all.
Note that this is case-sensitive.
If you want a case-insensitive search, you can write
if (str.toLowerCase().indexOf("yes") >= 0)
Or:
if (/yes/i.test(str))
The latter is a regular expression or regex.
Regex breakdown:
/
indicates this is a regexyes
means that the regex will find those exact characters in that exact order/
ends the regexi
sets the regex as case-insensitive.test(str)
determines if the regular expression matchesstr
To sum it up, it means it will see if it can find the lettersy
,e
, ands
in that exact order, case-insensitively, in the variablestr
RedGuy11
3446 silver badges14 bronze badges
answered Aug 13, 2010 at 21:28
SLaksSLaks
863k176 gold badges1900 silver badges1961 bronze badges
2
You could use search or match for this.
str.search( 'Yes' )
will return the position of the match, or -1 if it isn’t found.
answered Aug 13, 2010 at 21:29
hookedonwinterhookedonwinter
12.4k19 gold badges61 silver badges74 bronze badges
2
It’s pretty late to write this answer, but I thought of including it anyhow. String.prototype
now has a method includes
which can check for substring. This method is case sensitive.
var str = 'It was a good date';
console.log(str.includes('good')); // shows true
console.log(str.includes('Good')); // shows false
To check for a substring, the following approach can be taken:
if (mainString.toLowerCase().includes(substringToCheck.toLowerCase())) {
// mainString contains substringToCheck
}
Check out the documentation to know more.
answered May 7, 2016 at 13:38
MunimMunim
2,6061 gold badge19 silver badges28 bronze badges
1
Another way:
var testStr = "This is a test";
if(testStr.contains("test")){
alert("String Found");
}
** Tested on Firefox, Safari 6 and Chrome 36 **
az7ar
5,1572 gold badges17 silver badges23 bronze badges
answered Feb 20, 2013 at 19:44
Andy BrahamAndy Braham
9,4694 gold badges46 silver badges56 bronze badges
1
ECMAScript 6 introduces String.prototype.includes
, previously named contains
.
It can be used like this:
'foobar'.includes('foo'); // true
'foobar'.includes('baz'); // false
It also accepts an optional second argument which specifies the position at which to begin searching:
'foobar'.includes('foo', 1); // false
'foobar'.includes('bar', 1); // true
It can be polyfilled to make it work on old browsers.
answered Apr 16, 2016 at 23:00
OriolOriol
270k62 gold badges428 silver badges505 bronze badges
0
The includes() method determines whether one string may be found within another string, returning true or false as appropriate.
Syntax :-string.includes(searchString[, position])
searchString:-A string to be searched for within this string.
position:-Optional. The position in this string at which to begin searching for searchString; defaults to 0.
string = 'LOL';
console.log(string.includes('lol')); // returns false
console.log(string.includes('LOL')); // returns true
answered Nov 18, 2016 at 17:45
Parth RavalParth Raval
3,9893 gold badges23 silver badges36 bronze badges
0
You can use this Polyfill in ie and chrome
if (!('contains' in String.prototype)) {
String.prototype.contains = function (str, startIndex) {
"use strict";
return -1 !== String.prototype.indexOf.call(this, str, startIndex);
};
}
answered Jul 3, 2013 at 14:09
robkorvrobkorv
5397 silver badges5 bronze badges
0
If you are capable of using libraries, you may find that Lo-Dash JS library is quite useful. In this case, go ahead and check _.contains()
(replaced by _.includes()
as of v4).
(Note Lo-Dash convention is naming the library object _.
Don’t forget to check installation in the same page to set it up for your project.)
_.contains("foo", "oo"); // → true
_.contains("foo", "bar"); // → false
// Equivalent with:
_("foo").contains("oo"); // → true
_("foo").contains("bar"); // → false
In your case, go ahead and use:
_.contains(str, "Yes");
// or:
_(str).contains("Yes");
..whichever one you like better.
answered Oct 1, 2015 at 6:18
SelfishSelfish
5,9553 gold badges42 silver badges63 bronze badges
0
I know that best way is str.indexOf(s) !== -1;
http://hayageek.com/javascript-string-contains/
I suggest another way(str.replace(s1, "") !== str
):
var str = "Hello World!", s1 = "ello", s2 = "elloo";
alert(str.replace(s1, "") !== str);
alert(str.replace(s2, "") !== str);
answered Oct 1, 2015 at 6:05
You can also check if the exact word is contained in a string. E.g.:
function containsWord(haystack, needle) {
return (" " + haystack + " ").indexOf(" " + needle + " ") !== -1;
}
Usage:
containsWord("red green blue", "red"); // true
containsWord("red green blue", "green"); // true
containsWord("red green blue", "blue"); // true
containsWord("red green blue", "yellow"); // false
This is how jQuery does its hasClass method.
answered Mar 26, 2015 at 15:43
bashausbashaus
1,6021 gold badge16 silver badges33 bronze badges
you can define an extension method and use it later.
String.prototype.contains = function(it)
{
return this.indexOf(it) != -1;
};
so that you can use in your page anywhere like:
var str="hello how are you";
str.contains("are");
which returns true.
Refer below post for more extension helper methods.
Javascript helper methods
answered Mar 3, 2015 at 13:08
Vikas KottariVikas Kottari
4952 gold badges10 silver badges24 bronze badges
None of the above worked for me as there were blank spaces but this is what I did
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
bottab.style.display="none";
bottab2.style.display="none";
if (td) {
var getvar=td.outerText.replace(/s+/, "") ;
if (getvar==filter){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}
}
answered Jul 17, 2017 at 0:14
Любые текстовые данные в JavaScript считаются строками. Это примитивный тип, но язык позволяет работать с ним так, будто он является объектом. В том числе — использовать встроенные в JS методы строк, которые собраны в этой шпаргалке.
Важно: при использовании методов создаётся новая строка, которая записывается в ту же переменную вместо старой строки.
1
Как изменить регистр
toLowerCase
Преобразует символы в строке в нижний регистр.
"Hello Tproger".toLowerCase(); // "hello tproger"
toUpperCase
Преобразует символы в строке в верхний регистр.
"Hello Tproger".toUpperCase(); // "HELLO TPROGER"
2
Как объединить строки
concat
Объединяет две или более строки и возвращает одну строку.
"Hello".concat(" Tproger"); // "Hello Tproger"
"Hello".concat(" T", "p", "r", "o", "g", "e", "r"); // "Hello Tproger"
3
Как разделить строку на подстроки
split
Разбивает строку в массив по указанному разделителю, которым может быть подстрока или регулярное выражение. Вторым параметром можно указать ограничитель.
// Получаем каждый символ
"Hello Tproger".split(""); // ["H", "e", "l", "l", "o", " ", "T", "p", "r", "o", "g", "e", "r"]
// Получаем каждое слово из строки
"Hello Tproger".split(" "); //["Hello", "Tproger"]
// Устанавливаем ограничитель
"Hello Tproger".split(" ", 1); //["Hello"]
4
Как повторить строку
repeat
Принимает в качестве параметра число и повторяет строку указанное количество раз.
"Tproger ".repeat(3); // "Tproger Tproger Tproger "
5
Как найти подстроку
charAt
Возвращает символ по указанному индексу.
"Hello Tproger".charAt(); // "H"
includes
Проверяет, содержит ли строка указанную подстроку. Возвращает значение true или false. Вторым параметром можно указать позицию в строке, с которой следует начать поиск.
"Hello Tproger".includes("Tproger"); // true
"Hello Tproger".includes("Hello", 1); // false
indexOf
Возвращает индекс первого найденного вхождения указанного значения. Поиск ведётся от начала до конца строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.
"Hello World".indexOf("o"); // 4
"Hello World".indexOf("o", 5); // 7
lastIndexOf
Возвращает индекс последнего найденного вхождения указанного значения. Поиск ведётся от конца к началу строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.
"Hello World".lastIndexOf("o"); // 7
"Hello World".lastIndexOf("o", 5); // 4
endsWith
Проверяет, заканчивается ли строка символами, заданными первым параметром. Возвращает true или false. Есть второй необязательный параметр — ограничитель по диапазону поиска. По умолчанию он равен длине строки.
"Hello Tproger".endsWith("Tproger"); // true
"Hello Tproger".endsWith("Tproger", 12); // false
startsWith
Проверяет, начинается ли строка с указанных символов. Возвращает true или false. Вторым параметром можно указать индекс, с которого следует начать проверку.
"Hello Tproger".startsWith("Hello"); // true
"Hello Tproger".startsWith("Hello", 1); // false
search
Проверяет, есть ли в строке указанное значение или регулярное выражение и возвращает индекс начала совпадения.
"hi, hello, hey".search("hello"); // 4
6
Как извлечь подстроку
slice
Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).
"Методы строк на Tproger".slice(16); // "Tproger"
"Методы строк на Tproger".slice(16, 21); // "Tprog"
// Отрицательные значения тоже работают
"Методы строк на Tproger".slice(-7); // "Tproger"
"Методы строк на Tproger".slice(-7, -2); // "Tprog"
substring
Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.
"Методы строк на Tproger".substring(5, 2); // "тод"
substr
Извлекает часть строки указанной длины. Первым параметром принимает стартовую позицию, вторым — длину. Значение первого параметра может быть отрицательным, тогда позиция определяется с конца строки.
"Методы строк на Tproger".substr(7, 5); // "строк"
"Методы строк на Tproger".substr(-7, 5); // "Tprog"
7
Как заменить подстроку
replace
Ищет в строке указанное значение или регулярное выражение и возвращает новую строку, в которой выполнена замена на второй параметр. Можно заменить найденные значения другой строкой или передать функцию для работы над совпадениями.
"hi, hello, hi".replace("hi", "hey"); // "hey, hello, hi"
"hi, hello, hi".replace(/hi/g, "hey"); // "hey, hello, hey"
replaceAll
Даёт такой же результат, как метод replace() с глобальным флагом g. Заменяет все найденные совпадения другой строкой или переданной функцией.
"hi, hello, hi".replaceAll("hi", "hey"); // "hey, hello, hey"
8
Как добавить в строку пробелы или другие символы
padEnd
Добавляет в конце отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.
"Hello Tproger".padEnd(20, "*"); // "Hello Tproger*******"
padStart
Добавляет в начале отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.
"Hello Tproger".padStart(20, "*"); // "*******Hello Tproger"
9
Как удалить пробелы в строке
trim
Обрезает пробелы с обоих концов строки.
" Hello Tproger ".trim(); // "Hello Tproger"
trimEnd
Обрезает пробелы в конце строки
" Hello Tproger ".trimEnd(); // " Hello Tproger"
trimStart
Обрезает пробелы в начале строки
" Hello Tproger ".trimStart(); // "Hello Tproger "
10
Как работать с Юникодом
charCodeAt
Возвращает числовое значение Юникода по указанному индексу. Обратите внимание: у букв в верхнем и нижнем регистрах разные коды.
"T".charCodeAt() // 84
"t".charCodeAt() // 116
fromCharCode
Преобразует числовые значения Юникода в читаемые символы.
String.fromCharCode(72, 101, 108, 108, 111); // "Hello"
Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.
'?'.length; // 2, редкий китайский иероглиф
Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.
Для работы со строками в JS есть не только встроенные методы, но и сторонние библиотеки. Они решают задачи более сложные задачи. Но подключать их имеет смысл только в том случае, если возможностей встроенных методов действительно не хватает.
При составлении этой шпаргалки я пользовался «Современным учебником JavaScript» Ильи Кантора и документацией MDN.
Больше полезных материалов по JS:
- Шпаргалка по современному JavaScript
- Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду
$a = 'how are you';
if (strpos($a,'are') !== false) {
echo 'true';
}
In PHP, we can use the code above to check if a string contain specific words, but how can I do the same function in JavaScript/jQuery?
j08691
203k31 gold badges259 silver badges271 bronze badges
asked Mar 22, 2011 at 8:18
Charles YeungCharles Yeung
38.2k30 gold badges90 silver badges130 bronze badges
4
you can use indexOf for this
var a = 'how are you';
if (a.indexOf('are') > -1) {
return true;
} else {
return false;
}
Edit: This is an old answer that keeps getting up votes every once in a while so I thought I should clarify that in the above code, the if
clause is not required at all because the expression itself is a boolean. Here is a better version of it which you should use,
var a = 'how are you';
return a.indexOf('are') > -1;
Update in ECMAScript2016:
var a = 'how are you';
return a.includes('are'); //true
answered Mar 22, 2011 at 8:22
3
indexOf
/includes
should not be used for finding whole words:
A word (in western culture) is a drawing of a symbols close to each other, with some space between each word. A word is considered as such if it’s a complete piece of characters draw together and not a partial part of it:
"has a word".indexOf('wor') // 6 ("wor" is not a word in this sentence)
"has a word".includes('ha') // true ("ha" is not a word in this sentence)
Check if a single word (whole word) is in the string
Find a real whole word, not just if the letters of that word are somewhere in the string.
const wordInString = (s, word) => new RegExp('\b' + word + '\b', 'i').test(s);
// tests
[
'', // true
' ', // true
'did', // true
'id', // flase
'yo ', // flase
'you', // true
'you not' // true
].forEach(q => console.log(
wordInString('dID You, or did you NOt, gEt WHy?', q)
))
console.log(
wordInString('did you, or did you not, get why?', 'you') // true
)
Check if all words are in the string
var stringHasAll = (s, query) =>
// convert the query to array of "words" & checks EVERY item is contained in the string
query.split(' ').every(q => new RegExp('\b' + q + '\b', 'i').test(s));
// tests
[
'', // true
' ', // true
'aa', // true
'aa ', // true
' aa', // true
'd b', // false
'aaa', // false
'a b', // false
'a a a a a ', // false
].forEach(q => console.log(
stringHasAll('aA bB cC dD', q)
))
answered Jan 12, 2014 at 23:41
vsyncvsync
116k56 gold badges302 silver badges392 bronze badges
6
If you are looking for exact words and don’t want it to match things like “nightmare” (which is probably what you need), you can use a regex:
/bareb/gi
b = word boundary
g = global
i = case insensitive (if needed)
If you just want to find the characters “are”, then use indexOf
.
If you want to match arbitrary words, you have to programatically construct a RegExp (regular expression) object itself based on the word string and use test
.
answered Mar 22, 2011 at 8:27
Stephen ChungStephen Chung
14.5k1 gold badge35 silver badges48 bronze badges
You’re looking for the indexOf function:
if (str.indexOf("are") >= 0){//Do stuff}
answered Mar 22, 2011 at 8:22
evbaileyevbailey
3713 silver badges11 bronze badges
You might wanna use include method in JS.
var sentence = "This is my line";
console.log(sentence.includes("my"));
//returns true if substring is present.
PS: includes is case sensitive.
answered Apr 16, 2018 at 7:26
In javascript the includes() method can be used to determines whether a string contains particular word (or characters at specified position). Its case sensitive.
var str = "Hello there.";
var check1 = str.includes("there"); //true
var check2 = str.includes("There"); //false, the method is case sensitive
var check3 = str.includes("her"); //true
var check4 = str.includes("o",4); //true, o is at position 4 (start at 0)
var check5 = str.includes("o",6); //false o is not at position 6
answered Oct 20, 2019 at 8:09
ZeniZeni
9071 gold badge11 silver badges24 bronze badges
1
An easy way to do it to use Regex match() method :-
For Example
var str ="Hi, Its stacks over flow and stackoverflow Rocks."
// It will check word from beginning to the end of the string
if(str.match(/(^|W)stack($|W)/)) {
alert('Word Match');
}else {
alert('Word not found');
}
Check the fiddle
NOTE: For adding case sensitiveness update the regex with /(^|W)stack($|W)/i
Thanks
Vineeth Sai
3,3897 gold badges22 silver badges34 bronze badges
answered Sep 20, 2018 at 6:33
This will
/bwordb/.test("Thisword is not valid");
return false
, when this one
/bwordb/.test("This word is valid");
will return true
.
answered Jun 19, 2015 at 17:07
JahidJahid
21.2k9 gold badges89 silver badges108 bronze badges
var str1 = "STACKOVERFLOW";
var str2 = "OVER";
if(str1.indexOf(str2) != -1){
console.log(str2 + " found");
}
answered Aug 29, 2018 at 6:09
Using a conditional ternary operator
str = 'I am on StackOverflow';
str.match(/(^|W)StackOverflow($|W)/) ? 'Found. Why lie?' : 'Not Found';
answered Jan 21, 2022 at 20:28
WiiLFWiiLF
3043 silver badges11 bronze badges
If you’d like to find a single word in a string without regular expressions, you can do as follows:
function isWordInString(needle, haystack) {
return haystack
.split(' ')
.some(p => (p === needle));
}
isWordInString('hello', 'hello great world!'); // true
isWordInString('eat', 'hello great world!'); // false
Advantages over regex:
- Works with non-latin characters like Hebrew
- No need to sanitize the word you search in the string. Some methods in other answers will fail and return a false positive when searching for a “.” (dot)
answered Jun 8, 2022 at 9:42
ArikArik
5,1181 gold badge26 silver badges26 bronze badges
When you’re working with a JavaScript program, you might need to check whether a string contains a substring. A substring is a string inside another string.
Specifically, you might need to check whether a word contains a specific character or a specific set of characters.
Thankfully, there are a few quick ways to achieve this with JavaScript.
In this article, you will learn two different ways you can check if a string contains a substring using JavaScript methods.
Specifically, you will learn:
- How to use the built-in
includes()
JavaScript method. - How to use the built-in
indexOf()
JavaScript method.
Here is what we will cover in more detail:
- Syntax breakdown of the
includes()
method in JavaScript- How to check if a string contains a specific substring using the
includes()
method
- How to check if a string contains a specific substring using the
- Syntax breakdown of the
indexOf()
method in JavaScript- How to check if a string contains a specific substring using the
indexOf()
method
- How to check if a string contains a specific substring using the
- How to make a case-insensitive check with the
includes()
andindexOf()
methods
What Is The includes()
Method in JavaScript? includes()
Method Syntax Breakdown
The JavaScript includes()
method was introduced with ES6, and it is the most common and modern way of checking if a string contains a specific character or a series of characters.
The general syntax for the includes()
method looks something similar to this:
string.includes(substring, index);
Let’s break it down:
string
is the word you want to search through.includes()
is the method you call on the word you want to search through, which in this case isstring
.- The
includes()
method accepts two arguments – one is required, and one is optional. - The first argument the
includes()
method accepts issubstring
, and it is required.substring
is the character or the series of characters you are checking to see if they exist withinstring
. - The second argument the
includes()
method accepts isindex
, and it is optional.index
refers to the position from which the search forsubstring
will start – the default value is0
because indexing in programming languages begins at0
.
The return value is a Boolean value. A Boolean value can either be true
or false
depending on whether the substring is present or not within the string.
Something to keep in mind is that the includes()
method is case-sensitive.
How To Check if A String Contains A Specific Substring in JavaScript Using The includes()
Method
Let’s see an example of how the includes()
method works.
First, I created a variable that holds the string Hello, World
– this is the string I want to search through:
let string= "Hello, World";
Next, I created a variable with the substring Hello
– this is the substring I want to search for in the original string:
let string= "Hello, World";
let substring = "Hello";
Next, I will check if substring
is present within string
using the includes()
method and print the result to the console:
let string= "Hello, World";
let substring = "Hello";
console.log(string.includes(substring));
// output
// true
The return value was true
, meaning Hello
is present in the variable string
.
As mentioned in the section above, the includes()
method is case-sensitive.
See what happens when I change the value of substring
from Hello
to hello
:
let string= "Hello, World";
let substring = "hello";
console.log(string.includes(substring));
// output
// false
The return value, in this case, is false
, as there is no substring hello
with a lowercase h
. So, keep this in mind when working with the includes()
method – it differentiates between capital and lowercase letters.
Now, let’s see how to use the includes()
method with the second argument, index
.
As a reminder, the second argument specifies the position from which you want to start the search for the substring.
Let’s take the same string
variable from the previous examples:
let string= "Hello, World";
I will change the value of the substring
variable to H
:
let string= "Hello, World";
let substring = "H";
And I will specify the search of the substring to start from position 0
:
let string= "Hello, World";
let substring = "H";
console.log(string.includes(substring,0));
// output
// true
The return value is true
because the substring H
is at index position 0
within the string Hello, World
.
Remember, the first letter in a string has a position of 0
, the second a position of 1
, and so on.
What Is The indexOf()
Method in JavaScript? indexOf()
Method Syntax Breakdown
Similar to the includes()
method, the JavaScript indexOf()
method checks if a string includes a substring.
The general syntax for the indexOf()
method looks something similar to this:
string.indexOf(substring, index);
Let’s break it down:
string
is the word you want to search through.index0f()
is the method you call on the word you want to search through, in this case,string
.- The
includes()
method takes two arguments – one is required, and one is optional. - The first argument to the
indexOf()
method issubstring
, and it is required.substring
is the character or the series of characters you are searching for. - The second argument to the
indexOf()
method isindex
, and it is optional.index
refers to the position from which the search forsubstring
will start. The default value is0
because indexing in programming languages begins at0
.
The difference between the two methods is their return value.
The includes()
method returns a Boolean value (a value that is either true
or false
), whereas the indexOf()
method returns a number.
The number will be the starting index position where the substring you are looking for is found within the string. The return value will be -1
if the substring is not found in the string.
And just like the includes()
method, the indexOf()
method is case-sensitive.
How To Check if A String Contains A Specific Substring in JavaScript Using The indexOf()
Method
Let’s use the same example from earlier to see how the indexOf()
method works.
let string= "Hello, World";
let substring = "H";
There is the variable string
with the original string, and the variable substring
with the substring you are searching for.
let string= "Hello, World";
let substring = "H";
console.log(string.indexOf(substring));
// output
// 0
The output is 0
, which is the starting position of the substring you are searching for.
In this case, the value you were searching for was a single character.
Let’s change the value of substring
from H
to Hello
:
let string= "Hello, World";
let substring = "Hello";
console.log(string.indexOf(substring));
// output
// 0
The return value is again 0
since index0f()
returns the starting position of the substring you are looking for. Since the first character of the substring is located at the 0
position, indexOf()
returns 0
.
Now, let’s change the value of substring
from Hello
to hello
with a lowercase h
:
let string= "Hello, World";
let substring = "hello";
console.log(string.indexOf(substring));
// output
// -1
The return value is -1
. As mentioned earlier, index0f()
is case-sensitive, so it cannot find a substring hello
with lowercase h
. And when indexOf()
cannot find the given substring, it returns -1
.
Finally, you can specify the index value you want to start your search from by passing the second argument that indexOf()
accepts.
let string= "Hello, World";
let substring = "hello";
console.log(string.indexOf(substring,1));
// output
// -1
Say you want to start your search from position 1
. The return value is -1
since the starting position of the substring you are searching for is 0
. An exact match is not found at position 1
so indexOf()
returns -1
.
How To Make A Case-Insensitive Check With the includes()
and indexOf()
Methods
So far, you have seen that the includes()
and indexOf()
methods are case-insensitive.
But what happens when you want to perform a case-insensitive check?
To do a case-insensitive check and see if a substring is present within a string, you will need to convert both the original string and the substring to lowercase using the toLowerCase()
JavaScript method before calling one of the two methods.
Here is how you would do that using the includes()
method:
let string= "Hello, World";
let substring = "hello";
console.log(string.toLowerCase().includes(substring.toLowerCase()));
// output
// true
By default, the return value would have been false
because the original string contains an uppercase H
, whereas the substring contains a lowercase h
. After converting both strings to lowercase, you don’t have to worry about the capitalization of the original string and the substring you are searching for.
And here is how you would do the same thing using the indexOf()
method:
let string= "Hello, World";
let substring = "hello";
console.log(string.toLowerCase().indexOf(substring.toLowerCase()));
// output
// 0
By default, the return value would have been -1
because the original
string and the substring you are searching for have different cases.
After using the toLowerCase()
method, the indexOf()
method returns the staring position of the substring.
Conclusion
And there you have it! You now know how to check if a string contains a substring in JavaScript.
To learn more about JavaScript, head to freeCodeCamp’s JavaScript Algorithms and Data Structures Certification.
It’s a free, well-thought-out, and structured curriculum where you will learn interactively. In the end, you will also build 5 projects to claim your certification and solidify your knowledge.
Thanks for reading!
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started