| Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Учимся выделять текст и получать выделенный текст на javascript by Apocalypse
| 31.10.14, 18:38:39 | |
 По просьбе пользователя Defman я подготовил данную статью. В ней будут описаны методы выделения участков текстовой и прочей информации, а также получение выделеной области и её вывод на экран средствами javascript Примеры использования функций вы можете увидеть ЗДЕСЬ 1. Выделение текста внутри блока с нужным id Для этого нам потребуется очень простая javascript функция: Код function setSelection() { var target = document.getElementById('apotxt').getElementsByTagName('span')[0]; // В переменной target мы находим элемент span внутри родительского элемента с id="apotxt" var rng, sel; if (document.createRange) { rng = document.createRange(); rng.selectNode(target) sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(rng); } else { var rng = document.body.createTextRange(); rng.moveToElementText(target); rng.select(); } } Функция очень простая, хорошая и рассчитана на работу во всех браузерах. Вот пример использования в элементарной HTML конструкции: Код <div onclick="setSelection()">Выделить</div> <br/> <div id="apotxt"> <span> Это текст, который нужно выделить </span> </div> 2. Получение выделенного текста на странице В этом случае нам уже понадобится другая функция, которая будет искать выделенный участок по всей странице и интерпретировать его в текстовую информацию. Но тут нам нужно будет немного схитрить при вызове функции - мы не можем вызывать её при клике, так как, кликнув по HTML объекту, вызывающему функцию, выделение снимется и функция не сможет определить выделенный элемент. Потому мы будем для функции использовать событие наведения мышки на кнопку получения. Функция запишет значение выделенной области сайта в глобальную переменную и мы уже потом сможем получить это значение любым удобным для нас событием Для начала посмотрите на саму функцию. В ней уже применена мини-фильтрация для полноценной интерпретации в текст: Код function get_selection() { if (window.getSelection) { selection = window.getSelection().toString(); selection = selection.replace(/\r\n\r\n/gi, "_doublecaret_"); selection = selection.replace(/\r\n/gi, " "); selection = selection.replace(/_doublecaret_/gi, "\r\n\r\n"); } else { selection = document.selection.createRange().text; } aposelectedtext = selection; // В эту переменную aposelectedtext будет записано значение выделенной области } Теперь рассмотрим применение на участке HTML кода: Код <div>Я пример текста, выделив участок которого можно получить его значение, выведенное через alert</div> <div onmouseover="get_selection()" onclick="alert(aposelectedtext)">Получить выделенный текст</div> Как можете видеть, при событии наведения мышки (onmouseover) мы ловим выделенный текст, а уже при клике делаем с нашей переменной то, что хотим, а в нашем случае, просто выводим её значение в алерт коне Если у вас остались какие-то вопросы, можете задать их в комментариях Статья подготовлена Apocalypse ApoTeam © 2014 | |
| Просмотров: 877 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |