Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Поиск в тексте (https://javascript.ru/forum/jquery/12080-poisk-v-tekste.html)

javascript 29.09.2010 16:28

Поиск в тексте
 
Мучаюсь уже несколько дней.
Нужно реализовать поиск слова в тексте, выделить и подсчитать найденные слова в тексте. Ко всему, нужно чтобы без перезагрузки страницы можно было ввести новое слово, старый поиск сброситься и будет выдан новый результат с учетом нового слова.

Есть код поиска слова в тексте и выделения его цветом:
(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>


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

Octane 29.09.2010 16:32

Рекурсивно проходя по всем узлам DOM-дерева, собирайте все текстовые узлы (nodeType == 3) в массив, и ищите текст уже среди nodeValue этих узлов, постепенно в цикле складывая их в строку. Поиск регулярным выражением по HTML-коду тут беспомощен.

Для IE можно использовать метод range.findText, в остальных браузерах, кроме Opera, есть метод find, но он будет дергать страницу к каждому результату.

JsLoveR 30.09.2010 00:47

<!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>

8simbols 31.05.2011 10:40

специально зарегился, чтобы сказать спасибо!всю ночь манался с этим поиском и подсветкой!
правда вот что то ничего нормально как обычно не запустилось.
Chrome вообще русские символы не понимал, пока не убрал кодировку.Как убрал функцию clearElements(для чего она?) - всё заработало.
Если кто знает, по какой причине так произошло ответьте)


Часовой пояс GMT +3, время: 23:35.