Javascript как найти текст

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 badges55 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,9793 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
















Источник






Время на прочтение  

    8 мин

  


Количество просмотров  94K






Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них — организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript.





  



                       
  






(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)



Поиск готового решения



Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку. 


Если кому интересно, код брал тут.


Скрипт сразу заработал. Я думал, что вопрос решен, но как оказалось, не в обиду автору скрипта, в нем был огромный недостаток. Скрипт вел поиск по всему содержимому тега ... и, как вы уже наверное догадались, при поиске любого сочетания символов, которые напоминают тег или его атрибуты, ломалась вся страница HTML.


Почему скрипт работал некорректно?



Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body, затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код: 


<span style="background-color: yellow;">...найденное совпадение...</span>




А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.


Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div». Как вы понимаете, внутри body есть множество других тегов, в том числе и div. И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.





  



                       
  






Было до поиска:  выложить фото в интернетПросмореть полностью

Стало после поиска:  выложить фото бесплатноПросмореть полностью


Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.





  



                       
  






Итак пишем скрипт с нуля



Как все у меня выглядит.




Сейчас нас интересует форма с поиском. Обвел ее красной линией.


Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.


Первый — для ввода текста;

Второй — для для отмены поиска (снять выделение); 

Третий — для поиска (выделить найденные результаты).





  



                       
  






<form>
      <input type="text" value="" placeholder="Search" autofocus> 
      <input type="button" value=" " title="Отменить поиск">
      <input  type="submit" value=" " title="Начать поиск">
</form>




Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.


Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:


<form>
      <input class="place_for_search" type="text" id="text-to-find" value="" placeholder="Search" autofocus> 
      <input class="button_for_turn_back" type="button" onclick="javascript: FindOnPage('text-to-find',false); return false;" value=" " title="Отменить поиск">
      <input class="button_for_search" type="submit" onclick="javascript: FindOnPage('text-to-find',true); return false;" value=" " title="Начать поиск">
</form>




Давайте немного поясню что тут и зачем нужно. 


Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js).


Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,false); return false;» 


 — Тип: button

 — При нажатии вызывается функция FindOnPage(‘text-to-find’,false); и передает id поля с текстом, false


Кнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,true); return false;» 





  



                       
  






 — Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)

 — При нажатии вызывается функция FindOnPage(‘text-to-find’,true); и передает id поля с текстом, true


Вы наверняка заметили еще 1 атрибут: true/false. Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false. Если жмем на поиск, то передаем true.


Окей, двигаемся дальше. Переходим к JavaScript


Будем считать, что вы уже создали и подключили js файл к DOM.


Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь — уверен есть много способов. Но сейчас будем использовать регулярные выражения.


Итак, следующее регулярное выражение будет искать только текст след. вида: “>… текст…<“. Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.


/>(.*?)</g




Так мы будем находить нужные части кода, которые будем парсить и искать совпадения с текстом, который ввел пользователь. Затем будем добавлять стили найденным объектам и после этого заменять html — код на новый.


Приступим. Сперва переменные, которые нам понадобятся.





  



                       
  






var input,search,pr,result,result_arr, locale_HTML, result_store;
//input - принимаем текст, который ввел пользователь
//search - делаем из строки регулярное выражение
//pr - сохраняем в нее текущий <body></body>
//result - выборка текста из pr (т.е. отсекаем теги и атрибуты)
//result_arr - аналог pr, но со стилями для подсветки
//locale_HTML - оригинал <body></body> который менять не будем, используем для обнуления стилей




И сразу определим locale_HTML значение независимо от того, ищем мы что-то или нет. Это нужно, чтоб сразу сохранить оригинал страницы и иметь взможность обнулять стили.


var input,search,pr,result,result_arr, locale_HTML, result_store;

locale_HTML = document.body.innerHTML;   // сохраняем в переменную весь body (Исходный)




Ок, теперь уже стоит создать функцию, которая вызывается у нас из DOM. Сразу прикинем, что внутри у нас должны быть 2 функции, каждая из которых срабатывает в зависимости от нажатой кнопки. Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false, как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее:


var input,search,pr,result,result_arr, locale_HTML, result_store;

