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