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

I remember those day when I am a fresher to programming. To complete my assignments related to string operations I always take help from Google. Sometime to find out a Syntax or Sometime for Examples. In my view string operations are little bit confusing to freshers. During programming there are several possibilities to do with a string. Some of them are String Concatenation, Finding the position of a Character in a String, Split or retrieve few part of the String. In this session for beginner of Jquery to make their journey easier I am explaining all the Jquery String Functions in details. The programming language I used here is Jquery. But keep remember theoretically fundamentals of String Operations are same for all languages. In implementation only Syntax’s are differ.

charAt(n)

In a String array to know the Character of a specific index we use charAt() function. Let’s take an example you have a string “THIS IS A TABLE.”. In this String if I want to know the Character of index 3 charAt() function can did that. Look the example below.

var myStr = "THIS IS A TABLE.";
var ch = myStr.charAt(3);

Output will be : S

charAt() function accepts integer value as the param & returns String Character. charAt(n) calculates index starting from 0.

charCodeAt(n)

charCodeAt() works similarly like chatAt() function. The only difference is while charAt() returns Character of a specific index charCodeAt() returns Unicode of the Character. Look at the example below.

var myStr = "THIS IS A TABLE.";
var ch = myStr.charCodeAt(1);

Output will be : 72

72 is the Unicode for Capital H. charCodeAt() accepts integer as the param & returns Unicode value.

concat(string1, string2, .., stringN)

String Concatenation is a very common used String operation. Let’s take a case where in two variables you are getting name of a person. First Name & Last Name. In this case to display the whole name we required to do string Concatenation operation. Look at the example below.

var strFirstName = "Biswabhusan ";
var strLastName = "Panda";
var wlcmMsg = "You are welcome!";
var ch = strFirstName.concat(strLastName, " ", wlcmMsg);

Output will be : Biswabhusan Panda You are welcome!

Using Jquery concat() method (Originally derived from JavaScript ) you can concatenate n number of strings. This method accepts n number of strings as parameters. To apply this method choose the first string variable & then concatenate others.

fromCharCode(n1, n2, …, nX)

Refer to the method name fromCharCode() it Converts Unicode value to Character. This is a static method of String object. To use this method you can use String.fromCharCode(). Look at the example below.

var ch = String.fromCharCode(67);

Output will be : C

This function accepts n number of Unicode values.

indexOf(searchvalue, [start])

indexOf() method returns the position of a specific value in a string. It return -1 if the value not found in string. While checking the value in string this method considers uppercase & lowercase characters. Using this method we can know whether a specific word exist in the string or not. Look at the example below.

var myStr="Hello, You are welcome to the my blog.";
var ch=myStr.indexOf("welcome");

Output will be : 14

indexOf() accepts 2 parameters. First parameter is the keyword you want to search in the string. Second parameter is from which index you want to search rest of the string. By default this is 0. 0 means you are searching the string from the beginning.

lastIndexOf(searchvalue, [start])

lastIndexOf() method work in similar fashion of indexOf() method. The only difference is it shows the searched value position at the last occurrence of the string. For an example if in a String “welcome” appears two times lastIndexOf() method returns the 2nd occurrence of welcome. If searched value not exist in the string it returns -1. This is case sensitive. Welcome is not equal to welcome. While returning the index it counts from the beginning of the string.

var myStr="This is Biswabhusan Panda, You can only Call Biswabhusan.";
var ch=myStr.lastIndexOf("Biswabhusan");

Output will be : 44

lastIndexOf() accepts 2 parameters like indexOf() method. First parameter is the keyword you want to search in the string. Second parameter is from which index you want to search rest of the string. By default this is 0. 0 means you are searching the string from the beginning.

substr(start, [length])

substr() string function used to retrieve part of a string. This function accepts 2 parameters start & length in integer value. Start says from which index you want the part of the string. Length is the number of characters you want from the start index. Let’s take an example. I have a string “My Car is blue.”. In this string if I am applying substr(2, 3) it will return Car.

var myStr="My Car is blue.";
var ch=myStr.substr(2, 3);

Output will be : Car

substring(from, [to])

substring() works similarly like substr(). But while substr() accepts Start & Length as the parameters substring() accepts From & To. From is the index from which you want your part of the string. To is the index upto which you want to retrieve in part of the string. Let’s take the same example as shown in substr. You can see the difference while substr(2, 3) return “Car” substring(2, 3) will return “C”.

var myStr="My Car is blue.";
var ch=myStr.substring(2, 3);

Output will be : C

toLowerCase()

toLowerCase() converts uppercase letters to lowercase. If in a string you have mix of upper & lower case letter this function will return that string in lowercase only.

var myStr="Biswabhusan";
var ch = myStr.toLowerCase();

Output will be : biswabhusan

toUpperCase()

toUpperCase() converts lowercase letters to uppercase. If in a string you have mix of upper & lower case letter this function will return that string in uppercase only.

var myStr="Biswabhusan";
var ch = myStr.toUpperCase();

Output will be : BISWABHUSAN

match(regexp)

match() function accepts regular expression & returns the matches as an Array Object. Look at the example below.

var myStr="The rain in SPAIN stays mainly in the plain";
var ch=myStr.match(/ain/g);

Output will be : ain, ain, ain

replace(searchvalue, newvalue)

replace() function is one more very useful function of string operation. In-case in a string if you want to replace some characters with another characters this function helps. It accepts 2 parameters. First parameter is the search value & second parameter is the replacement for search value. Look at the example below.