locale_HTML = document.body.innerHTML;   // сохраняем в переменную весь body (Исходный)

function FindOnPage(name, status) {

        if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное
	if(!status) { FindOnPageBack(); } //Снимаем выделение
}




Ок, часть логики реализована, двигаемся дальше. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.


Итак, сперва приниамем значение, которое ввел пользователь, и, в зависимости от его длины, выполняем либо основную функцию поиска, либо функцию вывода предупреждения и обнуления. Выглядеть будет так: 


var input,search,pr,result,result_arr, locale_HTML, result_store;

locale_HTML = document.body.innerHTML;   // сохраняем в переменную весь body (Исходный)

function FindOnPage(name, status) {

	input = document.getElementById(name).value; //получаем значение из поля в html
	
	if(input.length<3&&status==true) {
		alert('Для поиска вы должны ввести три или более символов');
		function FindOnPageBack() { document.body.innerHTML = locale_HTML; }   //обнуляем стили
	}
        
        if(input.length>=3)
	{
              //выполняем поиск
        }
        
        function FindOnPageBack() { document.body.innerHTML = locale_HTML; }   //обнуляем стили
        if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное
	if(!status) { FindOnPageBack(); } //Снимаем выделение
}




Сейчас поясню этот участок кода. Единственное, что могло стать не ясно — вот эта строка:


function FindOnPageBack() { document.body.innerHTML = locale_HTML; }


Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.





  



                       
  






Двигаемся дальше. Даем значения основным переменным.


var input,search,pr,result,result_arr, locale_HTML, result_store;

locale_HTML = document.body.innerHTML;   // сохраняем в переменную весь body (Исходный)

function FindOnPage(name, status) {

	input = document.getElementById(name).value; //получаем значение из поля в html
	
	if(input.length<3&&status==true) {
		alert('Для поиска вы должны ввести три или более символов');
		function FindOnPageBack() { document.body.innerHTML = locale_HTML; }   //обнуляем стили
	}
        
        if(input.length>=3)
	{
              function FindOnPageGo() {
                     search = '/'+input+'/g';  //делаем из строки регуярное выражение
		     pr = document.body.innerHTML;   // сохраняем в переменную весь body
		     result = pr.match(/>(.*?)</g);  //отсекаем все теги и получаем только текст
		     result_arr = [];   //в этом массиве будем хранить результат работы (подсветку)
              }
        }
        
        function FindOnPageBack() { document.body.innerHTML = locale_HTML; }   //обнуляем стили
        if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное
	if(!status) { FindOnPageBack(); } //Снимаем выделение
}




Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval().


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


var input,search,pr,result,result_arr, locale_HTML, result_store;

locale_HTML = document.body.innerHTML;   // сохраняем в переменную весь body (Исходный)

function FindOnPage(name, status) {

	input = document.getElementById(name).value; //получаем значение из поля в html
	
	if(input.length<3&&status==true) {
		alert('Для поиска вы должны ввести три или более символов');
		function FindOnPageBack() { document.body.innerHTML = locale_HTML; }   //обнуляем стили
	}
        
        if(input.length>=3)
	{
              function FindOnPageGo() {
                     search = '/'+input+'/g';  //делаем из строки регуярное выражение
		     pr = document.body.innerHTML;   // сохраняем в переменную весь body
		     result = pr.match(/>(.*?)</g);  //отсекаем все теги и получаем только текст
		     result_arr = [];   //в этом массиве будем хранить результат работы (подсветку)

                     for(var i=0; i<result.length;i++) {
		        result_arr[i] = result[i].replace(eval(search), '<span style="background-color:yellow;">'+input+'</span>'); //находим нужные элементы, задаем стиль и сохраняем в новый массив
			}
		     for(var i=0; i<result.length;i++) {
			pr=pr.replace(result[i],result_arr[i])  //заменяем в переменной с html текст на новый из новогом ассива
			}
		     document.body.innerHTML = pr;  //заменяем html код
              }
        }
        function FindOnPageBack() { document.body.innerHTML = locale_HTML; }   //обнуляем стили
        if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное
	if(!status) { FindOnPageBack(); } //Снимаем выделение
}




По сути все готово, и скрипт уже работает. Но добавим еще пару деталей для красоты.


