Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера

Учимся выделять текст и получать выделенный текст на 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
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: получать, выделенный, Apocalypse, JavaScript, текст, by, на, Учимся, выделять
Просмотров: 669 | Загрузок: 0 | Рейтинг: 1.0/3
Всего комментариев: 0
Имя *:
Email: