Javascriptでは、タグで煩雑なテキストの正確な座標を得ることができます（childNodes everywhere？）

Question

以下の例を参照してください：テーブルのテキスト行を表示します（これには良い理由がありますが、 。

基本的に、私が必要とするのは、リンクをクリックすると、のテキスト選択の完全な座標をalert（）する機能です。完璧な座標では、私は意味：選択の開始の行番号、選択の最後の行番号（それらの2つは些細なesque、私はちょうど<td>の番号を使用して、選択の開始オフセット、選択範囲の最後のオフセット

をので、私は

最初の行を選択して、それがテキスト
これは私が言う警告を得る第二

ある が含まれているとします。

を

選択は、1行目から始まり12
選択がライン2で終了オフセット、オフセット18

それはgetRange（と本当に簡単になります）（私はgetRangeので、Internet Explorerの互換性を（必要はありません）がテキストがプレーンテキストの場合、FireFox、Chrome、Safariの作業はOKです）。ここでの問題は、<span>, <strong> and <em>のタグがどこにでもあり、それぞれが新しいchildNodeであることです。したがって、getRange（）は機能しません。

マークアップを無視する方法が見つかりませんでした。簡単な方法はないようです。しかし、私はJavaScriptのエキスパートではなく、テキスト内のタグを無視する（または無視するかのように機能を動作させる）トリックがあるかもしれません。

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

誰もが）（私の書き込み私のmagicCodeを助けてもらえますか？

ありがとうございます！

Answer 1

.textContentプロパティを使用すると、HTMLなしのテキスト値だけを取得できます。 .innerTextをチェックし、それが存在する場合はそれを使用して、それ以外の場合は.textContentを使用して、すべてのブラウザで簡単に動作させることもできます。 IEでinnerText作品とFirefox/ChromeでtextContent作品など

は、ここでそのサンプルです：

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

Answer 2

あなたのテキストを生成するために、キャンバスのタグを使用してに見てみたいことがあります。それはあなたのプロジェクトにとっては少し複雑で上手くいくかもしれません。

Bespinは完全にキャンバスタグで作成されたコードエディタです。私はソースを見ていないので、テキストをレンダリングしてテキストの選択を模倣する方法を教えてくれません。

https://bespin.mozilla.com/