Поиск в тексте
Мучаюсь уже несколько дней.
Нужно реализовать поиск слова в тексте, выделить и подсчитать найденные слова в тексте. Ко всему, нужно чтобы без перезагрузки страницы можно было ввести новое слово, старый поиск сброситься и будет выдан новый результат с учетом нового слова. Есть код поиска слова в тексте и выделения его цветом:
(function($) {
$.fn.highlight = function(words, settings) {
// default настройки
var highlight_settings = {
split: ' ',
className: 'highlight',
deafultpagetext : null,
caseSensitive: false
};
highlight_settings = $.extend(highlight_settings, settings);
function wordsHighlight(node, words) {
// Если поиск в тексте
if (node.nodeType == 3) {
var regexp = new RegExp("(" + words.replace(new RegExp(highlight_settings.split, 'g'), "|") +")",
(highlight_settings.caseSensitive ? "" : "i") + "g");
var str = $('<div></div>').text(node.data).html();
$(node).replaceWith(str.replace(regexp, '<span id="kwh" class="' + highlight_settings.className + '">$1</span>'));
// Если поиск в тегах
}
}
return this.each(function() {
wordsHighlight(this, words);
});
};
})(jQuery);
Далее вызываю из нужной мне страницы с текстом:
$(document).ready(function(){
$("#wordznalyze").click(function(){
$("#pagetext").highlight($("#kword").val());
});
});
<DIV class='words'>
<DIV class='col2'>
<DIV>Введите ключевое слово:</DIV>
<DIV><INPUT type='text' id='kword'></DIV>
</DIV>
<DIV class='col2'>
<DIV>Кол-во вхождений:</DIV>
<DIV id='wordcount'></DIV>
</DIV>
<DIV class='col3'><INPUT type='submit' id='wordsearch' value="Анализировать"></DIV>
</DIV>
Собственно, слова ищутся, но единожды (т.е. при вводе нового слова, в тексте остаются выделенными старые слова). Но главное, не знаю как подсчитать количество совпадений слова в тексте. |
Рекурсивно проходя по всем узлам DOM-дерева, собирайте все текстовые узлы (nodeType == 3) в массив, и ищите текст уже среди nodeValue этих узлов, постепенно в цикле складывая их в строку. Поиск регулярным выражением по HTML-коду тут беспомощен.
Для IE можно использовать метод range.findText, в остальных браузерах, кроме Opera, есть метод find, но он будет дергать страницу к каждому результату. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поиск символов</title>
</head>
<body style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;">
<script type="text/javascript">
var stringCounter=0,saveOriginal=document.getElementById('searchText').innerHTML;
function textCounter() {
var mass=null,symbols="";stringCounter=0;
var symbolsearch=document.getElementById('searchText').innerHTML;
var string=prompt("Введите символ для поиска","");
var lastIndex="";
if(string=="undefined"||string==null||string=="") {
alert("Введён некорректный символ!!!");
}
else {
mass=symbolsearch.split(string);
for(var i=0;i<mass.length-1;i++) {
symbols+=mass[i];
symbols+="<span style='color:red;font-size:11px;font-weight:bold'>"+string+"</span>";
stringKeeper=string;
}
symbols+=mass[i];
document.getElementById('searchText').innerHTML=symbols;
for(var g=0;g<symbolsearch.length;g++) {
if(symbolsearch.substr(g,string.length)==string) {
stringCounter++;
}
document.getElementById('matches').innerHTML=stringCounter;
}
}
}
function clearElements() {
document.getElementById('searchText').innerHTML=saveOriginal;
}
</script>
<div id="searchText">Lorem ipsum — название классического текста-«рыбы». «Рыба» — слово из жаргона дизайнеров, обозначает условный, зачастую бессмысленный текст, вставляемый в макет страницы. Lorem ipsum представляет собой искажённый отрывок из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры на латинском языке. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке.
</div>
<p>Всего совпадений: <span id="matches"></span></p>
<a href="#" onclick="clearElements();textCounter();" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#0099FF;">Найти символ в тексте</a><br/><br/>
</body>
</html>
|
специально зарегился, чтобы сказать спасибо!всю ночь манался с этим поиском и подсветкой!
правда вот что то ничего нормально как обычно не запустилось. Chrome вообще русские символы не понимал, пока не убрал кодировку.Как убрал функцию clearElements(для чего она?) - всё заработало. Если кто знает, по какой причине так произошло ответьте) |
| Часовой пояс GMT +3, время: 05:47. |