テキストを選択し、AJAXのjQueryで3つの部分に分割してください

コンテナ（DIV）内にたくさんのHTMLを入れておきたいと思います。それは私が探している "編集可能な領域"ではありません。ユーザーがテキストを上書き/変更できるようにする必要はありません。ちょうどそれに印を付けるテキストを選択し、AJAXのjQueryで3つの部分に分割してください

ユーザーが選択した後、選択されたものは知りたいが、その選択された部分はどこにあるのか知りたい。

例：

私たちは弾丸のリストを持っており、ユーザーがbulletline 3と4
を選択我々は、いくつかのHeadline1と3つの段落を持っています。次に、ユーザは中間段落の一部を選択する。私はその段落のどこにいるか知りたいと思います。

私はMSIEが選択の問題を抱えていることを少し理解しています。選択肢のstartPosとendPosについては、

第2に、マークされたテキストがコンテナ全体の中に複数回ある場合はどうなりますか？ここで

例です：ユーザーが単語を知っているのに十分にそのよくない「テンプス」を選択した場合、問題はここにある

<div id="markable"> 

    <h1>Here is a nice headline</h1> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non 
     tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus 
     neque, tempus iaculis sapien consectetur id.</p> 

    <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus. 
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
    Curae; Quisque fringilla massa id libero commodo venenatis.</p> 

    <ol> 
    <li>here is a bullet line #1</li> 
    <li>here is a bullet line #2</li> 
    <li>here is a bullet line #3</li> 
    <li>here is a bullet line #4</li> 
    <li>here is a bullet line #5</li> 
    <li>here is a bullet line #6</li> 
    </ol> 

    <h2>here is a sub-headline</h2> 

    <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus. 
    Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent 
    per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et 
    malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
    consequat.</p> 

</div>

、私はまた言葉のWHICH（何段落知っておく必要があります/見出し/箇条書き要素）です。

理由は、「読者」が興味/関心のあるものを見つけることができるということです。場合によっては段落全体、たまには単一の単語または見出しになることもあります。我々は何とか選択されたDOMである「要素」に（私が推測する上から数えて）を検出することができれば

完璧なソリューション

は次のようになります。次に、その特定の要素の中のどれくらい（開始点と終了点）。私はありませんいくつかのオンラインコードエディタを見つけた

し、我々は戻ってマークされ、その後、どのような今までにやるされたものをバックエンドに伝える私たちのASP.NETへのAjaxのいくつかの並べ替えを行うことができますので...上記の束+必要以上に多くの、しかし、ソリューションは、これははるかに簡単ですと考えています。 jQueryソリューションを使い始めるための適切な方法を見つけることができません。

これを読んでいるjQuery Yodaを希望します。 :-)

出典

2011-01-28 BerggreenDK

はあなた http://code.google.com/p/rangy/

出典

2011-02-01 09:47:18 Michal

クール、私はあなたからのより多くの答えを期待していませんでした。私はそれを調べ、私たちの問題を解決すれば誰に "感謝"して/マークするかを覚えています。これまでのおかげで。 – BerggreenDK

素晴らしい！これはそれです！ – BerggreenDK

残念ながら、これは部分的な回答に過ぎません。これは、選択がすべてのブラウザで開始および終了する要素のインデックスを提供しますが、選択の開始点と終了点のオフセットは、GeckoおよびWebKitブラウザ。 IEはTextRangeオブジェクトのみをサポートしています。これは私にとっては謎であり、少し苦労します（この答えの一番下にあるリンクはすべてのブラウザをカバーする実装の例です）

このソリューションはインデックスを返します選択範囲に含まれる要素（#markableコンテナに関する）と開始および終了選択のインデックス（包含ノードに関連して）

この例では、選択項目を含む要素をキャプチャするためにイベントを使用していますが（これはブラウザの違いによるものです）、Rangeオブジェクトとしてイベント（Firefox、Opera、Chrome、およびSafari用）あなたに与えられる選択が開始され、ここでは（ここではhttp://www.quirksmode.org/dom/range_intro.html詳細）

<html> 
<head> 

    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    <script> 

    var end; 
    var start; 

    indexes = new Array(); 
var endIndex; 
    var startIndex; 
    $(document).ready(function(){ 


$("#markable").mouseup(function(event){ 
end = event.target; 

indexes.push($("*", "#markable").index($(end))); 
//normalize start and end just in case someone selects 'backwards' 
indexes.sort(sortASC); 




event.stopPropagation() 
}) 

$("#markable").mousedown(function(event){ 
indexes.length=0; 
start = event.target; 
event.stopPropagation() 
indexes.push($("*", "#markable").index($(start))); 
}) 

$(".button").click(function(){ 

sel = getSel(); 

alert("Index of the element selection starts in (relative to #markable): "+indexes[0] +"\n" + 
"Index of the of the beginning of selection in the start node: "+ sel.anchorOffset+"\n" + 
"Index of the element selection ends in (relative to #markable): "+ indexes[1]+"\n"+ 
"Index of the of the end of selection in the end node: "+ sel.focusOffset) 

}) 

    }) 




function sortASC(a, b){ return (a-b); } 
function sortDESC(a, b){ return (b-a); } 

function getSel() 
{ 
    var txt = ''; 
     if (window.getSelection) 
    { 
        txt = window.getSelection(); 
             } 
    else if (document.getSelection) 
    { 
        txt = document.getSelection(); 
            } 

    else if (document.selection) 
    { 
        txt = document.selection.createRange(); 
            } 
    else return; 
return txt; 
} 
</script> 

</head> 
<body> 
<div id="markable"> 

    <h1>Here is a nice headline</h1> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non 
     tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus 
     neque, tempus iaculis sapien consectetur id.</p> 

    <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus. 
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
    Curae; Quisque fringilla massa id libero commodo venenatis.</p> 

    <ol> 
    <li>here is a bullet line #1</li> 
    <li>here is a bullet line #2</li> 
    <li>here is a bullet line #3</li> 
    <li>here is a bullet line #4</li> 
    <li>here is a bullet line #5</li> 
    <li>here is a bullet line #6</li> 
    </ol> 

    <h2>here is a sub-headline</h2> 

    <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus. 
    Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent 
    per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et 
    malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
    consequat.</p> 

</div> 
<input type=button class=button value="Get selection data"> 


</body> 
</html>

それぞれ終了しているDOMノードであるanchorNodeとfocusNodeはあなたにクロスブラウザのソリューションの多くを与えるのリンクがある（下にスクロール例2） http://help.dottoro.com/ljjmnrqr.php

EDIT：IEでは、テキスト範囲を取得するためにdocument.body.createTextRange（）を使用する必要があります。私はまだあなたがanchorOffset相当を取得する方法がわからないのですが、以下のリンクが役に立つかもしれません。ここで http://bytes.com/topic/javascript/answers/629503-ie-selection-range-set-range-start-click-position-get-char-offset

出典

2011-01-29 12:33:15 Michal

素晴らしいのためにあなたが望むすべてを行いますクロスブラウザライブラリです！私は明日それを見ます。今までありがとう。 – BerggreenDK

テキストを選択し、AJAXのjQueryで3つの部分に分割してください

答えて

関連する問題