#javascript #jquery #regex #search #highlight
#javascript #jquery #регулярное выражение #Поиск #выделить
Вопрос:
Попытка выделить только текущий / отдельный текст, например, поиск команды клавиатуры браузера «Control-F». поиск следующего / нового текста при повторном поиске подходит. Но он выделяет весь результат, пытаясь выделить только текущий результат / текст.
JS ниже:
$('body').on('keydown', '#searchfor', function(e) {
if (e.which === 32 amp;amp; e.target.selectionStart === 0) {
return false;
}
});
//Create some vars to later check for:
//['text you are searching', 'number of highlights','actual highlight']
var searching,
limitsearch,
countsearch;
$('button#search').click(function() {
var searchedText = $('#searchfor').val();
var page = $('#ray-all_text');
//Now check if the text on input is valid
if (searchedText != "") {
//If the actual text on the input is different from the prev search
if(searching != searchedText) {
page.find('span').contents().unwrap();
var pageText = page.html();
var theRegEx = new RegExp("(" searchedText ")", "igm");
var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
page.html(newHtml);
//Set your variables to the actual search
searching = searchedText;
limitsearch = page.find('span').length;
countsearch=0;
} else {
//If it's the same of the prev search then move to next item instead of repaint html
countsearch<limitsearch-1 ? countsearch : countsearch=0;
console.log(countsearch '---' limitsearch)
}
//Go to target search
$('body').animate({
scrollTop: $("#ray-all_text span").eq(countsearch).offset().top - 50},
200);
} else {
alert('empty search')
}
});
HTML:
<div class="ray-search">
<div class="field" id="ray-search-form">
<input type="text" id="searchfor" placeholder="what are you searching for?" />
<button type="button" id="search">Press to Find!</button>
</div>
</div>
<article id="ray-all_text">
<p>
This manual and web site, all information and data and photos contained herein, are the s...
</p>
</article>
Пожалуйста, проверьте пример: :https://jsfiddle.net/gaezs6s8/3 /
Есть какое-либо решение?
Комментарии:
1. Вы хотите выделить только первый результат?
2. ДА…………
3. То, что вы ищете, это mark.js
Ответ №1:
Вы можете добавить класс к текущей цели. Строки из вашего кода я изменяю:
var actual = $("#ray-all_text span").eq(countsearch);
$('.active').removeClass('active');
actual.addClass('active');
$('body').animate({
scrollTop: actual.offset().top - 50},
200);
И на CSS:
#ray-all_text span.active {
background-color:yellow;
}
Демонстрационная скрипка
Комментарии:
1. привет, спасибо, но первый поиск работает, при поиске другого текста (во второй раз) он не может быть найден: пожалуйста, проверьте на моем сайте: glass2.com/instruction-manual
2. при поиске другого текста (во второй раз) поиск «ПРИМЕРА РИСОВАНИЯ» (каждый раз) не находит точный текст. проверьте: glass2.com/instruction-manual
3. @Aariba у вас есть этот идентификатор
ray-all_text
, дублирующий идентификатор, который должен быть уникальным, что может нарушать JS