модифицировать скрипт поиска
данный код рассматривался не раз на данном сайте,однако решения небыло найдено.Задача-модифицировать скрипт поиска таким образом ,чтобы поиск происходил только по тексту контента страницы,например только в тегах h1 или p.В данном скрипте ниже наблюдается поломка кода HTML,содержащего текст,например ломаются атрибуты title и alt картинок на странице в своих текстовых значениях.
<script type="text/javascript">
var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в исходном виде
function TrimStr(s) {
s = s.replace( /^\s+/g, '');
return s.replace( /\s+$/g, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
var obj = window.document.getElementById(inputId);
var textToFind;
if (obj) {
textToFind = TrimStr(obj.value);//обрезаем пробелы
} else {
alert("Введенная фраза не найдена");
return;
}
if (textToFind == "") {
alert("Вы ничего не ввели");
return;
}
if(document.body.innerHTML.indexOf(textToFind)=="-1")
alert("Ничего не найдено, проверьте правильность ввода!");
if(copy_page.length>0)
document.body.innerHTML=copy_page;
else copy_page=document.body.innerHTML;
if (textToFind.length < 3) {
alert("Введите не менее 3-х символов!");
return;
}
document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:grey'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
}
</script>
<h2>JavaScript поиск по странице</h2>
<input type="text" id="text-to-find" value="">
<input type="button" onClick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>
<br/><i>Введите слово или фразу для поиска.</i>
<hr/>
|
Если document.body заменить на document.getElementById("") тогда возвращает только один элемент, т.к. id должен быть уникален.Если подставить document.querySelectorAll('.one') то почему то не работает.Где ошибка?
<!doctype html>
<html>
<head>
<script type="text/javascript">
var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в исходном виде
function TrimStr(s) {
s = s.replace( /^\s+/g, '');
return s.replace( /\s+$/g, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
var obj = window.document.getElementById(inputId);
var textToFind;
if (obj) {
textToFind = TrimStr(obj.value);//обрезаем пробелы
} else {
alert("Введенная фраза не найдена");
return;
}
if (textToFind == "") {
alert("Вы ничего не ввели");
return;
}
if(document.querySelectorAll('.one').innerHTML.indexOf(textToFind)=="-1")
alert("Ничего не найдено, проверьте правильность ввода!");
if(copy_page.length>0)
document.querySelectorAll('.one').innerHTML=copy_page;
else copy_page=document.querySelectorAll('.one').innerHTML;
if (textToFind.length < 3) {
alert("Введите не менее 3-х символов!");
return;
}
document.querySelectorAll('.one').innerHTML = document.querySelectorAll('.one').innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
document.querySelectorAll('.one').innerHTML = document.querySelectorAll('.one').innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:grey'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
}
</script>
</head>
<body>
<body>
<h2>JavaScript поиск по странице</h2>
<input type="text" id="text-to-find" value="">
<input type="button" onClick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>
<br/><i>Введите слово или фразу для поиска.</i>
<hr/>
<p class="one">
text1 content content content content content content content content content content content content content content content content content
</p>
<p class="one">
text2 content content content content content content content content content content content content content content content content content
</p>
<p class="one">
text3 content content content content content content content content content content content content content content content content content
</p>
<p class="one">
text4 content content content content content content content content content content content content content content content content content
</p>
</body>
</html>
|
Цитата:
|
окей, что делать? Как сделать выборку? пробовал getElementsByClassName() тоже не работает и тоже возвращает обьект типа NodeList.Какие варианты?
|
Цитата:
|
Цитата:
|
не имею опыта перебирать в цикле.Могу найти только по индексу тега
|
Цитата:
|
перебрал, нашёл ,что дальше?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
<h3>p теги с текстом</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var pElements = document.getElementsByTagName("p");
for (var i = 0; i < pElements.length; i++) {
alert("Текст параграфа: " + pElements[i].innerText + " нашёл");
}
</script>
</body>
</html>
|
Цитата:
|
так правильно?
<script type="text/javascript">
var pElements = document.getElementsByTagName("p");
for (var i = 0; i < pElements.length; i++) {
document.getElementsByTagName("p").innerHTML = document.getElementsByTagName("p").innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола;
document.getElementsByTagName("p").innerHTML = document.getElementsByTagName("p").innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:grey'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
}
var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в исходном виде
function TrimStr(s) {
s = s.replace( /^\s+/g, '');
return s.replace( /\s+$/g, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
var obj = window.document.getElementById(inputId);
var textToFind;
if (obj) {
textToFind = TrimStr(obj.value);//обрезаем пробелы
} else {
alert("Введенная фраза не найдена");
return;
}
if (textToFind == "") {
alert("Вы ничего не ввели");
return;
}
if(document.getElementsByTagName("p").innerHTML.indexOf(textToFind)=="-1")
alert("Ничего не найдено, проверьте правильность ввода!");
if(copy_page.length>0)
document.getElementsByTagName("p").innerHTML=copy_page;
else copy_page=document.getElementsByTagName("p").innerHTML;
if (textToFind.length < 3) {
alert("Введите не менее 3-х символов!");
return;
}
lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
}
</script>
<body>
<h2>JavaScript поиск по странице</h2>
<input type="text" id="text-to-find" value="">
<input type="button" onClick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>
<br/><i>Введите слово или фразу для поиска.</i>
<hr/>
<div>
<h3>p теги с текстом</h3>
<p>Первый абзац С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.</p>
<p>Второй абзац С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.</p>
<p>Третий абзац С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.</p>
</div>
</script>
|
Цитата:
document.getElementsByTagName("p").innerHTML=copy_ page; copy_page=document.getElementsByTagName("p").inner HTML; так нельзя, ни к чему, и нужно заново повторять? |
там
if(copy_page.length>0)
document.getElementsByTagName("p").innerHTML=copy_page;
else copy_page=document.getElementsByTagName("p").innerHTML;
|
Если коллекция элементов, то получить/изменить ее свойство innerHTML можно только обратившись к каждому ее элементу, то есть обходом коллекции в цикле.
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
окей, как обратиться в цикле?
|
А это нечто иное?
|
так тоже не работает
var pElements = document.getElementsByTagName("p");
for (var i = 0; i < pElements.length; i++) {
pElements[i].innerHTML = pElements[i].innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола;
pElements[i].innerHTML = pElements[i].innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:grey'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
|
JAMLIGHT,
оно в любом случае не будет работать корректно даже если и записать это правильно. Это можно назвать принципом поиска, но далеко не готовым кодом для этого и вот почему. Найденное обрамляется тегом А с именем (тут уже почти неизбежны ошибки) и текстом равным поисковому запросу. Первое действие находит сочетания имени и старого запроса удаляя их, но при этом сам тег А со стилем подсветки остается. То есть подсветка предыдущего поиска останется на странице наряду с подсветкой нового поиска. Таким образом если изначально в параграфах был текст, то с каждым запросом он засоряется html-тегами от предыдущего поиска. А что будет если найти нужно будет сочетания слов одно из которых при этом будет обрамлено таким тегом? А если в "боевых условиях", где содержимое параграфов не гарантия "чистого текста", а различные html теги? А может получится в итоге ужас на странице.
<html>
<head>
<meta charset="utf-8">
<body>
<p>какой-то текст с чем-то <a name="для" style="background:grey">для</a> поиска</p>
<p>какой-то текст с чем-то <a name="для" style="background:grey">для</a> поиска</p>
<script>
var pElements = document.getElementsByTagName("p"),
lastResFind = "для",
textToFind = "чем-то",
last = new RegExp('name="'+lastResFind+'"', 'gi'),
find = new RegExp(textToFind, 'gi');
for (var i = 0; i < pElements.length; i++) {
pElements[i].innerHTML = pElements[i].innerHTML.replace(last, " ").replace(find, '<a name="'+textToFind+'" style="background:grey">'+textToFind+'</a>');
}
</script>
</body>
</html>
|
Ну мне бы под свои нужды хотя бы. У меня в тегах p чистый текст будет.Тоесть скрипт очищает только текст якоря , а теги якоря остаются?А что делает данный код
pElements[i].innerHTML = pElements[i].innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола;
?Ну это если только до перезагрузки страницы .Ясно, что можно придумать? |
Цитата:
<html>
<head>
<meta charset="utf-8">
<style>
.higlight {
background-color: #8FDB83;
}
</style>
</head>
<body>
<p>какой-то текст с чем-то <a class="higlight">для</a> поиска</p>
<p>какой-то текст с чем-то <a class="higlight">для</a> поиска</p>
<script>
var pElements = document.getElementsByTagName("p"),
lastResFind = "для",
textToFind = "чем-то",
last = new RegExp('<a.+>'+lastResFind+'</a>', 'gi'),
find = new RegExp(textToFind, 'gi');
for (var i = 0; i < pElements.length; i++) {
pElements[i].innerHTML = pElements[i].innerHTML.replace(last, lastResFind).replace(find, '<a class="higlight">'+textToFind+'</a>');
}
</script>
</body>
</html>
Атрибут name тегу не добавлять, а только класс, которому в CSS определять цвет подсветки. |
без атрибута name не будет перемещения к якорю
|
Ну добавляйте, только каждое имя должно быть уникально.
|
соберите код воедино.Я не пишу на яваскрипте и синтаксиса не знаю.Задача модифицировать скрипт,Подсказки мне что русскому на китайском
|
Цитата:
Все. Далее можете в сети более глубоко углубиться в тему, например тут: https://habrahabr.ru/sandbox/101260/ https://habrahabr.ru/post/257025/ Под jQuery есть готовый плагин http://johannburkard.de/blog/program...ry-plugin.html |
обрывок кода подсветки работает,но надо его прикрутить ещё к общей обьектой модели кода модуля поиска
|
Цитата:
|
[quote=laimas;469343]
https://habrahabr.ru/post/257025/ /QUOTE] это интересное решение на Jquery. Обычно и пользуюсь Jquery. Просто заинтересовало решение на Javascript |
Цитата:
|
дауж .Особенно от моих навыков кодить на языке Яваскрипт. Использовал решение на Jquery-работает.Спасибо
|
А что делать если у меня контент в айфрейме и скрипт не может прокрутить скролл страницы до нужного места так как крутит скролл айфрейма? это новую тему создавать?
|
| Часовой пояс GMT +3, время: 15:58. |