Javascript：htmlタグに基づいてユーザー選択を拡張するにはどうすればよいですか？

Question

ルコード： http://jsfiddle.net/frf7w/12/

だから、今、現在の方法は、選択したとおりに...選択したテキストを取り、それが表示されたときに、ページが爆破しないようにタグを追加します。

しかし、私がしたいこと：これは、ユーザーがページの一部を選択したときに、選択範囲内に一致しないタグがある場合、その選択は前方一致または後方一致（不一致タグ選択に有効なHTMLを選択させるタグに変更します。

私がこれをやりたい理由は、ユーザーがページ上でテキストを選択できるようにし、そのテキストをWYSIWYGエディタで編集できるようにするためです（リンクされたコードでこれを行うことができます）、そして編集したものをページに戻します（私が使用するメソッドはタグを追加するので、現在はこれを行うことはできません）。

Answer 1

を含むスパンであなたの選択の要素を囲むことができます。

var sel = window.getSelection(), 
    range = sel.getRangeAt(0); 

var startEl = sel.anchorNode; 
if (startEl != range.commonAncestorContainer) { 
    while (startEl.parentNode != range.commonAncestorContainer) { 
     startEl = startEl.parentNode; 
    } 
} 
var endEl = sel.focusNode; 
if (endEl != range.commonAncestorContainer) { 
    while (endEl.parentNode != range.commonAncestorContainer) { 
     endEl = endEl.parentNode; 
    } 
} 

range.setStartBefore(startEl); 
range.setEndAfter(endEl); 

sel.addRange(range); 

上記の例をあなたのカバーに拡張された選択を提供します開始ノードと終了ノードの間のツリーの全体です（commonAncestorContainer()のおかげで）。

これはテキストノードをdom要素と等しく扱いますが、これは問題ではありません。

デモ：http://jsfiddle.net/Nq6hr/2/

Answer 2

選択したノードで作業する必要があります。それはextentNodeとanchorNodeは終わりを表し、選択のノードの始まりは両方ともあなたが "完全な"選択を持つのを助けることができるようです。 https://developer.mozilla.org/fr/DOM/Selection

インライン編集では、contentEditable属性を試してください。あなたはadding a rangeによって選択範囲の境界線を変更することができ、この属性にhttps://developer.mozilla.org/en/DOM/element.contentEditable

Answer 3

このSOの答えでcoverAll方法は、あなたがUse javascript to extend a DOM Range to cover partially selected nodesたい正確に何があります。何らかの理由でSelectionプロトタイプが私のクロームで私にとってうまくいかないので、コードを抽出してthisをwindow.getSelection()に置き換えました。最終的なコードは次のようになります：

function coverAll() { 
    var ranges = []; 
    for(var i=0; i<window.getSelection().rangeCount; i++) { 
     var range = window.getSelection().getRangeAt(i); 
     while(range.startContainer.nodeType == 3 
       || range.startContainer.childNodes.length == 1) 
      range.setStartBefore(range.startContainer); 
     while(range.endContainer.nodeType == 3 
       || range.endContainer.childNodes.length == 1) 
      range.setEndAfter(range.endContainer); 
     ranges.push(range); 
    } 
    window.getSelection().removeAllRanges(); 
    for(var i=0; i<ranges.length; i++) { 
     window.getSelection().addRange(ranges[i]); 
    } 
    return; 
}