Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавление тегов к словам по поиску (https://javascript.ru/forum/jquery/46955-dobavlenie-tegov-k-slovam-po-poisku.html)

seipa 01.05.2014 19:11

Добавление тегов к словам по поиску
 
Привет,

подскажите/натолкните на мысль, как с помощью jQuery сделать так, чтобы он нашёл в документе все слова (например, "программирование), и обрамил их в тег <span>?

можно конечно ручками переписать всё body и добавить теги нужным словам, но задача именно в этом - не трогая html при нажатии кнопки изменить цвет слова "программирование" во всём документе.

спасибоо

рони 01.05.2014 19:25

seipa,
http://javascript.ru/forum/project/4...-v-tekste.html

danik.js 01.05.2014 20:00

Пример без jQuery, на NodeIterator'е. Как и плагин, также игнорирует частично-форматированные слова и слова с мягким переносом.
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
	span{
		background: yellow;
	}
</style>
<p>подскажите/натолкните на мысль, как с помощью jQuery сделать так, чтобы он нашёл в документе все слова (например, "программирование), и обрамил их в тег &lt;span>? </p>
<p>
можно конечно ручками переписать всё body и добавить теги нужным словам, но задача именно в этом - не трогая html при нажатии кнопки изменить цвет слова "программирование" "программирование" во всём документе.
</p>
<script>
(function() {

var needle = 'программирование';

var nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);

var currentNode;
while (currentNode = nodeIterator.nextNode()) {
	var substringIndex = currentNode.data.indexOf(needle);
	if (substringIndex > -1) {
		var span = document.createElement('span');
		span.appendChild(document.createTextNode(currentNode.data.substring(substringIndex, substringIndex + needle.length)));
		var remainder = document.createTextNode(currentNode.data.substring(substringIndex + needle.length));
		currentNode.data = currentNode.data.substring(0, substringIndex);
		currentNode.parentNode.insertBefore(span, currentNode.nextSibling);
		currentNode.parentNode.insertBefore(remainder, span.nextSibling);
		// skip span
		nodeIterator.nextNode();
	}
}

})();
</script>


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