how to highlight the words in the text that I enter into the input

var searchKey = $("#input").val(); var result = $(".text").text(); 
 <input type="text" id="input"> <br> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat mollitia, nam voluptatibus maxime sed, illum veniam harum quos? Rerum consectetur quia quaerat quos id. Aliquam repudiandae ducimus asperiores iusto illum!</div>

3 answers 3

The logic is as follows:

  1. create an element, for example, span , in which we will place the word for selection, and the corresponding styles;
  2. on the text field, you must hang up the event handler pressing the keyboard. You are lucky and the choice of events you have is wide:
    1. keyboard onkeyup , onkeydown and onkeypress keyboard onkeypress ;
    2. or even such events : oninput (this will work for any change in the text field), onchange , onpaste , etc.
    3. in special cases they can be combined;
  3. in the handler, we check, for example, using a regular expression , whether the entered word is included in the analyzed text;
  4. if it is included, then we replace in the innerHTML text of the occurrence of words with the element created in paragraph 1, inside which we put the characters to be selected;
  5. if not included, then remove all previous selections, if any. In the example, I simply replaced all the text with the original one.

The solution is suitable for small texts guaranteed. In the case when it is large, it will be necessary to carefully arrange the word replacement algorithm, but the code is valid. The regular expression, winking slyly with the i key, ignores case.

 var $input = $("#input"); var $text = $(".text"); // Сохраним изначальный текст var textOriginal = $text.text(); // Элемент, который задаст стили для выделения var $span = $('<span class="highlight">'); // Было ли уже выделение в тексте var hasChanges = false; $input.on('input', function(e) { var searchKey = $input.val(); // Можно обернуть в try{} catch, но так быстрее. Если в регулярке только один // один символ '\', то RegExp выбрасывает ошибку var regExp = new RegExp(searchKey == '\\' ? '' : searchKey, 'gi'); var textNew = textOriginal; // Если нет совпадений в тексте if (!regExp.test(textOriginal)) { if (hasChanges) { hasChanges = false; $text.text(textNew); } return true; } hasChanges = true; $text.html(textNew.replace(regExp, function(match) { $span.text(match); return $span[0].outerHTML; })); }); 
 .highlight { background-color: yellow; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <br> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat mollitia, nam voluptatibus maxime sed, illum veniam harum quos? Rerum consectetur quia quaerat quos id. Aliquam repudiandae ducimus asperiores iusto illum!</div>

  • one
    Good decision. On <input> it is better to listen to the "input" event - it will work when you paste into the field through the right mouse click and with all the key changes. - Sergiks
  • 2
    And you should not literally use the value from the input field as a regex, otherwise it will be like this . - Sergiks
  • @Sergiks, thanks. - Rolandius
  • one
    and how to make a search in the upper and lower case, but so that when replacing the register would be saved? - Dimka Mine
  • @DimkaRudnik, look, I repaired a bit, now it works with register saving. Note that the snippet uses the healthy feature of the String.prototype.replace function, I am sure that very few people know about it. - Rolandius

another option

 $("#btn").click(function() { $(".text").html($(".text").text().replace( new RegExp('(' + $('#input').val() + ')', 'gi'), '<span class="highlight">$1</span>' )); }); $("#btn2").click(function() { $(".text").html($(".text").text().replace( new RegExp('(' + $('#input').val().replace(/(\[|\^|\$|\/|\\|\+|\*)/g, '\\$1') + ')', 'gi'), '<span class="highlight">$1</span>' )); }); 
 .highlight { background-color: yellow; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <input type="button" id="btn" value="Highlight regex"> <input type="button" id="btn2" value="Highlight text"> <br> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat mollitia, nam voluptatibus maxime sed, illum veniam harum quos? Rerum consectetur quia quaerat quos id.\s+/ Aliquam repudiandae ducimus asperiores iusto illum!</div>

    Option without regular expressions, in any case. And a copy of the text and the search phrase are in upper case for the search:

     var $input = $("#search") ,$text = $("#text") ,src = $text.text() // исходный текст ,srcUp = src.toUpperCase() // копия в заглавных ,$found = $('#found') // вывод счётчика ; function highlight(e) { var search = $input.val() ,searchUp = search.toUpperCase() ,cursor = 0 // где закончили искать ,found = 0 // сколько нашлось ,inc = search.length ,position // начало очередного совпадения ,result = '' ; if( !inc) { $text.text(src); $found.text(''); return; } while( !!~(position = srcUp.indexOf( searchUp, cursor))) { result += src.substring( cursor, position); result += '<span class="highlight">' + src.substr( position, inc) + '</span>'; cursor = position + inc; found++; } result += src.substring( cursor); $text.html( result); $found.text( found ? "найдено: " + found : ''); }; $input.on('input', highlight); 
     body {font-family:Helvetica,Arial,sans-serif} .highlight{background-color:#F90} #found{ color:#777} #text{margin-top:20px;line-height:15pt} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="search" placeholder="что ищем?"> <span id="found"></span> <div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat mollitia, nam voluptatibus maxime sed, illum veniam harum quos? Rerum consectetur quia quaerat quos id. Aliquam repudiandae ducimus asperiores iusto illum!</div>

    Ps added counter fragments found.

    • If working so low on strings, can it be faster then collect $text from DOM elements? That is, not to add a piece of string to result , and then put innerHTML , but immediately add text via appendChild(createTextNode('_')) , and the element via appendChild(span.cloneNode().innerHTML = '_') to $text . What do you think? - Rolandius
    • Any manipulations with the DOM are most likely slower than string operations - so I rely on my own version: first generate, then send to DOM again. To know for sure, you need to do tests. Multiple repaint just longer than one. - Sergiks