2010-11-14 26 views
14

Esiste un modo cross-browser per ottenere l'HTML del testo selezionato?HTML del testo selezionato

+0

possibile duplicato (http://stackoverflow.com/questions/10478/getting-selected-text-in-a-browser-multipiattaforma) – Sarfraz

+5

Nessuna delle risposte a questa domanda è molto buona, ed è una domanda diversa: richiede il testo selezionato, non l'HTML di il testo selezionato. –

+0

Già risposto su SO http://stackoverflow.com/questions/10478/getting-selected-text-in-a-browser-cross-platform – wiifm

risposta

31

Questa funzione farlo in tutti i principali browser: [. Ottenere il testo selezionato in un browser, cross-platform]

function getSelectionHtml() { 
 
    var html = ""; 
 
    if (typeof window.getSelection != "undefined") { 
 
     var sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
      var container = document.createElement("div"); 
 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
 
       container.appendChild(sel.getRangeAt(i).cloneContents()); 
 
      } 
 
      html = container.innerHTML; 
 
     } 
 
    } else if (typeof document.selection != "undefined") { 
 
     if (document.selection.type == "Text") { 
 
      html = document.selection.createRange().htmlText; 
 
     } 
 
    } 
 
    return html; 
 
} 
 

 

 
// bind events for selection 
 

 
document.addEventListener('mouseup', function(){ 
 
    var selectedHTML = getSelectionHtml(); 
 
    if(selectedHTML) 
 
    console.log(selectedHTML) 
 
}); 
 

 
document.addEventListener('keyup', function(e){ 
 
    var selectedHTML, key = e.keyCode || e.which; 
 
    if(key == 16){ // if "shift" key was released 
 
    selectedHTML = getSelectionHtml(); 
 
    if(selectedHTML) 
 
     console.log(selectedHTML) 
 
    } 
 
});
<ul contenteditable> 
 
    <li><p>Select <b>this</b> <em>text</em> right <i>here</i></p></li> 
 
    <li>Or <b>this text</b></li> 
 
</ul>

+2

Il problema di questa soluzione è che quando si seleziona la parte caps-locked di

primo comma TESTO DA

essere selezionati secondo comma

non si ottiene aspetta "Testo da

ESSERE SELEZIONATO "ma"

TESTO A

ESSERE SELEZIONATO

- per qualche motivo tag di annunci del browser che non sono nella selezione per chiudere quelli che sono. C'è un modo per ottenere solo ciò che realmente è nella selezione? – honzzz

+2

Un documento HTML è fondamentalmente un albero di nodi: una volta che il testo HTML iniziale è stato analizzato, è praticamente finito e devi occuparti dei nodi. Sarebbe possibile (ma relativamente complicato) convertire la selezione in tipo di stringa che suggerisci ma non è garantito che corrisponda al testo HTML originale, che è solo uno dei tanti modi ugualmente validi di rappresentare il documento. –

+0

Funziona per me grazie !! Mi ha dato anche qualche idea .. –

Problemi correlati