Say a web page has a string such as “I am a simple string” that I want to find. How would I go about this using JQuery?
asked May 29, 2009 at 15:23
Keith DoneganKeith Donegan
26.2k34 gold badges94 silver badges129 bronze badges
jQuery has the contains method. Here’s a snippet for you:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
The selector above selects any element that contains the target string. The foundin will be a jQuery object that contains any matched element. See the API information at: https://api.jquery.com/contains-selector/
One thing to note with the ‘*’ wildcard is that you’ll get all elements, including your html an body elements, which you probably don’t want. That’s why most of the examples at jQuery and other places use $(‘div:contains(“I am a simple string”)’)
user202729
3,2703 gold badges23 silver badges36 bronze badges
answered May 29, 2009 at 15:34
6
Normally jQuery selectors do not search within the “text nodes” in the DOM. However if you use the .contents() function, text nodes will be included, then you can use the nodeType property to filter only the text nodes, and the nodeValue property to search the text string.
$('*', 'body') .andSelf() .contents() .filter(function(){ return this.nodeType === 3; }) .filter(function(){ // Only match when contains 'simple string' anywhere in the text return this.nodeValue.indexOf('simple string') != -1; }) .each(function(){ // Do something with this.nodeValue });
answered May 29, 2009 at 16:20
BarelyFitzBarelyFitz
1,96713 silver badges17 bronze badges
3
This will select just the leaf elements that contain “I am a simple string”.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
Paste the following into the address bar to test it.
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
If you want to grab just “I am a simple string”. First wrap the text in an element like so.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).html(
$(this).text().replace(
/"I am a simple string"/
,'<span containsStringImLookingFor="true">"I am a simple string"</span>'
)
)
});
and then do this.
$('*[containsStringImLookingFor]').css("border","solid 2px red");
BlitZ
12k3 gold badges49 silver badges67 bronze badges
answered May 29, 2009 at 16:40
SlimSlim
5,5857 gold badges31 silver badges30 bronze badges
4
If you just want the node closest to the text you’re searching for, you could use this:
$('*:contains("my text"):last');
This will even work if your HTML looks like this:
<p> blah blah <strong>my <em>text</em></strong></p>
Using the above selector will find the <strong>
tag, since that’s the last tag which contains that entire string.
answered May 29, 2009 at 16:49
nickfnickf
535k198 gold badges648 silver badges721 bronze badges
4
Take a look at highlight (jQuery plugin).
answered May 29, 2009 at 15:25
Chris DoggettChris Doggett
19.7k4 gold badges61 silver badges86 bronze badges
0
Just adding to Tony Miller’s answer as this got me 90% towards what I was looking for but still didn’t work. Adding .length > 0;
to the end of his code got my script working.
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
answered Dec 10, 2014 at 9:27
PixelomoPixelomo
6,3034 gold badges45 silver badges57 bronze badges
2
this function should work. basically does a recursive lookup till we get a distinct list of leaf nodes.
function distinctNodes(search, element) {
var d, e, ef;
e = [];
ef = [];
if (element) {
d = $(":contains(""+ search + ""):not(script)", element);
}
else {
d = $(":contains(""+ search + ""):not(script)");
}
if (d.length == 1) {
e.push(d[0]);
}
else {
d.each(function () {
var i, r = distinctNodes(search, this);
if (r.length === 0) {
e.push(this);
}
else {
for (i = 0; i < r.length; ++i) {
e.push(r[i]);
}
}
});
}
$.each(e, function () {
for (var i = 0; i < ef.length; ++i) {
if (this === ef[i]) return;
}
ef.push(this);
});
return ef;
}
answered Jun 13, 2013 at 18:42
danatcofodanatcofo
6938 silver badges18 bronze badges
Теги: 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-разработке? Переходите по ссылке ниже:
Prtoy 3 / 3 / 3 Регистрация: 01.06.2016 Сообщений: 299 |
||||
1 |
||||
Поиск отдельного слова в строке (переменной)02.02.2017, 11:36. Показов 20316. Ответов 10 Метки нет (Все метки)
Здравствуйте.
Такой вариант работает, но нужно чтобы искалось только конкретное слово, т.е. сейчас, если будет “Примерчик” – то тоже выдаст алерт, а нужно именно “пример”. В дальнейшем через “или” будет несколько таких поисков… Добавлено через 1 час 27 минут
0 |
Programming Эксперт 94731 / 64177 / 26122 Регистрация: 12.04.2006 Сообщений: 116,782 |
02.02.2017, 11:36 |
10 |
Пифагор 2169 / 1652 / 840 Регистрация: 10.01.2015 Сообщений: 5,184 |
||||
02.02.2017, 11:42 |
2 |
|||
0 |
супермизантроп 3938 / 2976 / 692 Регистрация: 18.04.2012 Сообщений: 8,625 |
|
02.02.2017, 13:08 |
3 |
Такой вариант работает это не может “работать” — после исполнения toLowerCase() в переменной никак не может быть буквы П верхнего регистра, так что ваш alert () никогда не появится
0 |
Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083 |
||||
02.02.2017, 13:29 |
4 |
|||
Prtoy, Mожно использовать includes, search, test, match. Я предпочитаю includes(es6)
0 |
j2FunOnly the hardway first 2434 / 1815 / 898 Регистрация: 05.06.2015 Сообщений: 3,584 |
||||||||
02.02.2017, 15:20 |
5 |
|||||||
оно в любом случае выдаёт алерт Как уточнил kalabuni, в строке после
Более того, если совпадение будет в начале строки, то
0 |
Prtoy 3 / 3 / 3 Регистрация: 01.06.2016 Сообщений: 299 |
||||||||||||
03.02.2017, 09:30 [ТС] |
6 |
|||||||||||
Спасибо всем, поковыряюсь Добавлено через 10 минут
Работает, но находит и Привет и Приветик. А надо отдельное слово…
Этот вариант вообще не сработал… Мне нужно вписать всё именно в эту конструкцию:
0 |
Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083 |
|
03.02.2017, 10:17 |
7 |
Работает, но находит и Привет и Приветик. А надо отдельное слово… значит пробел в конце нужно поставить
0 |
Пифагор 2169 / 1652 / 840 Регистрация: 10.01.2015 Сообщений: 5,184 |
||||||||
03.02.2017, 12:11 |
8 |
|||||||
Этот вариант вообще не сработал… Да ну???!!
Мне нужно вписать всё именно в эту конструкцию Об этом речи не было.
0 |
the hardway first 2434 / 1815 / 898 Регистрация: 05.06.2015 Сообщений: 3,584 |
|
03.02.2017, 12:39 |
9 |
Пифагор, c кирилицей не сработает, к сожалению.
0 |
Пифагор 2169 / 1652 / 840 Регистрация: 10.01.2015 Сообщений: 5,184 |
||||||||
03.02.2017, 13:00 |
10 |
|||||||
j2FunOnly, если границы слова заменить на пробелы, то сработает.
https://jsfiddle.net/9no21am9/1/ Добавлено через 1 минуту
0 |
j2FunOnly the hardway first 2434 / 1815 / 898 Регистрация: 05.06.2015 Сообщений: 3,584 |
||||||||
03.02.2017, 15:40 |
11 |
|||||||
Сообщение было отмечено Prtoy как решение РешениеПифагор, я имел ввиду, что конкретно регексовский
В дальнейшем через “или” будет несколько таких поисков… и задача уже не кажется такой уж тривиальной. Добавлено через 2 часа 32 минуты
https://jsfiddle.net/j2FunOnly/jnbw0xj1/
1 |
IT_Exp Эксперт 87844 / 49110 / 22898 Регистрация: 17.06.2006 Сообщений: 92,604 |
03.02.2017, 15:40 |
Помогаю со студенческими работами здесь Поиск слова в строке Поиск слова в строке Меня интересует как можно реализовать поиск определенного слова в строке. В… Поиск слова в строке Поиск слова в строке Искать еще темы с ответами Или воспользуйтесь поиском по форуму: 11 |
Любые текстовые данные в 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