Получить текстовое смещение от события клика через Javascript?

Question

Итак, я обыскал все, пытаясь понять, как сделать следующее, и пока не нашел решения:

Мне нужно получить смещение текста для данного элемента HTML из события щелчка. Это означает, что если у меня есть следующий HTML

<p>This is a really cool paragraph</p>

и пользователь нажимает на первое «а» в предложении, смещение текста будет равно 8, поскольку первое «а» находится в индексе 8, если мы возьмем «Т» в «Это» в качестве индекса 0.

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

Спасибо!

Answer 1

Скопировано из вашего комментария в другом ответе:

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

Для автоматизации веб-браузера вам нужен Selenium: http://seleniumhq.org/

Answer 2

Использование прототипа:

<p id='mytext'>This is a really cool paragraph</p>
<script type='text/javascript'>
   var characters = $('mytext').textContent;
   var newchars = '';
   for(I = 0;I < chars.length;I++) {
      newchars += '<span id="char_' + I + '">' + chars[I] + '</span>';
   }
   $('mytext').textContent = newchars;
   Event.observe($('mytext'), 'click', function(e) {
      var spanID = (e.findElement('span')).getAttribute('id')
      var index = spanID.split('_')[1]; // Ta-daaa!
   });
</script>

Пожалуйста, не делайте этого для больших блоков текста (или, желательно, вообще). Он создает DOM-узел для каждого символа и может замедлить работу браузера ...

Answer 3

Добавьте каждую букву внутри тега span, а событие onClick просто извлекает букву внутри тега span и может сохранять ссылку на некоторые атрибуты в теге span для отслеживания индекса позиции для каждого элемента. Но такой подход будет быть избыточным.

Answer 4

Просто выбрасываю это как возможный взлом / решение.

Вы можете попробовать использовать мышь offsetX и offsetY, когда происходит щелчок, и имитировать двойной щелчок dblclick в этом месте, эффективно выделяя текст, а затем используя API выбора, чтобы получить слово, по которому они щелкнули. Не сработает на букву, но может сработать на слово.

Answer 5

Не думаю, что для этого есть что-то встроенное. Любое решение будет взломанным и ненадежным.

Что вы можете сделать - это использовать API выбора , чтобы получить выбор пользователя на странице, что звучит так, как вы можете.

Answer 6

Попробуйте window.getSelection() ... Я не уверен, работает ли он во всех браузерах, но, по крайней мере, Chrome создает объект Selection с необходимым смещением.