Wie bekomme ich die Position einzelner Zeichen, die auf den Browsern des Benutzers gerendert werden? (Jquery/javascript)

Question

<p> this is a very long text indeed. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>  

Wenn ich den Beispieltext im Web rende, ändert sich die Position der einzelnen Zeichen basierend auf Benutzereinstellungen. (Zum Beispiel unterscheiden sich die Zeilenunterteilungen je nachdem, welchen Browser der Benutzer verwendet und wie stark die Seite vergrößert ist - zoomen Sie jede Webseite mit vielen Texten und Sie werden sehen, dass sich dies sehr ändert)

Aber die Anwendung, die ich versuche zu machen, muss die Position der einzelnen Charaktere zu arbeiten. Also brauche ich die Position relativ zu der gesamten Webseite und/oder einer anderen Position (zB die Position relativ zum Startpunkt des Absatzes.)

BTW, ich bevorzuge Jquery Lösung ... aber wenn du kannst ' t tun es mit JQuery, ich mit Lösungen OK bin mit anderen Bibliotheken/Tools

Danke :)

ps: sorry für mein schlechtes Englisch ..., wenn Sie nicht die Frage bekommen, ist es wahrscheinlich mein Fehler.

---

ich auf die Idee kam, die span-Tag und die .Offset der Verwendung von() - vielen Dank für die schnellen Lösungen :)

Aber ich frage mich, ob eine andere Art und Weise gibt es als das span-Tag mit ... vielleicht eine Art leeres Tag, das nur ein Zeichen oder mehr enthält ...

Ist das möglich, wenn ich CSS oder etwas anderes verwende?

trotzdem, danke nochmal :)

Answer 1

Ich glaube nicht, dass Sie dies mit erreichen kann die obige HTML erwähnt. Sie können die Position des Elements <p> mithilfe der Methode .offset() ermitteln. Aber du wirst nicht in der Lage sein, die Position einzelner Charaktere zu bekommen, wenn du sie nicht in separate Container legst, was meiner Meinung nach keine ideale Lösung sein wird.

Answer 2

Umm das ist keine großartige Lösung, aber ... vielleicht, wenn Sie den Text in einzelne Tags aufteilen, würde das funktionieren? Z.B.

<p> this is a very long text indeed.</p> 

wird, über JavaScript,

<p id="para1"> 
    <span> </span> 
    <span class="word"><span>t</span><span>h</span><span>i</span><span>s</span></span> 
    <span> </span> 
    <span class="word"><span>i</span><span>s</span> 
    <span> </span> 
    ... 
</p> 

Dann könnten Sie CSS verwenden sicherzustellen, dass es nicht in der Mitte des neuen "Wörter" bricht:

span.word { white-space: nowrap; } 

Dann Sie könnten die Position des n-ten Zeichens mit etwas wie

bekommen

Hier n ist Null-basierte, so in der oben genannten '' ist das 0. Zeichen und 't' ist das erste.

Answer 3

Ich kann Ihnen eine textuelle Antwort geben, was Sie tun können, aber es wird viel Arbeit erfordern, um eine browserübergreifende Implementierung zu sein, und ich kenne nicht genug Details, um brauchbaren Code bereitzustellen.

Zuerst das Zeichen auswählen, die Sie nach (ich nehme ein Range-Objekt benötigt werden, oder einige Textsuche über den Inhalt des Absatzes):

Lore m ipsum dolor sit amet.

Dann umgeben Sie es mit einer Spannweite:

Lore <Spannweite> m </span > ipsum dolor sit amet

Dann wählen Sie die Spanne und überprüfen es Offset:

var spanOffset = $('span').offset();

natürlich werden Sie wahrscheinlich eine Klasse zu der span hinzufügen möchten, und stellen Sie sicher, dass es die meisten neutralen Stile möglich ist.