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

Question

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

Fondamentalement, tout ce dont j'ai besoin est une fonction qui alert() est 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 trivial-esque, j'utilise simplement le numéro dans l'id, décalage du début de la sélection, décalage de la fin de la sélection

donc, si je sélectionne

première ligne et il contient le texte
C'est la deuxième

Je reçois une alerte qui dit:.

sélection commence à la ligne 1, offset 12
sélection se termine à la ligne 2, offset 18

Il serait vraiment facile avec getRange() (je ne ai pas besoin de compatibilité d'Internet Explorer pour getRange() qui travailler pour FireFox, Chrome et Safari est OK) si le texte était en texte brut. Le problème ici est que <span>, <strong> and <em> étiquettes sont partout et que chacun d'eux est un nouveau childNode. Donc, getRange() ne fonctionne pas.

Je n'ai pas trouvé un moyen d'ignorer le balisage. Il semble qu'il n'y a pas de moyen facile de le faire. Mais je ne suis pas un expert 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>

Quelqu'un pourrait-il aider mon écrire mon magicCode()?

Merci!

Answer 1

Vous pouvez utiliser la propriété .textContent pour obtenir uniquement les valeurs de texte sans HTML. Vous pouvez facilement le faire fonctionner dans tous les navigateurs en vérifiant .innerText et en l'utilisant s'il existe, sinon utilisez .textContent. innerText œuvres dans IE et Firefox dans textContent œuvres/Chrome etc.

Voici un échantillon de ce qui suit:

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

Answer 2

Vous pouvez regarder en utilisant la balise canvas pour générer votre texte; cela peut être un peu compliqué et exagéré pour votre projet.

Bespin est un éditeur de code entièrement créé avec la balise canvas. Je n'ai pas regardé la source, donc je ne peux pas vous dire comment ils parviennent à rendre le texte et à imiter la sélection de texte.

https://bespin.mozilla.com/