1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:


        input = numer.replace(/^s+/g,'');
        input = numer.replace(/[ ]{1,}/g,' ');




После этой строки:


        input = document.getElementById(name).value; //получаем значение из поля в html




2) Сделаем проверку на совпадения (если совпадений не найдено — сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.





  



                       
  






        var warning = true;
	for(var i=0;i<result.length;i++) {
	if(result[i].match(eval(search))!=null) {
			warning = false;
		}
	}
	if(warning == true) {
		alert('Не найдено ни одного совпадения');
	}




Посмотреть исходник можно тут.

Скачать исходник можно тут.


Теперь все. Конечно, можно добавить скролл к первому найденному результату, живой поиск ajax, да и вообще улучшать можно бесконечно. Сейчас это довольно примитивный поиск по сайту. Целью статьи было помочь новичкам, если возникет такой же вопрос как у меня. Ведь простого готового решения я не нашел.


P.S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами.


Например, вместо


  <p> бла бла бла
  </p>




Надо 


   <p> бла бла бла </p>




Это не принципиально, можно от этих переносов избаляться автоматически на сервисе, но может подскажете заодно, как это пофиксить, если поймете раньше меня.


Также, если кто писал подобное, но с живым поиском, поделитесь исходником, будет интересно разобрать.





  



                       
  






Буду рад выслушать конструкнтиную критику, мнения, может, рекомендации.


На днях дописал немного код, сделал живой поиск по странице. Так, что вопрос снят. Код HTML не менялся. JS можете посмотреть тут.


Поиск ведется по тегам с классом «place_for_live_search». Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.








Источник








how can i search an html page for a word fast?

and how can i get the html tag that the word is in? (so i can work with the entire tag)





        asked Apr 14, 2009 at 16:08
    




Chen Kinnrot's user avatar






Chen KinnrotChen Kinnrot


20.5k17 gold badges79 silver badges139 bronze badges
        
















To find the element that word exists in, you’d have to traverse the entire tree looking in just the text nodes, applying the same test as above. Once you find the word in a text node, return the parent of that node.


var word = "foo",
    queue = [document.body],
    curr
;
while (curr = queue.pop()) {
    if (!curr.textContent.match(word)) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE : // 3
                if (curr.childNodes[i].textContent.match(word)) {
                    console.log("Found!");
                    console.log(curr);
                    // you might want to end your search here.
                }
                break;
            case Node.ELEMENT_NODE : // 1
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}



this works in Firefox, no promises for IE.


What it does is start with the body element and check to see if the word exists inside that element. If it doesn’t, then that’s it, and the search stops there. If it is in the body element, then it loops through all the immediate children of the body. If it finds a text node, then see if the word is in that text node. If it finds an element, then push that into the queue. Keep on going until you’ve either found the word or there’s no more elements to search.







        answered Apr 14, 2009 at 16:15
    




nickf's user avatar








3










You can iterate through DOM elements, looking for a substring within them. Neither fast nor elegant, but for small HTML might work well enough.


I’d try something recursive, like: (code not tested)


findText(node, text) {
  if(node.childNodes.length==0) {//leaf node
   if(node.textContent.indexOf(text)== -1) return [];
   return [node];
  }
  var matchingNodes = new Array();
  for(child in node.childNodes) {
    matchingNodes.concat(findText(child, text));
  }
  return matchingNodes;
}








        answered Apr 14, 2009 at 16:14
    




vartec's user avatar






vartecvartec


130k36 gold badges217 silver badges244 bronze badges
        








0










You can try using XPath, it’s fast and accurate


http://www.w3schools.com/Xpath/xpath_examples.asp


Also if XPath is a bit more complicated, then you can try any javascript library like jQuery that hides the boilerplate code and makes it easier to express about what you want found.


Also, as from IE8 and the next Firefox 3.5 , there is also Selectors API implemented. All you need to do is use CSS to express what to search for.







        answered Apr 14, 2009 at 16:16
    




Azder's user avatar






AzderAzder


4,6787 gold badges37 silver badges57 bronze badges
        








2








You can probably read the body of the document tree and perform simple string tests on it fast enough without having to go far beyond that – it depends a bit on the HTML you are working with, though – how much control do you have over the pages? If you are working within a site you control, you can probably focus your search on the parts of the page likely to be different page from page, if you are working with other people’s pages you’ve got a tougher job on your hands simply because you don’t necessarily know what content you need to test against. 


Again, if you are going to search the same page multiple times and your data set is large it may be worth creating some kind of index in memory, whereas if you are only going to search for a few words or use smaller documents its probably not worth the time and complexity to build that.


Probably the best thing to do is to get some sample documents that you feel will be representative and just do a whole lot of prototyping based around the approaches people have offered here.







        answered Apr 14, 2009 at 16:19
    




glenatron's user avatar






glenatronglenatron


10.9k13 gold badges63 silver badges109 bronze badges
        












form.addEventListener("submit", (e) => {
e.preventDefault();
var keyword = document.getElementById("search_input");
let words = keyword.value;
var word = words,
    queue = [document.body],
    curr;
while (curr = queue.pop()) {
    if (!curr.textContent.toUpperCase().match(word.toUpperCase())) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE: // 3
                if (curr.childNodes[i].textContent.toUpperCase().match(word.toUpperCase())) {
                    console.log("Found!");
                    console.log(curr);
                    curr.scrollIntoView();
                }
                break;
            case Node.ELEMENT_NODE: // 1
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}



});







        answered Dec 18, 2020 at 17:39
    




Mohammed Adil's user avatar
















Источник












JavaScript Методы поиска строк


    

  • Метод строк indexOf()
    • 

  • Метод строк lastIndexOf()
    • 

  • Метод строк startsWith()
    • 

  • Метод строк endsWith()
    • 





JavaScript Метод indexOf()


Метод indexOf() возвращает индекс (позицию) первого вхождения указанного текста в строку:




Пример



let str = “Пожалуйста, найдите, где происходит “размещение”!”;

str.indexOf(“размещение”);



Попробуйте сами »







Примечание


JavaScript отсчитывает позиции с нуля.


0 – первая позиция в строке, 1 – вторая, 2 – третья, …






JavaScript Метод lastIndexOf()


Метод lastIndexOf() возвращает индекс последнего вхождения указанного текста в строке:




Пример



let str = “Пожалуйста, найдите, где происходит “размещение”!”;

str.lastIndexOf(“размещение”);



Попробуйте сами »






Оба метода indexOf(), и lastIndexOf() возвращают значение -1, если текст не найден:




Пример



let str = “Пожалуйста, найдите, где происходит “размещение”!”;

str.lastIndexOf(“размещение”);



Попробуйте сами »





Оба метода принимают второй параметр в качестве начальной позиции для поиска:




Пример



let str = “Пожалуйста, найдите, где происходит “размещение”!”;

str.indexOf(“размещение”, 15);



Попробуйте сами »





Метод lastIndexOf() выполняет поиск в обратном направлении (с конца), что означает: если второй параметр равен 15, поиск начинается с позиции 15 и выполняется до начала строки.




Пример



let str = “Пожалуйста, найдите, где происходит “размещение”!”;

str.lastIndexOf(“размещение”, 15);



Попробуйте сами »







JavaScript Метод search()


Метод search() выполняет поиск в строке указанного значения и возвращает позицию совпадения:




Пример



let str = “Пожалуйста, найдите, где происходит “размещение”!”;

str.search(“размещение”);



Попробуйте сами »







Вы Заметили?


Методы indexOf() и search(), являются ли равными?


Они принимают одни и те же аргументы (параметры) и возвращают одно и то же значение?


Эти два метода НЕ равны. Вот в чем их различия:


    

  • Метод search() не может принимать второй аргумент начальной позиции.
    • 

  • Метод indexOf() не может принимать мощные значения поиска (регулярные выражения).
    • 



Вы узнаете больше о регулярных выражениях в следующей главе.






JavaScript Метод match()


Метод match() выполняет поиск строки на предмет соответствия регулярному выражению и возвращает совпадения в виде объекта массива.




Пример 1


Поиск строки для “ain”:



let text = “The rain in SPAIN stays mainly in the plain”; 

text.match(/ain/g);



Попробуйте сами »





Подробнее о регулярных выражениях читайте в главе JS RegExp.




Примечание


Если регулярное выражение не содержит модификатор g (для выполнения глобального поиска), метод match() вернет только первое совпадение в строке.




Синтаксис






regexp
Требуемый. Значение для поиска в виде регулярного выражения.




Возвращается:
Массив, содержащий совпадения, по одному элементу для каждого совпадения или null, если совпадение не найдено








Пример 2


Выполните глобальный поиск без учета регистра для “ain”:



let text = “The rain in SPAIN stays mainly in the plain”; 

text.match(/ain/gi);



Попробуйте сами »







JavaScript Метод includes()


Метод includes() возвращает значение true, если строка содержит указанное значение.




Пример



let text = “Привет, мир, добро пожаловать во вселенную.”;

text.includes(“мир”);



Попробуйте сами »







Синтаксис




string.includes(searchvalue, start)








searchvalue
Требуемый. Строка для поиска




start
Необязательный. Значение по умолчанию 0. Позиция для начала поиска




Возвращается:
Возвращается true если строка содержит значение, в противном случае false




JS Версия:
ES6 (2015)








Проверьте, содержит ли строка “мир”, начиная поиск с позиции 12:



let text = “Привет мир, добро пожаловать во вселенную.”;

text.includes(“мир”, 12);



Попробуйте сами »







Поддержка браузера


Метод includes() является функцией ES6 (JavaScript 2015).


Поддерживается во всех современных браузерах:

















Chrome
Edge
Firefox
Safari
Opera




Да
Да
Да
Да
Да








includes() не поддерживается в Internet Explorer.




JavaScript Метод startsWith()


Метод startsWith() возвращает true, если строка начинается с указанного значения, в противном случае false:




Пример





let text = “Привет мир, добро пожаловать во вселенную.”;


text.startsWith(“Привет”);





Попробуйте сами »





Синтаксис




string.startsWith(searchvalue, start)




Параметр значений






Параметр
Описание




searchvalue
Требуемый. Значение для поиска.




start
Необязательный. Значение по умолчанию 0. Позиция для начала поиска.








Примеры





let text = “Привет мир, добро пожаловать во вселенную.”;


text.startsWith(“мир”) // Возвращается false








let text = “Привет мир, добро пожаловать во вселенную.”;


text.startsWith(“мир”, 5) // Возвращается false








let text = “Привет мир, добро пожаловать во вселенную.”;


text.startsWith(“мир”, 7) // Возвращается true





Попробуйте сами »







Примечание


Метод startsWith() чувствителен к регистру.






Поддержка браузера


Метод startsWith() является функцией ES6 (JavaScript 2015).


Поддерживается во всех современных браузерах:

















Chrome
Edge
Firefox
Safari
Opera




Да
Да
Да
Да
Да








Метод startsWith() не поддерживается в Internet Explorer.




JavaScript Метод endsWith()


Метод endsWith() возвращает true, если строка заканчивается указанным значением, в противном случае false:




Пример


Проверьте, заканчивается ли строка на “Андрей”:



var text = “Щипунов Андрей”;

text.endsWith(“Андрей”);



Попробуйте сами »





Синтаксис




string.endswith(searchvalue, length)




Параметр значений






Параметр
Описание




searchvalue
Требуемый. Значение для поиска.




length
Необязательный. Длина для поиска.








Отметьте 11 первых символов строки, заканчивающейся на “мир”:



let text = “Привет мир, добро пожаловать во вселенную.”;

text.endsWith(“мир”, 10);



Попробуйте сами »






Примечание


Метод endsWith() метод чувствителен к регистру.






Поддержка браузера


Метод endsWith() является функцией ES6 (JavaScript 2015).


Поддерживается во всех современных браузерах:

















Chrome
Edge
Firefox
Safari
Opera




Да
Да
Да
Да
Да








Метод endsWith() не поддерживается в Internet Explorer.






Полный справочник по строкам


Для получения полного справочника по строкам перейдите по ссылке:


Справочник строк JavaScript.


Справочник содержит описания и примеры всех строковых свойств и методов.










Источник







  



                       
  













	







	
	
		

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