Dans Javascript, puis-je obtenir les coordonnées exactes sur le texte encombré de tags (childNodes partout?)

Voir l'exemple ci-dessous: il montre des lignes de texte dans un tableau (il y a une bonne raison pour cela, mais ce n'est pas le problème ici).

Fondamentalement, tout ce dont j'ai besoin est une fonction qui permet d'alerter () pour moi les coordonnées parfaites de la sélection de texte lorsque je clique sur le lien. Par coordonnées parfaites, je veux dire: numéro de ligne du début de la sélection, numéro de ligne de la fin de la sélection (ces deux sont triviaux, j'utilise simplement le numéro dans l'ID <td> , décalage du début de la sélection Sélection, décalage de la fin de la sélection.

Donc, si je sélectionne

Première ligne et contient du texte
C'est le deuxième

• Affichage automatique de l'élément vidéo sur le navigateur mobile
• Détection de mots en hébreu dans un document via JavaScript
• Window.clipboardData ne fait pas partie de Javascript?
• Internet Explorer 11 (IE 11) lance une erreur de syntaxe à l'aide de parseFromString dans DOMParser
• Pourquoi est-il bon de mettre l'étiquette de script dans la balise de fin de corps?

Je reçois une alerte qui dit:

La sélection commence à la ligne 1, décalée 12
La sélection se termine à la ligne 2, décalée 18

Ce serait vraiment simple avec getRange () (Je n'ai pas besoin de la compatibilité d'Internet Explorer, alors getRange () qui fonctionne pour FireFox, Chrome et Safari est OK) si le texte était en texte clair. Le problème ici est que les balises <span>, <strong> and <em> sont partout et que chacune d'elles est un nouveau N ° d'enfant. Donc getRange () ne fonctionne pas.

Je n'ai pas trouvé de moyen d'ignorer le balisage. Il semble qu'il n'y ait pas de moyen facile de le faire. Mais je ne suis pas un expert en Javascript et peut-être qu'il y a une astuce à ignorer (ou à faire fonctionner la fonction comme si elle ignorait) les balises dans le texte.

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

Est-ce que quelqu'un pourrait aider à écrire mon magicCode ()?

Merci!

• Pourquoi getElementsByTagName est-il renvoyé indéfini?
• La relation entre <iframe> et son document est-elle d'une manière?
• Relier les fonctions personnalisées aux événements DOM dans un prototype?
• Comment obtenir un élément DOM :: avant contenu avec javscript?
• JavaScript: comment ajouter dynamiquement un fichier Flash (SWF) au DOM, donc IE va le charger

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