Могу ли я получить в Javascript точные координаты текста, загроможденного тэгами (дочерние узлы везде?)

Question

См. Пример ниже: он показывает строки текста в таблице (есть веская причина для этого, но это не проблема здесь).

По сути, все, что мне нужно, - это функция, которая оповещает () о точных координатах выделения текста , когда я нажимаю на ссылку. Под идеальными координатами я подразумеваю: номер строки начала выделения, номер строки конца выделения (эти два тривиально-простые, я просто использую число в идентификаторе <td>, смещение начала Выделение, смещение конца выделения.

Итак, если я выберу

первая строка и содержит текст
Это второй

Я получаю предупреждение, которое говорит:

выбор начинается со строки 1, смещение 12
выбор заканчивается в строке 2, смещение 18

Было бы действительно легко с getRange () (мне не нужна совместимость с Internet Explorer, поэтому getRange (), которая работает с FireFox, Chrome и Safari, в порядке), если текст был простым текстом. Проблема здесь в том, что теги <span>, <strong> and <em> есть везде и каждый из них является новым childNode. Так что getRange () не работает.

Я не нашел способ игнорировать разметку. Кажется, нет простого способа сделать это. Но я не эксперт по Javascript и, возможно, есть хитрость, чтобы игнорировать (или заставить функцию действовать так, как если бы она игнорировала) теги в тексте.

<a href="javacript: magicCode();">Select some text in the table then click here</a><br> <table><br> <tr><br> <td id="content1">This <span class="one">is the</span> first line <span class="two">and it contains</span> text</td><br> </tr><br> <tr><br> <td id="content2">This is the <span class="three">second line and it contains text</span></td><br> </tr><br> <tr><br> <td id="content3"><span class="four">This is <span class="five">the third</span> line and it</span> contains text</td><br> </tr><br> <tr><br> <td id="content4">This is <strong>the fourth <em>line</em> and it</strong> contains text</td><br> </tr><br> <tr><br> <td id="content5">This is the fifth line and it contains text</td><br> </tr><br> </table>

Может ли кто-нибудь помочь мне написать мой magicCode ()?

Спасибо!

Answer 1

Вы можете использовать свойство .textContent, чтобы получить только текстовые значения без HTML. Вы также можете легко заставить его работать во всех браузерах, проверяя .innerText и используя его, если он существует, в противном случае используйте .textContent. innerText работает в IE и textContent работает в Firefox / Chrome и т. Д.

Вот пример этого:

 var content = document.getElementById('content1');
 if(content.innerText){
   alert(content.innerText);
 }else{
   alert(content.textContent);
 }

Answer 2

Возможно, вы захотите изучить использование тега canvas для генерации вашего текста; это может быть немного сложным и чрезмерным для вашего проекта.

Bespin - это редактор кода, созданный полностью с тэгом canvas. Я не смотрел на источник, поэтому не могу рассказать вам, как им удается отображать текст и имитировать выделение текста.

https://bespin.mozilla.com/