var myStr="This is an awesome Blog.";
var ch = myStr.replace("awesome ","interesting ");

Output will be : This is an interesting Blog.

search(searchvalue)

search() method help to search a specific value in a string. If search value exists in the string it returns the index or else if string doesn’t contain the value it returns -1.

var myStr = "Welcome to my Blog!";
var ch = myStr.search("my");

Output will be : 11

slice(start, [end])

slice() method extract part of the string in a new string. It accepts 2 parameters start & end. Depending upon start & end value it returns the new string.

var myStr = "Visit Jquery Blog!";
var n = myStr.slice(6, 12);

Output will be : Jquery

split(separator, [limit])

split() method used to divide a string from a specific character. It returns sub-strings in array. Split method accepts 2 parameters. Separator & limit. In separator if you use empty char “” it will divide all characters individually as a sub-string. Limit is always an integer value which specifies the number of splits.

var myStr = "How are you doing today?";
var arr = myStr.split(" ",3);

Output will be : How,are,you

Любые текстовые данные в 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 для подготовки джуна к собеседованию по фронтенду

В предыдущей статье мы начали тему работы со строками в JavaScript. В этом материале вы узнаете, как выполнять поиск в строке, как работать с подстрокой, как извлекать часть строки и т. д.

Поиск строки в строке в JavaScript

С помощью метода IndexOf() можно вернуть индекс первого вхождения заданного текста в строку:

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");


В нашем случае происходит подсчёт позиции с нуля. При этом:

1) 0 — первая позиция в строке,

2) 1 — вторая,

3) 2 — третья…
Идём дальше. Функция LastIndexOf() в JavaScript вернёт индекс последнего вхождения:
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");


Оба этих метода принимают 2-й параметр в виде начальной позиции для поиска:
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);


Стоит упомянуть и функцию Search() — она выполняет поиск строки для заданного значения, возвращая позицию совпадения:



  


                       
  




var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");


Метод slice () в JavaScript
Функция slice() извлечёт часть строки и вернёт извлечённую часть в новой строке. Метод способен принимать два параметра: начальный индекс (это положение) и конечный индекс (речь идёт о позиции).
К примеру, давайте нарежем часть строки из позиции 7 в положение 13:
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);


В нашем случае результатом будет:

Если параметр будет иметь отрицательное значение, то позиция будет учитываться с конца строки. Например:
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);


Результат будет тот же. 
Кстати, если 2-й параметр опустить, то метод сделает срез оставшейся части строки:

Результатом будет:



  


                       
  






То же самое получим, выполнив срез с конца:
var res = str.slice(-12);


Остаётся лишь добавить, что отрицательные позиции не функционируют в Internet Explorer 8 и других, более ранних версиях.
Метод подстроки в JavaScript
Подстрока в JavaScript аналогична срезу с той разницей, что подстрока не способна принимать отрицательные индексы:
var str = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);


В качестве результата опять получим «Banana».
Если же мы опустим 2-й параметр, то подстрока разрежет оставшуюся часть строки.
Метод substr () в JavaScript
Строковый метод substr() похож на slice() с той разницей, что 2-й параметр показывает длину извлечённой детали.



  


                       
  




var str = "Apple, Banana, Kiwi";
var res = str.substr(7, 6);


Результат: Banana.
Мы можем опустить 2-й параметр — тогда строковый метод substr() разрежет оставшуюся часть строки.
var str = "Apple, Banana, Kiwi";
var res = str.substr(7);


Получим: Banana, Kiwi.
Если 1-й параметр будет отрицательным, позиция будет рассчитываться с конца строки.
var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);


Результат: Kiwi.
Меняем содержимое строки в JavaScript
Строковый метод Replace() позволит заменить указанное значение иным значением в строке:
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");


Результат: Please visit W3Schools! 



  


                       
  




Обратите внимание, что метод Replace() не изменит строку, в которой вызывается, а возвратит новую. 
В следующем примере функция Replace() меняет лишь первое совпадение:
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3Schools");


Итог: Please visit W3Schools and Microsoft!
Кстати, по умолчанию Replace() учитывает регистр. Написав MICROSOFT, мы увидим, что функция работать не будет:

Пример



  


                       
  




str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3Schools");


Но мы можем заменить регистр без его учёта, если воспользуемся регулярным выражением с пометкой ” i “:
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3Schools");


Результат: Please visit W3Schools! 
Здесь стоит заметить, что регулярные выражения надо писать без кавычек.



  


                       
  




Если желаете заменить все совпадения, воспользуйтесь регулярным выражением с флагом /g:
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3Schools");


Тут получим следующее: Please visit W3Schools and W3Schools!
Извлекаем строковые символы в JavaScript
Есть 2 безопасных строковых функции для извлечения строковых символов:

• charCodeAt (позиция);

• charAt (позиция).
Функция charAt() возвратит символ по указанному нами индексу (позиции) в строке:
var str = "HELLO WORLD";
str.charAt(0);         


Вывод:

Что касается метода charCodeAt(), то он вернёт Юникод символа по указанному нами индексу:
var str = "HELLO WORLD";

str.charCodeAt(0);         // вернёт 72


Что ж, на этом всё, удачного вам кодинга! 



  


                       
  




Источник
Интересует профессиональный курс по JavaScript-разработке? Переходите по ссылке ниже: