Как найти слово в строке javascript

Теги: javascript, символ, поиск, методы, строка, индекс, проверка, строковые функции, слово, indexof

Для поиска слова, символа или любой другой подстроки в строке в языке программирования JavaScript используют хорошо известный метод indexOf. В результате проверки метод возвращает позицию первого совпадения, если же совпадение по введённому вами символу найдено не будет, будет возвращено -1.

JavaScriptPro_970x90-20219-f847d3.png

Искомое слово или символ указываются первым параметром. Что касается второго параметра, то он необязателен. Зато с его помощью мы можем передать номер (индекс) символа или буквы, с которого надо начинать поиск. Важный момент: метод 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-разработке? Переходите по ссылке ниже:

JavaScriptPro_970x550-20219-412f62.png

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's user avatar

cнŝdk

31.2k7 gold badges56 silver badges77 bronze badges

asked Aug 13, 2010 at 21:25

Jordan Garis's user avatar

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 regex
  • yes means that the regex will find those exact characters in that exact order
  • / ends the regex
  • i sets the regex as case-insensitive
  • .test(str) determines if the regular expression matches str
    To sum it up, it means it will see if it can find the letters y, e, and s in that exact order, case-insensitively, in the variable str

RedGuy11's user avatar

RedGuy11

3446 silver badges14 bronze badges

answered Aug 13, 2010 at 21:28

SLaks's user avatar

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

hookedonwinter's user avatar

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

Munim's user avatar

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's user avatar

az7ar

5,1572 gold badges17 silver badges23 bronze badges

answered Feb 20, 2013 at 19:44

Andy Braham's user avatar

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

Oriol's user avatar

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 

Community's user avatar

answered Nov 18, 2016 at 17:45

Parth Raval's user avatar

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

robkorv's user avatar

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

Selfish's user avatar

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

Sherali Turdiyev's user avatar

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

bashaus's user avatar

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 Kottari's user avatar

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

Kingsley Mitchell's user avatar

Любые текстовые данные в 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's user avatar

j08691

203k31 gold badges259 silver badges271 bronze badges

asked Mar 22, 2011 at 8:18

Charles Yeung's user avatar

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

Santhoshkumar's user avatar

answered Mar 22, 2011 at 8:22

naiquevin's user avatar

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

vsync's user avatar

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 Chung's user avatar

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

evbailey's user avatar

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

Neelansh Verma's user avatar

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

Zeni's user avatar

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's user avatar

Vineeth Sai

3,3897 gold badges22 silver badges34 bronze badges

answered Sep 20, 2018 at 6:33

Akshay kumar's user avatar

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

Jahid's user avatar

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

pgksunilkumar's user avatar

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

WiiLF's user avatar

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

Arik's user avatar

ArikArik

5,1181 gold badge26 silver badges26 bronze badges

How to Check if a String Contains a Substring in JavaScript

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:

  1. Syntax breakdown of the includes() method in JavaScript
    1. How to check if a string contains a specific substring using the includes() method
  2. Syntax breakdown of the indexOf() method in JavaScript
    1. How to check if a string contains a specific substring using the indexOf() method
  3. How to make a case-insensitive check with the includes() and indexOf() 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 is string.
  • The includes() method accepts two arguments – one is required, and one is optional.
  • The first argument the includes() method accepts is substring, and it is required. substring is the character or the series of characters you are checking to see if they exist within string.
  • The second argument the includes() method accepts is index, and it is optional. index refers to the position from which the search for substring will start – the default value is 0 because indexing in programming languages begins at 0.

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 is substring, and it is required. substring is the character or the series of characters you are searching for.
  • The second argument to the indexOf() method is index, and it is optional. index refers to the position from which the search for substring will start. The default value is 0 because indexing in programming languages begins at 0.

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

Добавить комментарий