ユーザーのブラウザで表示される個々の文字の位置を取得するにはどうすればよいですか？ （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>  

サンプルテキストをWeb上でレンダリングすると、各文字の位置はユーザーの設定に基づいて変化します。 （たとえば、ユーザーがどのブラウザを使用しているかに応じて線分が異なります。また、ページの拡大率はどのくらいですか？多くのテキストを含むウェブページをズームすると、この変更が多く表示されます）

私がしようとしているアプリケーションは、個々の文字の位置を取得する必要があります。 ウェブページ全体や他の位置（段落の開始点からの相対的な位置など）に相対的な位置が必要です。

私はJqueryソリューションを好んでいますが、トンjQueryを使ってそれを行う、私は他のライブラリ/ツールに

を使用したソリューションでOKだよありがとう:)

PS：あなたが質問を取得しない場合は私の悪い英語のため申し訳ありません...、それはおそらくです私のせい。

---

I）はspanタグと.offsetを（使用してのアイデアを得たが - :)迅速な解決のために

をありがとうしかし、spanタグを使用するよりも別の方法がありますのだろうか...文字以外の文字を含む何もない空タグの何か...多分

私はCSSや他のものを使用するとこれは可能ですか？とにかく

、再びありがとう:)

Answer 1

私はあなたが言及した上でHTMLを使用してこれを実現することができるとは思いません。 .offset()メソッドを使用して<p>要素の位置を取得できます。しかし、個別のキャラクターの位置を得ることができなくなります。別々の容器に置かないと、理想的な解決策にはならないでしょう。

Answer 2

うーん、これは素晴らしい解決策ではありませんが、個々のタグにテキストを分割すると、これはうまくいくでしょうか？例えば。

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

は

その後

<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> 

あなたはそれがあなたの新しい "言葉" の途中で壊れないことを確認するためにCSSを使用することができ、JavaScriptを経由して、次のようになります。そして、

span.word { white-space: nowrap; } 

あなたは何かでn番目のキャラクターの位置を得ることができます

var characters = $("#para1 span:not(.word)"); 
var nthPosition = characters.eq(n).offset(); 

ここではnはゼロベースなので、上記では0番目の文字を 't'が先頭です。

Answer 3

できることをテキストで回答することはできますが、クロスブラウザの実装には多くの作業が必要になり、実行可能なコードを提供するための詳細が不十分です。

まず、あなたが後にしている文字を選択します（私はレンジオブジェクトが必要とされるであろうと仮定し、または段落の内容の一部テキスト検索）：

ロアメートルイプサム嘆きAMET座ります。

次に、あなたがスパンとそれを囲む：

ロア<スパン>メートル< /スパン>イプサムの悲しみはAMET

座るその後、スパンを選択し、それがオフセットだチェック：

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

もちろん、スパンにクラスを追加し、最も中立なスタイルが可能であることを確認したいと思うでしょう。